Profile and settings
Desktop27 components135 variants4 recreations
Desktop settings screens: shell, profile, team members, roles, API keys, notifications, theme, security and danger zone.
$9, or included with Pro
Auth and sign-in (Desktop)
Desktop packFlows
Desktop sign-in, sign-up, SSO, passkey, two-factor, magic link, password reset and invite screens with every state.
- components
- 13
- variants
- 47
- recreations
- 4
- themes
- 5
Also for mobile: Auth and sign-in
What’s inside
Twelve auth flows for web apps: centred card and split-screen sign in, SSO, magic link, passkey, authenticator two-factor, workspace sign-up, password reset, email verification, session timeout, account picker and accept invite. Forms show error summaries, field errors and loading states, and Google and Microsoft buttons use the official marks.
- Error, loading, expired and success states on every flow
- Official Google and Microsoft sign-in marks
- In-context 1200px pages for every flow
Sign-in form
Free sample6 variants
- Password
- Email first
- Default
- Errors
- Loading
Centred card
2 variants
- Tinted
- Plain
Split-screen sign in
3 variants
- Headline panel
- Quote panel
- Tablet
SSO and SAML
4 variants
- Work email
- Redirecting
- Not set up
- Error
Magic link
3 variants
- Request
- Sent
- Expired
Passkey
4 variants
- Prompt
- Waiting
- Failed
- Create
Authenticator two-factor
5 variants
- Code
- Invalid
- Recovery code
- Set up
- Save codes
Workspace sign-up
3 variants
- Account
- Workspace
- Invite team
Password reset
4 variants
- Request
- Sent
- New password
- Done
Verify email
4 variants
- Code
- Invalid
- Verified
- Link expired
Session timeout
3 variants
- Warning
- Signed out
- Confirm it's you
Account picker
3 variants
- Choose
- Manage
- All signed out
Accept invite
3 variants
- Invite
- Other account
- Expired
- Figma file
- SuperDuper Pack: Auth and sign-in (Desktop)
- Themes
- Light, Dark, Light high contrast, Dark high contrast and Wireframe
- Densities
- Comfortable and Compact
- Also in the file
- Usage and accessibility notes, motion specs, Figma variables
- Covers 4 screen patterns
- Sign-up, Log-in, Verification code and Forgot password
How Linear, Vercel and Stripe Dashboard and others do it
Recreations of real products, so you can compare approaches side by side. They are approximate, built from public product knowledge, with placeholder data and no third-party artwork.
Issue tracker log-in
Recreated from Linear
Deploy platform log-in
Recreated from Vercel
Payments dashboard sign-in
Recreated from Stripe Dashboard
Workspace docs log-in
Recreated from Notion
Not affiliated with, endorsed or sponsored by Linear, Vercel, Stripe Dashboard and Notion. Their names are trade marks of their owners and are used only to say what each recreation is based on.
See the sign-in form full size, free
Password and email-first sign in, with an error summary, field errors and a loading state. All 6 variants, free to see with a SuperDuperUI account. The Figma file comes with the pack.
More flows packs
Checkout and payments
Desktop12 components48 variants4 recreations
Desktop checkout pages, card and address forms, order summaries, invoices and payment results, ready to compose.
$9, or included with Pro
Paywalls and pricing
Desktop11 components39 variants4 recreations
Desktop pricing pages, upgrade modals, billing, trials and cancel flows, with a guide to honest pricing.
$9, or included with Pro
Questions about the auth and sign-in pack
One Figma file: SuperDuper Pack: Auth and sign-in (Desktop). It has 13 components with 47 variants, 4 recreations, and notes on when to use each part. Everything uses Figma variables, so you can change the colours and type to match your product.