Item

"use client"

import {
  Button,
  Item,

Usage

import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "uilab-core"

<Item>
  <ItemMedia variant="icon">
    <Icon />
  </ItemMedia>
  <ItemContent>
    <ItemTitle>Title</ItemTitle>
    <ItemDescription>Description</ItemDescription>
  </ItemContent>
  <ItemActions>
    <Button>Action</Button>
  </ItemActions>
</Item>

Item vs Field

Use Field if you need to display a form input such as a checkbox, input, radio, or select.

If you only need to display content such as a title, description, and actions, use Item.

Examples

Variants

Use the variant prop to change the visual style of the item.

"use client"

import {
  Item,
  ItemContent,

Sizes

Use the size prop to change the size of the item. Available sizes are default, sm, and xs.

import {
  Item,
  ItemContent,
  ItemDescription,
  ItemMedia,

Icon

Use ItemMedia with variant="icon" to display an icon.

import {
  Button,
  Item,
  ItemActions,
  ItemContent,

Avatar

You can use ItemMedia with variant="avatar" to display an avatar.

import {
  Button,
  Item,
  ItemActions,
  ItemContent,

Image

Use ItemMedia with variant="image" to display an image.

Midnight City Lights - Electric Nights

Neon Dreams

3:45

Coffee Shop Conversations - Urban Stories

The Morning Brew

4:05

Digital Rain - Binary Beats

Cyber Symphony

3:30

"use client"
import Image from "next/image"
import {
  Item,
  ItemContent,

Expand code

Group

Use ItemGroup to group related items together.

"use client"

import {
  Avatar,
  AvatarFallback,

Header

Use ItemHeader to add a header above the item content.

v0-1.5-sm

Everyday tasks and UI generation.

v0-1.5-lg

Advanced thinking or reasoning.

v0-2.0-mini

Open Source model for everyone.

"use client"

import Image from "next/image"
import {
  Item,

Expand code

Link

Use the render prop to render the item as a link. The hover and focus states will be applied to the anchor element.

"use client"

import {
  Item,
  ItemActions,

Dropdown

"use client"

import {
  Avatar,
  AvatarFallback,