Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Settings

Settings pages: preferences in collapsible sections, notification channels, integrations with connect toggles, and developer keys and webhooks.

Blocks@gaudi/design-system/blocks/ScreensView 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 Settings from '@gaudi/design-system/blocks/Screens';

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

Usage

import { Screen } from '@gaudi/design-system/blocks/Screens';import Button from '@gaudi/design-system/core/Button';
<Screen>  <h1>Account settings</h1>  <form onSubmit={saveSettings}>    {settingsFields}    <Button type='submit'>Save settings</Button>  </form></Screen>

Examples

Developer

Storybook

Integrations

Storybook

Notifications

Storybook

Preferences

Storybook

API

4 props

Accessibility

Pair every switch with a visible label and description, and confirm destructive actions such as revoking a key.

OnboardingFirst-run flows: workspace setup, a publication with a progress rail, a product tour in a dialog and connecting a coding agent.4 examplesProfileAccount and organisation pages for an application: profile details, organisation members and permissions, billing and usage, referrals, and connected mailboxes.5 examplesScreensFull-screen frames for sign-in, sign-up and onboarding: the main column beside an optional aside for imagery, quotes or logos, plus header and footer bands. Profile, settings, wizard, onboarding and auth examples compose it with AuthForm, Wizard and Core parts.TableSemantic article tables with contained horizontal scrolling.7 examplesFieldField composes form label, description, error, and input building blocks.7 examplesAccordionRich disclosure for FAQs, settings, member directories, nested help, and guided setup. Eleven patterns use Gaudi tokens, icons, avatars, cards, and pills.12 examples