SatoriUI

Sign in

A split sign-in page: email, password and Google on one side, a customer quote on the emphasised surface on the other.

Duebird

Welcome back

Sign in to pick up where you left off.

or
Forgot it?

New to Duebird? Create an account

By signing in you agree to the terms and privacy policy.

Installation

  1. 1. Install a design system if the project does not have one yet: Cueit, Skita or Folio.

  2. 2. Add the block. It installs to components/satori-ui/blocks/ with the shadcn/ui primitives it uses.

    npx shadcn@latest add @satoriui/auth-01

  3. 3. Render it inside the system's scope. With the scope class on <html> there is nothing more to do. To try another system, change the class.

    app/page.tsx
    import { Auth01 } from "@/components/satori-ui/blocks/auth-01";
    export default function Page() {
      return <Auth01 />;
    }

How it adapts

It is built from shadcn/ui primitives, Button, Input, Label and Separator, which every design system re-skins.

For what shadcn has no name for, it uses 11 of the shared contract utilities. Every system defines them identically and sets the variables they read.

ds-shell
The app frame
ds-mark
The logo square
ds-title
The title
ds-subtitle
The subtitle
ds-stat
KPI numbers
ds-label
Data labels
ds-meta
Small values
ds-text
Body copy
ds-small
Secondary copy
ds-tile-emphasis
The one emphasised surface
ds-link
Links

The same ds-stat is a 32px bold system-font number in Cueit (SF Pro on Apple devices) and a smaller, medium-weight Instrument Sans one in Skita.

Next blockPricing