Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Item

Flexible rows for people, settings, integrations, navigation and activity lists, composed from media, text, actions and optional header and footer rows.

CoreData Display@gaudi/design-system/core/ItemView in StorybookSource

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import { Item } from '@gaudi/design-system/core/Item';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/item-activity-feed.json.

Usage

import { Button, Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemTitle } from '@gaudi/design-system';import { RegistryIcon } from '@gaudi/design-system/icons';
<ItemGroup>  <Item variant='outline'>    <ItemMedia variant='icon'><RegistryIcon lucide='GithubIcon' aria-hidden='true' /></ItemMedia>    <ItemContent>      <ItemTitle>GitHub</ItemTitle>      <ItemDescription>Sync pull requests and issues.</ItemDescription>    </ItemContent>    <ItemActions><Button href='/settings/integrations/github' size='sm' variant='outline'>Connect</Button></ItemActions>  </Item></ItemGroup>

Examples

Activity feed

Storybook

Changed files summary

Storybook
Storybook
Storybook

Run status with a live step

Storybook
Storybook
Storybook

Run log grouped by phase

Storybook

Settings and integrations

Storybook

Team members and roles

Storybook

Variants and sizes

Storybook

API

10 props

Accessibility

Use asChild with a link when the whole row navigates and keep independent actions outside that link. Name icon-only actions after their row, and label a group when the surrounding heading does not describe it.

AvatarProfile images, resilient initials, presence, verification, account menus and collaborator groups. The existing Avatar API and curated patterns share the same image and fallback primitives.10 examplesCardCard frames reusable content with title, subtitle, and optional children.8 examplesPillPill renders compact category and status labels.4 examplesDropdownMenuAction menus with keyboard navigation, checkbox choices and destructive actions.8 examplesProgressDeterminate and indeterminate progress with a readable task label.4 examplesLoaderAn accessible loading indicator with arcs, dots, expanding rings, and an indeterminate bar. Loader replaces the former Spinner component and story.3 examples