Zaidan

Item

A versatile component that you can use to display any content. Use it to display a title, description, and actions. Group it with the ItemGroup component to create a list of items.

Installation

CLI

npx shadcn@latest add @zaidan/item

pnpx shadcn add @zaidan/item

yarn dlx shadcn@latest add @zaidan/item

bunx shadcn@latest add @zaidan/item

Manual

Copy and paste the following code into your project.

1
import { cva, type VariantProps } from "class-variance-authority";
2
import {
3
  type ComponentProps,
4
  type JSX,
5
  mergeProps,
6
  splitProps,
7
  type ValidComponent,
8
} from "solid-js";
9
import { Dynamic } from "solid-js/web";
10
import { cn } from "~/lib/utils";
11
import { Separator, type SeparatorProps } from "~/components/ui/separator";
12

13
type ItemGroupProps = ComponentProps<"div">;
14

15
const ItemGroup = (props: ItemGroupProps) => {
16
  const [local, others] = splitProps(props, ["class"]);
17
  return (
18
    // biome-ignore lint/a11y/useSemanticElements: Using div with role for flexibility as per shadcn design
19
    <div
20
      role="list"
21
      data-slot="item-group"
22
      class={cn("group/item-group z-item-group flex w-full flex-col", local.class)}
23
      {...others}
24
    />
25
  );
26
};
27

28
type ItemSeparatorProps = SeparatorProps;
29

30
const ItemSeparator = (props: ItemSeparatorProps) => {
31
  const [local, others] = splitProps(props, ["class"]);
32
  return (
33
    <Separator
34
      data-slot="item-separator"
35
      orientation="horizontal"
36
      class={cn("z-item-separator", local.class)}
37
      {...others}
38
    />
39
  );
40
};
41

42
const itemVariants = cva(
43
  "group/item z-item flex w-full flex-wrap items-center outline-none transition-colors duration-100 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors",
44
  {
45
    variants: {
46
      variant: {
47
        default: "z-item-variant-default",
48
        outline: "z-item-variant-outline",
49
        muted: "z-item-variant-muted",
50
      },
51
      size: {
52
        default: "z-item-size-default",
53
        sm: "z-item-size-sm",
54
        xs: "z-item-size-xs",
55
      },
56
    },
57
    defaultVariants: {
58
      variant: "default",
59
      size: "default",
60
    },
61
  },
62
);
63

64
type ItemProps<T extends ValidComponent = "div"> = {
65
  as?: T;
66
  class?: string | undefined;
67
  children?: JSX.Element;
68
} & VariantProps<typeof itemVariants> &
69
  Omit<ComponentProps<T>, "as" | "class" | "children">;
70

71
const Item = <T extends ValidComponent = "div">(rawProps: ItemProps<T>) => {
72
  const props = mergeProps(
73
    { as: "div" as T, variant: "default", size: "default" } as const,
74
    rawProps,
75
  );
76
  const [local, others] = splitProps(props as ItemProps, ["as", "class", "variant", "size"]);
77
  return (
78
    <Dynamic
79
      component={local.as}
80
      data-slot="item"
81
      data-variant={local.variant}
82
      data-size={local.size}
83
      class={cn(itemVariants({ variant: local.variant, size: local.size }), local.class)}
84
      {...others}
85
    />
86
  );
87
};
88

89
const itemMediaVariants = cva(
90
  "z-item-media flex shrink-0 items-center justify-center [&_svg]:pointer-events-none",
91
  {
92
    variants: {
93
      variant: {
94
        default: "z-item-media-variant-default",
95
        icon: "z-item-media-variant-icon",
96
        image: "z-item-media-variant-image",
97
      },
98
    },
99
    defaultVariants: {
100
      variant: "default",
101
    },
102
  },
103
);
104

105
type ItemMediaProps = ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>;
106

107
const ItemMedia = (rawProps: ItemMediaProps) => {
108
  const props = mergeProps({ variant: "default" } as const, rawProps);
109
  const [local, others] = splitProps(props, ["class", "variant"]);
110
  return (
111
    <div
112
      data-slot="item-media"
113
      data-variant={local.variant}
114
      class={cn(itemMediaVariants({ variant: local.variant }), local.class)}
115
      {...others}
116
    />
117
  );
118
};
119

