🎨

UI Knihovna

Kolekce nádherných, znovupoužitelných React komponent a CSS fragmentů vytvořená pomocí Tailwind CSS a Framer Motion.

Krokové průvodce

Průvodce postupem, kteří rozdělují procesy do logických kroků.

Horizontální průvodce

Steps

  1. 2
  2. 3
Stepper.tsxLanguage: tsx
export function HorizontalStepper() { return ( <div className="w-full"> <h2 className="sr-only">Steps</h2> <div className="relative after:absolute after:inset-x-0 after:top-1/2 after:block after:h-0.5 after:-translate-y-1/2 after:rounded-lg after:bg-border"> <ol className="relative z-10 flex justify-between text-sm font-medium text-muted"> <li className="flex items-center gap-2 bg-surface p-2"> <span className="flex h-6 w-6 items-center justify-center rounded-full bg-accent text-[10px] text-background font-bold shadow-sm"> <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}><path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" /></svg> </span> <span className="hidden sm:block text-foreground font-semibold"> Details </span> </li> <li className="flex items-center gap-2 bg-surface p-2"> <span className="flex h-6 w-6 items-center justify-center rounded-full bg-accent text-[10px] text-background font-bold ring-4 ring-background outline outline-1 outline-accent shadow-sm"> 2 </span> <span className="hidden sm:block text-accent font-semibold"> Address </span> </li> <li className="flex items-center gap-2 bg-surface p-2"> <span className="flex h-6 w-6 items-center justify-center rounded-full bg-black/5 dark:bg-white/5 text-[10px]"> 3 </span> <span className="hidden sm:block"> Payment </span> </li> </ol> </div> </div> ); }