Item

Clickable item with title and description.

Complete link item with media, title, and description.

Link item that also has action buttons.

Outline - asChild

Clickable item with title and description.

Complete link item with media, title, and description.

Link item that also has action buttons.

Muted - asChild

Clickable item with title and description.

Complete link item with media, title, and description.

Link item that also has action buttons.

ItemGroup

Item 1

First item in the group.

Item 2

Second item in the group.

Item 3

Third item in the group.

Outline - ItemGroup

Item 1

First item with icon.

Item 2

Second item with icon.

Item 3

Third item with icon.

Muted - ItemGroup

Item 1

First item in muted group.

Item 2

Second item in muted group.

Item 3

Third item in muted group.

ItemSeparator

Inbox

View all incoming messages.

Sent

View all sent messages.

Drafts

View all draft messages.

ItemHeader

Design System

Component Library

A comprehensive collection of reusable UI components for building consistent interfaces.

Marketing

Campaign Analytics

Track performance metrics and engagement rates across all marketing channels.

Engineering

API Documentation

Complete reference guide for all available endpoints and authentication methods.

ItemFooter

Quarterly Report Q4 2024

Financial overview including revenue, expenses, and growth metrics for the fourth quarter.

Last updated 2 hours ago

User Research Findings

Insights from interviews and surveys conducted with 50+ users across different demographics.

Created by Sarah Chen

Product Roadmap

Planned features and improvements scheduled for the next three months.

12 comments

ItemHeader + ItemFooter

Team Project

Website Redesign

Complete overhaul of the company website with modern design principles and improved user experience.

Updated 5 minutes ago

Client Work

Mobile App Development

Building a cross-platform mobile application for iOS and Android with React Native.

Status: In Progress

Documentation

API Integration Guide

Step-by-step instructions for integrating third-party APIs with authentication and error handling.

Category: Technical • 3 attachments

Item with Drawer

Default - ItemMedia image

Project Dashboard

Overview of project settings and configuration.

Document

A document with metadata displayed.

File Attachment

Complete file with image, title, description, and action button.

Outline - ItemMedia image

Project Dashboard

Overview of project settings and configuration.

Document

A document with metadata displayed.

File Attachment

Complete file with image, title, description, and action button.

Outline - ItemMedia image - Small

Project Dashboard

Overview of project settings and configuration.

Document

A document with metadata displayed.

File Attachment

Complete file with image, title, description, and action button.

Outline - ItemMedia image - Extra Small

Project Dashboard

Document

File Attachment

Muted - ItemMedia image

Project Dashboard

Overview of project settings and configuration.

Document

A document with metadata displayed.

File Attachment

Complete file with image, title, description, and action button.

API reference#

Exports Item ItemMedia ItemContent ItemActions ItemGroup ItemSeparator ItemTitle ItemDescription ItemHeader ItemFooter. Every part takes its element's usual props and a className.

Prop	Options	Default
variant	`defaultoutlinemuted`	default
size	`defaultsmxs`	default

Prop	Options	Default
variant	`defaulticonimage`	default

Default

Title Only

Title + Button

Title + Description

This is a description that provides additional context.

Title + Description + Button

This item includes a title, description, and action button.

Media + Title

Media + Title + Button

Media + Title + Description

This item includes media, title, and description.

Media + Title + Description + Button

Complete item with all components: media, title, description, and button.

Multiple Actions

Item with multiple action buttons in the actions area.

Outline

Title Only

Title + Button

Title + Description

This is a description that provides additional context.

Title + Description + Button

This item includes a title, description, and action button.

Media + Title

Media + Title + Button

Media + Title + Description

This item includes media, title, and description.

Media + Title + Description + Button

Complete item with all components: media, title, description, and button.

Multiple Actions

Item with multiple action buttons in the actions area.

Muted

Title Only

Title + Button

Title + Description

This is a description that provides additional context.

Title + Description + Button

This item includes a title, description, and action button.

Media + Title

Media + Title + Button

Media + Title + Description

This item includes media, title, and description.

Media + Title + Description + Button

Complete item with all components: media, title, description, and button.

Multiple Actions

Item with multiple action buttons in the actions area.

Small

Title Only

Title + Button

Title + Description

This is a description that provides additional context.

Title + Description + Button

This item includes a title, description, and action button.

Media + Title

Media + Title + Button

Media + Title + Description

This item includes media, title, and description.

Media + Title + Description + Button

Complete item with all components: media, title, description, and button.

Multiple Actions

Item with multiple action buttons in the actions area.

Outline - Small

Title Only

Title + Button

Title + Description

This is a description that provides additional context.

Title + Description + Button

This item includes a title, description, and action button.

Media + Title

Media + Title + Button

Media + Title + Description

This item includes media, title, and description.

Media + Title + Description + Button

Complete item with all components: media, title, description, and button.

Multiple Actions

Item with multiple action buttons in the actions area.

Muted - Small

Title Only

Title + Button

Title + Description

This is a description that provides additional context.

Title + Description + Button

This item includes a title, description, and action button.

Media + Title

Media + Title + Button

Media + Title + Description

This item includes media, title, and description.

Media + Title + Description + Button

Complete item with all components: media, title, description, and button.

Multiple Actions

Item with multiple action buttons in the actions area.

Extra Small

Title Only

Title + Button

Title + Description

Title + Description + Button

Media + Title

Media + Title + Button

Media + Title + Description

Media + Title + Description + Button

Multiple Actions

Outline - Extra Small

Title Only

Title + Button

Title + Description

Title + Description + Button

Media + Title

Media + Title + Button

Media + Title + Description

Media + Title + Description + Button

Multiple Actions

Muted - Extra Small

Title Only

Title + Button

Title + Description

Title + Description + Button

Media + Title

Media + Title + Button

Media + Title + Description

Media + Title + Description + Button

Multiple Actions

asChild

Clickable item with title and description.

Complete link item with media, title, and description.

Link item that also has action buttons.

Outline - asChild

Clickable item with title and description.

Complete link item with media, title, and description.

Link item that also has action buttons.

Muted - asChild

Clickable item with title and description.

Complete link item with media, title, and description.