Timeline
Časová osa s 9 barvami, 3 typy teček a solid / dashed / dotted čárou
Installation
pnpm dlx shadcn@latest add https://registry.ceskysoftware.cz/r/timeline.json
Usage
Preview
Barvy teček
Účet vytvořen
Dnes
První přihlášení
Včera
Platba zpracována
Před 3 dny
Email ověřen
Před týdnem
Styl čáry
solid
Krok 1
09:00
Krok 2
10:30
Krok 3
12:00
dashed
Krok 1
09:00
Krok 2
10:30
Krok 3
12:00
dotted
Krok 1
09:00
Krok 2
10:30
Krok 3
12:00
Import
import { Timeline } from "@/components/ui/timeline"
Example
<Timeline
color="primary"
lineStyle="solid"
items={[
{ id: 1, title: "Objednávka přijata", time: "Dnes", color: "green" },
{ id: 2, title: "Ve zpracování", description: "Probíhá balení.", time: "Zítra", color: "blue" },
{ id: 3, title: "Odesláno", time: "Do 3 dnů", color: "grey", dot: "outline" },
]}
/>
Dependencies
https://registry.ceskysoftware.cz/r/utils.json (registry)