Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Profile

Account and organisation pages for an application: profile details, organisation members and permissions, billing and usage, referrals, and connected mailboxes.

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 Profile 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-account-settings.json.

Usage

import { Screen } from '@gaudi/design-system/blocks/Screens';import Avatar from '@gaudi/design-system/core/Avatar';
<Screen>  <Avatar src={person.avatar} name={person.name} />  <h1>{person.name}</h1>  {profileContent}</Screen>

Examples

Account settings

Storybook

Billing

Storybook

Inbox and meeting capture

Storybook

Organisation tabs

Storybook

Referral rewards

Storybook

API

4 props

Accessibility

Each panel keeps one heading level, labels every control, and announces saved or failed changes next to the form.

SwitchSwitch renders a token-styled boolean preference control.4 examplesOnboardingFirst-run flows: workspace setup, a publication with a progress rail, a product tour in a dialog and connecting a coding agent.4 examplesSettingsSettings pages: preferences in collapsible sections, notification channels, integrations with connect toggles, and developer keys and webhooks.4 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.FieldField composes form label, description, error, and input building blocks.7 examplesTableSemantic article tables with contained horizontal scrolling.7 examples