120
type ItemContentProps = ComponentProps<"div">;
121

122
const ItemContent = (props: ItemContentProps) => {
123
  const [local, others] = splitProps(props, ["class"]);
124
  return (
125
    <div
126
      data-slot="item-content"
127
      class={cn(
128
        "z-item-content flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none",
129
        local.class,
130
      )}
131
      {...others}
132
    />
133
  );
134
};
135

136
type ItemTitleProps = ComponentProps<"div">;
137

138
const ItemTitle = (props: ItemTitleProps) => {
139
  const [local, others] = splitProps(props, ["class"]);
140
  return (
141
    <div
142
      data-slot="item-title"
143
      class={cn("z-item-title line-clamp-1 flex w-fit items-center", local.class)}
144
      {...others}
145
    />
146
  );
147
};
148

149
type ItemDescriptionProps = ComponentProps<"p">;
150

151
const ItemDescription = (props: ItemDescriptionProps) => {
152
  const [local, others] = splitProps(props, ["class"]);
153
  return (
154
    <p
155
      data-slot="item-description"
156
      class={cn(
157
        "z-item-description line-clamp-2 font-normal [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
158
        local.class,
159
      )}
160
      {...others}
161
    />
162
  );
163
};
164

165
type ItemActionsProps = ComponentProps<"div">;
166

167
const ItemActions = (props: ItemActionsProps) => {
168
  const [local, others] = splitProps(props, ["class"]);
169
  return (
170
    <div
171
      data-slot="item-actions"
172
      class={cn("z-item-actions flex items-center", local.class)}
173
      {...others}
174
    />
175
  );
176
};
177

178
type ItemHeaderProps = ComponentProps<"div">;
179

180
const ItemHeader = (props: ItemHeaderProps) => {
181
  const [local, others] = splitProps(props, ["class"]);
182
  return (
183
    <div
184
      data-slot="item-header"
185
      class={cn("z-item-header flex basis-full items-center justify-between", local.class)}
186
      {...others}
187
    />
188
  );
189
};
190

191
type ItemFooterProps = ComponentProps<"div">;
192

193
const ItemFooter = (props: ItemFooterProps) => {
194
  const [local, others] = splitProps(props, ["class"]);
195
  return (
196
    <div
197
      data-slot="item-footer"
198
      class={cn("z-item-footer flex basis-full items-center justify-between", local.class)}
199
      {...others}
200
    />
201
  );
202
};
203

204
export {
205
  Item,
206
  ItemMedia,
207
  ItemContent,
208
  ItemActions,
209
  ItemGroup,
210
  ItemSeparator,
211
  ItemTitle,
212
  ItemDescription,
213
  ItemHeader,
214
  ItemFooter,
215
  itemVariants,
216
  itemMediaVariants,
217
};

API Reference

Item

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

Prop	Type	Default
`variant`	`"default" \| "outline" \| "muted"`	`"default"`
`size`	`"default" \| "sm" \| "xs"`	`"default"`
`as`	`ValidComponent`	`"div"`
`class`	`string`

You can use the as prop to render a custom element, for example a link:

1
<Item as="a" href="/dashboard">
2
  <ItemMedia variant="icon">
3
    <Home />
4
  </ItemMedia>
5
  <ItemContent>
6
    <ItemTitle>Dashboard</ItemTitle>
7
    <ItemDescription>Overview of your account and activity.</ItemDescription>
8
  </ItemContent>
9
</Item>

ItemGroup

Container that groups related items together with consistent styling.

Prop	Type	Default
`class`	`string`

<ItemGroup>
  <Item />
  <ItemSeparator />
  <Item />
</ItemGroup>

ItemSeparator

Separator that divides items in an item group.

Prop	Type	Default
`class`	`string`

ItemMedia

Display media content such as icons, images, or avatars.

