104Get started
HextaUI

Item: Sizes

size scales padding, gap, corner radius and media together. A group tightens its gap to match.

Size default

Padding, gap and media scale together.

Size sm

Padding, gap and media scale together.

Size xs

Padding, gap and media scale together.

import { IconMusic } from "@tabler/icons-react"

import {
  Item,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item"

const sizes = ["default", "sm", "xs"] as const

export function ItemSizes() {
  return (
    <ItemGroup className="max-w-sm">
      {sizes.map((size) => (
        <Item key={size} size={size} variant="outline">
          <ItemMedia variant="icon">
            <IconMusic />
          </ItemMedia>
          <ItemContent>
            <ItemTitle>Size {size}</ItemTitle>
            <ItemDescription>
              Padding, gap and media scale together.
            </ItemDescription>
          </ItemContent>
        </Item>
      ))}
    </ItemGroup>
  )
}

Add this example

This adds the example as components/examples/item/sizes.tsx, together with the Item component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/item-sizes.json

To add only the component, follow the Item installation.

Props in this example

The Item props this example sets, from the API reference.

Item

PropTypeDefault
variant
"default" | "outline" | "muted""default"
size
"default" | "sm" | "xs""default"

ItemMedia

PropTypeDefault
varianticon puts the icon on a tile and hides it from screen readers. image crops to a square. Both have corners concentric with the item.
"default" | "icon" | "image""default"

Every prop is in the Item API reference.

More Item examples

See them all, with keyboard support and accessibility notes, on the Item page.

Related components