Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Auth

Sign-in, sign-up, magic-link, passkey and single sign-on screens: AuthForm handles the fields, feedback and providers, and Screen frames it beside imagery, quotes or logos.

Blocks@gaudi/design-system/blocks/AuthFormView 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 Auth from '@gaudi/design-system/blocks/AuthForm';

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

Usage

import AuthForm from '@gaudi/design-system/blocks/AuthForm';
<AuthForm mode='password' onSubmit={signIn} />

Examples

Centred card

Storybook

Free trial sign-up

Storybook
Storybook

Choose a sign-in method

Storybook

Split with imagery

Storybook

Split with testimonials

Storybook

API

19 props

Accessibility

Native labels and autocomplete support password managers; the password keeps its label and hint when revealed. Pending submissions and provider redirects share one guard so requests never overlap; errors retain the user’s values.

InputText, search, numeric and date inputs with prefix and suffix slots.11 examplesOnboardingFirst-run flows: workspace setup, a publication with a progress rail, a product tour in a dialog and connecting a coding agent.4 examplesCardCard frames reusable content with title, subtitle, and optional children.8 examplesToggleGroupSingle or multiple pressed choices for view modes and compact formatting controls.6 examplesInputOtpOne-time code entry with grouped slots, paste support and completion feedback.1 exampleFieldField composes form label, description, error, and input building blocks.7 examples