Prop	Type	Default
`variant`	`"default" \| "icon" \| "image"`	`"default"`
`class`	`string`

<ItemMedia variant="icon">
  <Icon />
</ItemMedia>

<ItemMedia variant="image">
  <img src="..." alt="..." />
</ItemMedia>

ItemContent

Wraps the title and description of the item.

Prop	Type	Default
`class`	`string`

ItemTitle

Display the title of the item.

Prop	Type	Default
`class`	`string`

ItemDescription

Display the description of the item.

Prop	Type	Default
`class`	`string`

ItemActions

Display action buttons or other interactive elements.

Prop	Type	Default
`class`	`string`

ItemHeader

Display a header in the item.

Prop	Type	Default
`class`	`string`

ItemFooter

Display a footer in the item.

Prop	Type	Default
`class`	`string`

Examples

Here are the source code of all the examples from the preview page:

Default

import { Inbox } from "lucide-solid";
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "~/components/ui/item";
import { Button } from "~/components/ui/button";

function DefaultVariantItems() {
  return (
    <Example title="Default">
      <Item>
        <ItemContent>
          <ItemTitle>Title Only</ItemTitle>
        </ItemContent>
      </Item>
      <Item>
        <ItemContent>
          <ItemTitle>Title + Button</ItemTitle>
        </ItemContent>
        <ItemActions>
          <Button variant="outline">Action</Button>
        </ItemActions>
      </Item>
      <Item>
        <ItemContent>
          <ItemTitle>Title + Description</ItemTitle>
          <ItemDescription>This is a description that provides additional context.</ItemDescription>
        </ItemContent>
      </Item>
      <Item>
        <ItemContent>
          <ItemTitle>Title + Description + Button</ItemTitle>
          <ItemDescription>
            This item includes a title, description, and action button.
          </ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button variant="outline">Action</Button>
        </ItemActions>
      </Item>
      <Item>
        <ItemMedia variant="icon">
          <Inbox />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Media + Title</ItemTitle>
        </ItemContent>
      </Item>
      <Item>
        <ItemMedia variant="icon">
          <Inbox />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Media + Title + Button</ItemTitle>
        </ItemContent>
        <ItemActions>
          <Button size="sm">Action</Button>
        </ItemActions>
      </Item>
      <Item>
        <ItemMedia variant="icon">
          <Inbox />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Media + Title + Description</ItemTitle>
          <ItemDescription>This item includes media, title, and description.</ItemDescription>
        </ItemContent>
      </Item>
      <Item>
        <ItemMedia variant="icon">
          <Inbox />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Media + Title + Description + Button</ItemTitle>
          <ItemDescription>
            Complete item with all components: media, title, description, and button.
          </ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button size="sm">Action</Button>
        </ItemActions>
      </Item>
      <Item>
        <ItemContent>
          <ItemTitle>Multiple Actions</ItemTitle>
          <ItemDescription>Item with multiple action buttons in the actions area.</ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button variant="outline" size="sm">
            Cancel
          </Button>
          <Button size="sm">Confirm</Button>
        </ItemActions>
      </Item>
    </Example>
  );
}

Outline

import { Inbox } from "lucide-solid";
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "~/components/ui/item";
import { Button } from "~/components/ui/button";

