Item

A versatile component for displaying content with media, title, description, and actions.

@react.component
let make = () =>
  <div className="flex w-full max-w-md flex-col gap-6">

The Item component is a straightforward flex container that can house nearly any type of content. Use it to display a title, description, and actions. Group it with the Item.Group component to create a list of items.

Installation

npmyarnpnpmbun
npx shadcn@latest add @rescript-shadcn/Item
Copy

Usage

Copy<Item variant=Outline>
  <Item.Content>
    <Item.Title> {"Title"->React.string} </Item.Title>
    <Item.Description> {"Description"->React.string} </Item.Description>
  </Item.Content>
  <Item.Actions>
    <Button> {"Action"->React.string} </Button>
  </Item.Actions>
</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.

Variant

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

@react.component
let make = () =>
  <div className="flex w-full max-w-md flex-col gap-6">

Size

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

@react.component
let make = () =>
  <div className="flex w-full max-w-md flex-col gap-6">

Examples

Icon

Use Item.Media with variant=Icon to display an icon.

@react.component
let make = () =>
  <div className="flex w-full max-w-lg flex-col gap-6">

Avatar

You can use Item.Media with variant=Avatar to display an avatar.

@react.component
let make = () =>
  <div className="flex w-full max-w-lg flex-col gap-6">

Image

Use Item.Media with variant=Image to display an image.

type song = {
  title: string,
  artist: string,

Group

Use Item.Group to group related items together.

type person = {
  username: string,
  avatar: string,

Header

Use Item.Header to add a header above the item content.

type model = {
  name: string,
  description: string,

Link

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

@react.component
let make = () =>
  <div className="flex w-full max-w-md flex-col gap-4">

Copy<Item render={<a href="/dashboard" />}>
  <Item.Media variant=Icon>
    <HomeIcon />
  </Item.Media>
  <Item.Content>
    <Item.Title>Dashboard</Item.Title>
    <Item.Description>Overview of your account and activity.</Item.Description>
  </Item.Content>
</Item>

Dropdown

@@directive("'use client'")

type person = {

API Reference

Item

The main component for displaying content with media, title, description, and actions.

Item.Group

A container that groups related items together with consistent styling.

Copy<Item.Group>
  <Item />
  <Item />
</Item.Group>

Item.Separator

A separator between items in a group.

Copy<Item.Group>
  <Item />
  <Item.Separator />
  <Item />
</Item.Group>

Item.Media

Use Item.Media to display media content such as icons, images, or avatars.

Copy<Item.Media variant=Icon>
  <Icon />
</Item.Media>

Copy<Item.Media variant=Image>
  <img src="..." alt="..." />
</Item.Media>

Item.Content

Wraps the title and description of the item.

Copy<Item.Content>
  <Item.Title> {"Title"->React.string} </Item.Title>
  <Item.Description> {"Description"->React.string} </Item.Description>
</Item.Content>

Item.Title

Displays the title of the item.

Copy<Item.Title> {"Item Title"->React.string} </Item.Title>

Item.Description

Displays the description of the item.

Copy<Item.Description> {"Item description"->React.string} </Item.Description>

Item.Actions

Container for action buttons or other interactive elements.

Copy<Item.Actions>
  <Button> {"Action"->React.string} </Button>
</Item.Actions>

Item.Header

Displays a header above the item content.

Copy<Item>
  <Item.Header> {"Header"->React.string} </Item.Header>
  <Item.Content>...</Item.Content>
</Item>

Item.Footer

Displays a footer below the item content.

Copy<Item>
  <Item.Content>...</Item.Content>
  <Item.Footer> {"Footer"->React.string} </Item.Footer>
</Item>