🎨
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
- Details
- 2 Address
- 3 Payment
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>
);
}