function OutlineVariantItems() {
  return (
    <Example title="Outline">
      <Item variant="outline">
        <ItemContent>
          <ItemTitle>Title Only</ItemTitle>
        </ItemContent>
      </Item>
      <Item variant="outline">
        <ItemContent>
          <ItemTitle>Title + Button</ItemTitle>
        </ItemContent>
        <ItemActions>
          <Button variant="outline">Action</Button>
        </ItemActions>
      </Item>
      <Item variant="outline">
        <ItemContent>
          <ItemTitle>Title + Description</ItemTitle>
          <ItemDescription>This is a description that provides additional context.</ItemDescription>
        </ItemContent>
      </Item>
      <Item variant="outline">
        <ItemContent>
          <ItemTitle>Title + Description + Button</ItemTitle>
          <ItemDescription>
            This item includes a title, description, and action button.
          </ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button variant="outline">Action</Button>
        </ItemActions>
      </Item>
      <Item variant="outline">
        <ItemMedia variant="icon">
          <Inbox />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Media + Title</ItemTitle>
        </ItemContent>
      </Item>
      <Item variant="outline">
        <ItemMedia variant="icon">
          <Inbox />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Media + Title + Button</ItemTitle>
        </ItemContent>
        <ItemActions>
          <Button size="sm">Action</Button>
        </ItemActions>
      </Item>
      <Item variant="outline">
        <ItemMedia variant="icon">
          <Inbox />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Media + Title + Description</ItemTitle>
          <ItemDescription>This item includes media, title, and description.</ItemDescription>
        </ItemContent>
      </Item>
      <Item variant="outline">
        <ItemMedia variant="icon">
          <Inbox />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Media + Title + Description + Button</ItemTitle>
          <ItemDescription>
            Complete item with all components: media, title, description, and button.
          </ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button size="sm">Action</Button>
        </ItemActions>
      </Item>
      <Item variant="outline">
        <ItemContent>
          <ItemTitle>Multiple Actions</ItemTitle>
          <ItemDescription>Item with multiple action buttons in the actions area.</ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button variant="outline" size="sm">
            Cancel
          </Button>
          <Button size="sm">Confirm</Button>
        </ItemActions>
      </Item>
    </Example>
  );
}

Muted

import { Inbox } from "lucide-solid";
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "~/components/ui/item";
import { Button } from "~/components/ui/button";

function MutedVariantItems() {
  return (
    <Example title="Muted">
      <Item variant="muted">
        <ItemContent>
          <ItemTitle>Title Only</ItemTitle>
        </ItemContent>
      </Item>
      <Item variant="muted">
        <ItemContent>
          <ItemTitle>Title + Button</ItemTitle>
        </ItemContent>
        <ItemActions>
          <Button variant="outline">Action</Button>
        </ItemActions>
      </Item>
      <Item variant="muted">
        <ItemContent>
          <ItemTitle>Title + Description</ItemTitle>
          <ItemDescription>This is a description that provides additional context.</ItemDescription>
        </ItemContent>
      </Item>
      <Item variant="muted">
        <ItemContent>
          <ItemTitle>Title + Description + Button</ItemTitle>
          <ItemDescription>
            This item includes a title, description, and action button.
          </ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button variant="outline">Action</Button>
        </ItemActions>
      </Item>
      <Item variant="muted">
        <ItemMedia variant="icon">
          <Inbox />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Media + Title</ItemTitle>
        </ItemContent>
      </Item>
      <Item variant="muted">
        <ItemMedia variant="icon">
          <Inbox />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Media + Title + Button</ItemTitle>
        </ItemContent>
        <ItemActions>
          <Button size="sm">Action</Button>
        </ItemActions>
      </Item>
      <Item variant="muted">
        <ItemMedia variant="icon">
          <Inbox />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Media + Title + Description</ItemTitle>
          <ItemDescription>This item includes media, title, and description.</ItemDescription>
        </ItemContent>
      </Item>
      <Item variant="muted">
        <ItemMedia variant="icon">
          <Inbox />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Media + Title + Description + Button</ItemTitle>
          <ItemDescription>
            Complete item with all components: media, title, description, and button.
          </ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button size="sm">Action</Button>
        </ItemActions>
      </Item>
      <Item variant="muted">
        <ItemContent>
          <ItemTitle>Multiple Actions</ItemTitle>
          <ItemDescription>Item with multiple action buttons in the actions area.</ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button variant="outline" size="sm">
            Cancel
          </Button>
          <Button size="sm">Confirm</Button>
        </ItemActions>
      </Item>
    </Example>
  );
}

Small

import { Inbox } from "lucide-solid";
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "~/components/ui/item";
import { Button } from "~/components/ui/button";

