Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Sheet

A panel that slides in from an edge over a dimmed page, for side tasks such as settings, details, comments, notifications or an assistant, without leaving the current screen.

CoreOverlays & Menus@gaudi/design-system/core/SheetView 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 { Sheet } from '@gaudi/design-system/core/Sheet';

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

Usage

import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription } from '@gaudi/design-system/core/Sheet';
<Sheet>  <SheetTrigger>Inspect details</SheetTrigger>  <SheetContent side='right'><SheetHeader><SheetTitle>Details</SheetTitle><SheetDescription>Review the selected record.</SheetDescription></SheetHeader>{details}</SheetContent></Sheet>

Examples

Assistant

Storybook

Comments

Storybook

Sheet from each edge

Storybook

Help and shortcuts

Storybook

New project

Storybook

Notifications

Storybook

Record details

Storybook

Settings

Storybook

API

8 props

Accessibility

The sheet is a modal dialog: focus moves in and is trapped, Escape and the backdrop close it, the page behind is inert, and focus returns to the trigger. Give every sheet a SheetTitle.

Notes

  • Use Dialog for short centred decisions and Sheet for longer side tasks.
DialogModal, confirmation and bare full-screen dialogs for editing, detail inspection, explicit decisions, lightboxes and launchers.12 examplesFieldField composes form label, description, error, and input building blocks.7 examplesSelectSelect renders a styled option picker with searchable combobox behavior and multi-select support.20 examplesAvatarProfile 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 examplesTimelineDisplay dated activity and milestones with readable descriptions and optional actions.6 examplesItemFlexible rows for people, settings, integrations, navigation and activity lists, composed from media, text, actions and optional header and footer rows.11 examples