item

Item

Groups the media, text and actions of one entry, such as a list row or a link to a page.

States: Default, Hover, Focus

Parts

Part	File	Does
Item	Item.vue	Groups the media, text and actions of one entry, such as a list row.
ItemActions	ItemActions.vue	Holds the actions of its item, such as buttons or links.
ItemContent	ItemContent.vue	Groups the title and description of its item.
ItemDescription	ItemDescription.vue	Gives more detail about its item below the title.
ItemFooter	ItemFooter.vue	Holds extra content below the main row of its item.
ItemGroup	ItemGroup.vue	Groups several items into one list.
ItemHeader	ItemHeader.vue	Holds extra content above the main row of its item.
ItemMedia	ItemMedia.vue	Shows an icon, image or avatar at the start of its item.
ItemSeparator	ItemSeparator.vue	Separates the items of a group.
ItemTitle	ItemTitle.vue	Names its item.

Anatomy

<Item>
  <ItemMedia />
  <ItemContent>
    <ItemTitle />
    <ItemDescription />
  </ItemContent>
  <ItemActions />
</Item>

Styling

Part	Recipe
Item	item
Item	item-link
ItemActions	item-actions
ItemContent	item-content
ItemDescription	item-description
ItemFooter	item-footer
ItemGroup	item-group
ItemHeader	item-header
ItemMedia	item-media
ItemSeparator	item-separator
ItemTitle	item-title

Install

Writes 11 files into components/ui/item/. For agents, npx @frontic/ui docs item prints this reference as markdown; the MCP server serves the same.

Installs with it: separator
npm packages: class-variance-authority; reka-ui

Built from

Separator

API reference

Item Item.vue

Groups the media, text and actions of one entry, such as a list row. Renders a <div>.

Prop	Type	Default
asChild	boolean	false

as	AsTag \| Component	'div'
Name as Description The element or component this component should render as. Can be overwritten by `asChild`. Type ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions> \| (props: any, ctx: Omit<{ attrs: Attrs; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed \| undefined) => void; }, 'expose'>): any \| ComponentPublicInstanceConstructor<any, any, any, any, ComputedOptions, MethodOptions> \| 'a' \| 'button' \| 'div' \| 'form' \| 'h2' \| 'h3' \| 'img' \| 'input' \| 'label' \| 'li' \| 'nav' \| 'ol' \| 'p' \| 'span' \| 'svg' \| 'ul' \| 'template' \| {} & string Default 'div'
class	ClassValue	—

variant	'default' \| 'outline' \| 'muted'	'default'

size	'md' \| 'xs' \| 'sm'	'md'

Data attribute	Values
data-size	'md' \| 'xs' \| 'sm'

data-variant	'default' \| 'outline' \| 'muted'

Recipe item	Sets
base: item	10 properties

variant: defaultdefault	1 property

variant: outline	1 property

variant: muted	2 properties

size: mddefault	3 properties

size: sm	3 properties

size: xs	3 properties

Recipe item-link	Sets
base: item-link	1 property

Parts

Anatomy

Styling

Install

Built from

API reference

Item Item.vue

ItemActions ItemActions.vue

ItemContent ItemContent.vue

ItemDescription ItemDescription.vue

ItemFooter ItemFooter.vue

ItemGroup ItemGroup.vue

ItemHeader ItemHeader.vue

ItemMedia ItemMedia.vue

ItemSeparator ItemSeparator.vue

ItemTitle ItemTitle.vue