fetaUI
GitHub

Card Pattern

Ready made cards for common flows: sign in, order summary, onboarding, stepper and two-factor.

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/card-pattern
Playground

By continuing, you agree to the Terms and Privacy Policy.

Sign in

By continuing, you agree to the Terms and Privacy Policy.

Order summary

Order summary

Field notes, yearly

Unlimited notebooks and sync

$96.00
Subtotal
$96.00
Two months free
−$24.00
Sales tax (8.5%)
$6.12
Total$78.12

Encrypted payment

Onboarding

Create your first workspace

Each project gets one home. Start with Q4 planning and invite the team later.

Stepper
  1. 1Project details
  2. 2Assign owner

Project details

A little context helps the team find it later.

Step 1 of 2
Two-factor

Two-factor authentication

Step 1 of 3

Scan the QR code

Open your authenticator app and scan this code to link your account.

PasskeepLockwell

Can’t scan it? Enter this key

ABCD EFGH IJKL MNOP
Pattern
Icons animation
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/card-pattern

Accessibility

  • Native forms, with Field tying each label to its input.
  • Stepper steps are an ordered list with aria-current on the active step.
  • Onboarding progress is named Step 1 of 3.
  • Replace the default QR art in Two-factor with a real code through qr. The key stays readable as text.

Motion

  • Onboarding and Stepper slide the body in from 16 px over 240 ms.
  • Order summary rolls the total, tax and discount when a promo applies.
  • The progress pill eases its width to the current step.
  • With reduced motion, steps and digits swap in place.

Responsive behavior

  • 420 px on Web and 358 px on Mobile.
  • Two-factor stacks the QR above its text on Mobile.
  • Inputs and Buttons grow to touch size on Mobile.

Performance

  • Each pattern is its own export, so an app imports only the cards it uses.
  • Step changes move with x and opacity, and only the steps on screen are mounted.
  • The stand-in QR is built once per secret with useMemo, and the Order summary total only swaps the digits that change.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import SignInCard, OrderSummaryCard, OnboardingCard, StepperCard or TwoFactorCard from @/components/fetaui/card-pattern.
  • Every pattern is built on Card with Button, Input and Field. Wire onProvider, onMagicLink, onPay, onDone and onContinue yourself.
  • The demo does not sign in, charge or verify anything. Without onApplyPromo only defaultPromo applies, so pass onApplyPromo and check codes on the server.
  • TwoFactorCard draws a stand-in QR. Pass qr with a real code and secret with the real setup key.
/docs/components/card-pattern/markdown
PreviousCard
NextConsent Card

Related

CardComponentThe container most of fetaUI is built on: an inset card on a soft tray, with actions on the tray.Input OTPComponentSeparate slots that behave like one input. Typing moves forward, paste fills every slot.FieldComponentLabel, control and help text as one unit, so they read, validate and announce together.CheckoutComponentExpress pay, billing period, plan options, seats, add-ons, billing and card fields, and a live order summary.ButtonComponentOne family for every action, with a label, optional icons and a shortcut key.