Item

Generic list item component with active/disabled states and leading/trailing slots.

Usage

tsx

1import { Item } from '@storm-ds/ui'
2import { HomeIcon } from '@storm-ds/icons'
3
4<Item
5  leading={<HomeIcon className="w-5 h-5" />}
6  active
7>
8  Home
9</Item>

Basic

Simple item

Another item

Disabled item

tsx

1<Item>Item text</Item>
2<Item active>Active item</Item>
3<Item disabled>Disabled item</Item>

With Icons

document.pdf12 KB

Photos3 items

tsx

1<Item leading={<HomeIcon className="w-5 h-5" />}>
2  Home
3</Item>
4<Item leading={<SettingsIcon className="w-5 h-5" />} trailing={<ChevronRightIcon className="w-5 h-5" />}>
5  Settings
6</Item>

Active State

Dashboard

Profile

Settings

tsx

1<Item active leading={<HomeIcon className="w-5 h-5" />}>
2  Current Page
3</Item>

In Navigation

tsx

1<nav className="space-y-1">
2  <Item active leading={<HomeIcon className="w-5 h-5" />}>Home</Item>
3  <Item leading={<UserIcon className="w-5 h-5" />}>Profile</Item>
4  <Item leading={<LogOutIcon className="w-5 h-5" />}>Logout</Item>
5</nav>

Props

Prop	Type	Default	Description
active	boolean	false	Highlights item as selected
disabled	boolean	false	Disables interactions
leading	React.ReactNode	-	Icon or element before text
trailing	React.ReactNode	-	Icon or element after text
children	React.ReactNode	-	Item text content
className	string	-	Custom classes

Use with AI

Create a Next.js component using Storm UI's Item for generic list items. Import: `import { Item } from '@storm-ds/ui'`. Props: active (boolean for highlighting), disabled (boolean), leading (icon/element), trailing (icon/element), children (text), className. Perfect for navigation lists, sidebars, dropdowns. Leading for icons before text, trailing for chevrons or badges. Active state shows highlight. Disabled state shows reduced opacity. Server component compatible. Example: `<Item active>Current</Item>`, `<Item leading={<HomeIcon />}>Home</Item>`, `<Item leading={<SettingsIcon />} trailing={<ChevronIcon />}>Settings</Item>`

PageHeader

Direction