Item
A structured row with media and supporting content.
Upstream documentationExamples
Theme tokens
A shared palette for every component.
Installation
Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.
Install Item
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/item.json'Usage
A complete example using the installed component and hook paths.
Item usage
"use client";import { FileTextIcon } from "@/lib/icons";import { Item, ItemContent, ItemDescription, ItemMedia, ItemTitle } from "@/components/ui/item";const ItemPreview = function ItemPreview() { return ( <Item variant="outline"> <ItemMedia variant="icon"> <FileTextIcon /> </ItemMedia> <ItemContent> <ItemTitle>Theme tokens</ItemTitle> <ItemDescription>A shared palette for every component.</ItemDescription> </ItemContent> </Item> ); };export default function Demo() { return <ItemPreview />;}API Reference
Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.
Item
Item props
useRender.ComponentProps<"div"> & VariantProps<typeof itemVariants> & { sound?: boolean }- variant
- "default"
- size
- "default"
- sound
- true
ItemMedia
ItemMedia props
React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>- variant
- "default"
ItemContent
ItemContent props
React.ComponentProps<"div">ItemActions
ItemActions props
React.ComponentProps<"div">ItemGroup
ItemGroup props
React.ComponentProps<"div">ItemSeparator
ItemSeparator props
React.ComponentProps<typeof Separator>ItemTitle
ItemTitle props
React.ComponentProps<"div">ItemDescription
ItemDescription props
React.ComponentProps<"p">ItemHeader
ItemHeader props
React.ComponentProps<"div">ItemFooter
ItemFooter props
React.ComponentProps<"div">