Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Screens

Full-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.

Blocks@gaudi/design-system/blocks/ScreensSource

Profile, settings, wizard, onboarding and auth examples compose it with AuthForm, Wizard and Core parts.

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

Usage

import { Screen } from '@gaudi/design-system/blocks/Screens';
<Screen>{pageContent}</Screen>

API

8 props

Accessibility

The main column always renders first in reading order. Rotating quotes pause on hover, focus and reduced motion, and their dots are 24px targets that name each quote.

Notes

  • Screens frame flows the host owns; authentication, validation and saving stay in AuthForm, Wizard and the consuming app.
ProfileAccount and organisation pages for an application: profile details, organisation members and permissions, billing and usage, referrals, and connected mailboxes.5 examplesWizardA guided multi-step form with validation, progress and recoverable completion.6 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 examples