function DefaultVariantItemsSmall() {
  return (
    <Example title="Small">
      <Item size="sm">
        <ItemContent>
          <ItemTitle>Title Only</ItemTitle>
        </ItemContent>
      </Item>
      <Item size="sm">
        <ItemContent>
          <ItemTitle>Title + Button</ItemTitle>
        </ItemContent>
        <ItemActions>
          <Button variant="outline" size="sm">
            Action
          </Button>
        </ItemActions>
      </Item>
      <Item size="sm">
        <ItemContent>
          <ItemTitle>Title + Description</ItemTitle>
          <ItemDescription>This is a description that provides additional context.</ItemDescription>
        </ItemContent>
      </Item>
      <Item size="sm">
        <ItemContent>
          <ItemTitle>Title + Description + Button</ItemTitle>
          <ItemDescription>
            This item includes a title, description, and action button.
          </ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button variant="outline" size="sm">
            Action
          </Button>
        </ItemActions>
      </Item>
      <Item size="sm">
        <ItemMedia variant="icon">
          <Inbox />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Media + Title</ItemTitle>
        </ItemContent>
      </Item>
      <Item size="sm">
        <ItemMedia variant="icon">
          <Inbox />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Media + Title + Button</ItemTitle>
        </ItemContent>
        <ItemActions>
          <Button size="sm">Action</Button>
        </ItemActions>
      </Item>
      <Item size="sm">
        <ItemMedia variant="icon">
          <Inbox />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Media + Title + Description</ItemTitle>
          <ItemDescription>This item includes media, title, and description.</ItemDescription>
        </ItemContent>
      </Item>
      <Item size="sm">
        <ItemMedia variant="icon">
          <Inbox />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Media + Title + Description + Button</ItemTitle>
          <ItemDescription>
            Complete item with all components: media, title, description, and button.
          </ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button size="sm">Action</Button>
        </ItemActions>
      </Item>
      <Item size="sm">
        <ItemContent>
          <ItemTitle>Multiple Actions</ItemTitle>
          <ItemDescription>Item with multiple action buttons in the actions area.</ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button variant="outline" size="sm">
            Cancel
          </Button>
          <Button size="sm">Confirm</Button>
        </ItemActions>
      </Item>
    </Example>
  );
}

As Link

import { Inbox } from "lucide-solid";
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemMedia,
  ItemTitle,
} from "~/components/ui/item";
import { Button } from "~/components/ui/button";

function DefaultLinkItems() {
  return (
    <Example title="As Link">
      <ItemGroup>
        <Item as="a" href="#">
          <ItemContent>
            <ItemTitle>Title Only (Link)</ItemTitle>
          </ItemContent>
        </Item>
        <Item as="a" href="#">
          <ItemContent>
            <ItemTitle>Title + Description (Link)</ItemTitle>
            <ItemDescription>Clickable item with title and description.</ItemDescription>
          </ItemContent>
        </Item>
        <Item as="a" href="#">
          <ItemMedia variant="icon">
            <Inbox />
          </ItemMedia>
          <ItemContent>
            <ItemTitle>Media + Title (Link)</ItemTitle>
          </ItemContent>
        </Item>
        <Item as="a" href="#">
          <ItemMedia variant="icon">
            <Inbox />
          </ItemMedia>
          <ItemContent>
            <ItemTitle>Media + Title + Description (Link)</ItemTitle>
            <ItemDescription>
              Complete link item with media, title, and description.
            </ItemDescription>
          </ItemContent>
        </Item>
        <Item as="a" href="#">
          <ItemContent>
            <ItemTitle>With Actions (Link)</ItemTitle>
            <ItemDescription>Link item that also has action buttons.</ItemDescription>
          </ItemContent>
          <ItemActions>
            <Button variant="outline" size="sm">
              Share
            </Button>
          </ItemActions>
        </Item>
      </ItemGroup>
    </Example>
  );
}

ItemGroup

import {
  Item,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemTitle,
} from "~/components/ui/item";

