Steps
Průvodce kroky — horizontální / vertikální, 4 varianty, 9 barev, 3 velikosti
Installation
pnpm dlx shadcn@latest add https://registry.ceskysoftware.cz/r/steps.json
Usage
Preview
Horizontální — barvy
primary
Krok 1
2
Krok 2
3
Krok 3
secondary
Krok 1
2
Krok 2
3
Krok 3
blue
Krok 1
2
Krok 2
3
Krok 3
green
Krok 1
2
Krok 2
3
Krok 3
red
Krok 1
2
Krok 2
3
Krok 3
Velikosti (horizontal, primary)
sm
1
2
2
3
3
md
1
2
2
3
3
lg
1
2
2
3
3
Vertikální
Objednávka přijata
Potvrzení objednávky
2
Ve zpracování
Balíme váš balík
3
Odesláno
Předáno dopravci
4
Doručeno
Balík je u vás
Import
import { Steps } from "@/components/ui/steps"
Example
<Steps
steps={[
{ id: "1", title: "Účet", description: "Vytvořte účet" },
{ id: "2", title: "Profil", description: "Doplňte údaje" },
{ id: "3", title: "Hotovo", description: "Vše připraveno" },
]}
activeStep={1}
color="primary"
orientation="horizontal"
/>
Dependencies
https://registry.ceskysoftware.cz/r/utils.json (registry)