Skip to content

Components · 9

Feedback & overlays

Status, alerts, dialogs and loading. Things enter with ease-out and leave faster with ease-in, so the interface never waits on an exit.

Alert

Inline messages in four semantic tones. Dismissed alerts collapse and the rest slide up.

Maintenance window

Payments are paused on Sunday from 2:00 to 3:00.

Rent received

₹24,000 from John Doe for Unit 4B.

Lease ending soon

Unit 7C ends on 30 Nov. Send a renewal offer.
  • Dismiss: fade + height 300ms ease-in-out
import { Alert, AlertStack } from "@/components/ui/alert";

Toast

Brief confirmations in the corner. They stack with the newest in front; hover the stack to open it into a list and pause the timers. They can offer Undo.

  • In: rise 24px 300ms ease-out
  • Older toasts step back 14px, 95%
  • Hover: stack opens 300ms
  • Out: slide right 150ms
import { useToast } from "@/components/ui/toast";

Dialog

Asks for a decision before continuing. Focus stays inside; Escape or the backdrop closes it.

  • Backdrop fade 200ms
  • Panel scale 0.96→1 200ms ease-out
  • Close 150ms ease-in
import { Dialog } from "@/components/ui/dialog";

Drawer

Side panel for details or editing without leaving the page.

  • In: slide 450ms ease-out
  • Out: 300ms ease-in
  • Content stagger 40ms
import { Drawer, DrawerSection } from "@/components/ui/dialog";

Bottom sheet

Mobile panel that slides up. Drag the handle down to dismiss.

Units

  • Rise: sheet spring
  • Follows your finger
  • Closes past 80px or on a flick
import { BottomSheet } from "@/components/ui/bottom-sheet";

Progress bar

Determinate progress for known work, indeterminate for unknown, and steps for onboarding.

Uploading lease-4B.pdf64%
Syncing bank transactionsWorking…
Generating statements12 of 24
Profile setup3 of 5 steps
  • Fill 700ms ease-out
  • Indeterminate 1.5s loop
  • Stripes 0.8s loop
import { ProgressBar, SegmentedProgress } from "@/components/ui/progress";

Spinner

Short waits where progress is unknown. Ring, dots or bars in three sizes.

ring
dots
bars
  • Ring 700ms linear
  • Dots 1.1s, 140ms offset
  • Bars 0.9s, 110ms offset
import { Spinner } from "@/components/ui/spinner";

Skeleton

Placeholder shapes while content loads, then the real content fades in.

  • Shimmer 1.4s linear loop (CSS)
  • Content fades in 300ms
import { Skeleton, SkeletonRow } from "@/components/ui/skeleton";

Status

Live and connection states, always with words as well as color.

Live

Bank feed connected(online)

Syncing 3 accounts(syncing)

SMS gateway offline(offline)

  • Ping 1s loop
  • Sync icon spin 1.2s
import { LiveBadge, PulseDot, StatusLine } from "@/components/ui/status";