function DefaultItemGroup() {
  return (
    <Example title="ItemGroup">
      <ItemGroup>
        <Item>
          <ItemContent>
            <ItemTitle>Item 1</ItemTitle>
            <ItemDescription>First item in the group.</ItemDescription>
          </ItemContent>
        </Item>
        <Item>
          <ItemContent>
            <ItemTitle>Item 2</ItemTitle>
            <ItemDescription>Second item in the group.</ItemDescription>
          </ItemContent>
        </Item>
        <Item>
          <ItemContent>
            <ItemTitle>Item 3</ItemTitle>
            <ItemDescription>Third item in the group.</ItemDescription>
          </ItemContent>
        </Item>
      </ItemGroup>
    </Example>
  );
}

ItemSeparator

import { Inbox } from "lucide-solid";
import {
  Item,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemMedia,
  ItemSeparator,
  ItemTitle,
} from "~/components/ui/item";

function ItemSeparatorExample() {
  return (
    <Example title="ItemSeparator">
      <ItemGroup>
        <Item variant="outline">
          <ItemMedia variant="icon">
            <Inbox />
          </ItemMedia>
          <ItemContent>
            <ItemTitle>Inbox</ItemTitle>
            <ItemDescription>View all incoming messages.</ItemDescription>
          </ItemContent>
        </Item>
        <ItemSeparator />
        <Item variant="outline">
          <ItemMedia variant="icon">
            <Inbox />
          </ItemMedia>
          <ItemContent>
            <ItemTitle>Sent</ItemTitle>
            <ItemDescription>View all sent messages.</ItemDescription>
          </ItemContent>
        </Item>
        <ItemSeparator />
        <Item variant="outline">
          <ItemMedia variant="icon">
            <Inbox />
          </ItemMedia>
          <ItemContent>
            <ItemTitle>Drafts</ItemTitle>
            <ItemDescription>View all draft messages.</ItemDescription>
          </ItemContent>
        </Item>
        <ItemSeparator />
        <Item variant="outline">
          <ItemMedia variant="icon">
            <Inbox />
          </ItemMedia>
          <ItemContent>
            <ItemTitle>Archive</ItemTitle>
            <ItemDescription>View archived messages.</ItemDescription>
          </ItemContent>
        </Item>
      </ItemGroup>
    </Example>
  );
}

ItemHeader

import {
  Item,
  ItemContent,
  ItemDescription,
  ItemHeader,
  ItemTitle,
} from "~/components/ui/item";

function ItemHeaderExamples() {
  return (
    <Example title="ItemHeader">
      <Item>
        <ItemHeader>
          <span class="font-medium text-sm">Design System</span>
        </ItemHeader>
        <ItemContent>
          <ItemTitle>Component Library</ItemTitle>
          <ItemDescription>
            A comprehensive collection of reusable UI components for building consistent interfaces.
          </ItemDescription>
        </ItemContent>
      </Item>
      <Item variant="outline">
        <ItemHeader>
          <span class="font-medium text-sm">Marketing</span>
        </ItemHeader>
        <ItemContent>
          <ItemTitle>Campaign Analytics</ItemTitle>
          <ItemDescription>
            Track performance metrics and engagement rates across all marketing channels.
          </ItemDescription>
        </ItemContent>
      </Item>
      <Item variant="muted">
        <ItemHeader>
          <span class="font-medium text-sm">Engineering</span>
        </ItemHeader>
        <ItemContent>
          <ItemTitle>API Documentation</ItemTitle>
          <ItemDescription>
            Complete reference guide for all available endpoints and authentication methods.
          </ItemDescription>
        </ItemContent>
      </Item>
    </Example>
  );
}

ItemFooter

import {
  Item,
  ItemContent,
  ItemDescription,
  ItemFooter,
  ItemTitle,
} from "~/components/ui/item";

function ItemFooterExamples() {
  return (
    <Example title="ItemFooter">
      <Item>
        <ItemContent>
          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>
          <ItemDescription>
            Financial overview including revenue, expenses, and growth metrics for the fourth
            quarter.
          </ItemDescription>
        </ItemContent>
        <ItemFooter>
          <span class="text-muted-foreground text-sm">Last updated 2 hours ago</span>
        </ItemFooter>
      </Item>
      <Item variant="outline">
        <ItemContent>
          <ItemTitle>User Research Findings</ItemTitle>
          <ItemDescription>
            Insights from interviews and surveys conducted with 50+ users across different
            demographics.
          </ItemDescription>
        </ItemContent>
        <ItemFooter>
          <span class="text-muted-foreground text-sm">Created by Sarah Chen</span>
        </ItemFooter>
      </Item>
      <Item variant="muted">
        <ItemContent>
          <ItemTitle>Product Roadmap</ItemTitle>
          <ItemDescription>
            Planned features and improvements scheduled for the next three months.
          </ItemDescription>
        </ItemContent>
        <ItemFooter>
          <span class="text-muted-foreground text-sm">12 comments</span>
        </ItemFooter>
      </Item>
    </Example>
  );
}

ItemHeader + ItemFooter

import {
  Item,
  ItemContent,
  ItemDescription,
  ItemFooter,
  ItemHeader,
  ItemTitle,
} from "~/components/ui/item";

function ItemHeaderAndFooterExamples() {
  return (
    <Example title="ItemHeader + ItemFooter">
      <Item>
        <ItemHeader>
          <span class="font-medium text-sm">Team Project</span>
        </ItemHeader>
        <ItemContent>
          <ItemTitle>Website Redesign</ItemTitle>
          <ItemDescription>
            Complete overhaul of the company website with modern design principles and improved user
            experience.
          </ItemDescription>
        </ItemContent>
        <ItemFooter>
          <span class="text-muted-foreground text-sm">Updated 5 minutes ago</span>
        </ItemFooter>
      </Item>
      <Item variant="outline">
        <ItemHeader>
          <span class="font-medium text-sm">Client Work</span>
        </ItemHeader>
        <ItemContent>
          <ItemTitle>Mobile App Development</ItemTitle>
          <ItemDescription>
            Building a cross-platform mobile application for iOS and Android with React Native.
          </ItemDescription>
        </ItemContent>
        <ItemFooter>
          <span class="text-muted-foreground text-sm">Status: In Progress</span>
        </ItemFooter>
      </Item>
      <Item variant="muted">
        <ItemHeader>
          <span class="font-medium text-sm">Documentation</span>
        </ItemHeader>
        <ItemContent>
          <ItemTitle>API Integration Guide</ItemTitle>
          <ItemDescription>
            Step-by-step instructions for integrating third-party APIs with authentication and error
            handling.
          </ItemDescription>
        </ItemContent>
        <ItemFooter>
          <span class="text-muted-foreground text-sm">Category: Technical - 3 attachments</span>
        </ItemFooter>
      </Item>
    </Example>
  );
}

ItemMedia with Image

import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "~/components/ui/item";
import { Button } from "~/components/ui/button";

function DefaultVariantItemsWithImage() {
  return (
    <Example title="Default - ItemMedia image">
      <Item>
        <ItemMedia variant="image">
          <img
            src="https://avatar.vercel.sh/Project"
            alt="Project"
            width={40}
            height={40}
            class="object-cover grayscale"
          />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Project Dashboard</ItemTitle>
          <ItemDescription>Overview of project settings and configuration.</ItemDescription>
        </ItemContent>
      </Item>
      <Item>
        <ItemMedia variant="image">
          <img
            src="https://avatar.vercel.sh/Document"
            alt="Document"
            width={40}
            height={40}
            class="object-cover grayscale"
          />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Document</ItemTitle>
          <ItemDescription>A document with metadata displayed.</ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button variant="outline" size="sm">
            View
          </Button>
        </ItemActions>
      </Item>
      <Item>
        <ItemMedia variant="image">
          <img
            src="https://avatar.vercel.sh/File"
            alt="File"
            width={40}
            height={40}
            class="object-cover grayscale"
          />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>File Attachment</ItemTitle>
          <ItemDescription>
            Complete file with image, title, description, and action button.
          </ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button size="sm">Download</Button>
        </ItemActions>
      </Item>
    </Example>
  );
}

Preview Docs

Build your own Zaidan

When you're done, click Setup Project to setup your new project.