Dokumentationen / Paket
@startsidan/ui
PaketGemensamPrimitiverna modulerna bygger av: V3:s form och mått ovanpå shadcn/ui, så att Radix bär tillgängligheten.
källa: packages/ui/srcuppdaterad: 2026-08-28
Ansvar
- Erbjuda ett litet, stabilt API som modulerna kan klara sig på.
- Hålla V3:s mått – shadcns default skrivs medvetet över av tailwind-merge i cn.
- Bära tillgängligheten: Card är en section med aria-labelledby, Progress har korrekta aria-värden.
- Skilja identitet från status i sina varianter: Avatar har ingen färgprop, och ska inte få en.
Filer
| Sökväg | Roll |
|---|---|
| packages/ui/src/Card.tsx | Kortet. Rubrik, antal, åtgärdslänk, ai-ton. |
| packages/ui/src/Chip.tsx | Chip med statustoner, och AiChip för AI-märkning. |
| packages/ui/src/Btn.tsx | Btn och BtnLink: primary, ghost, ai i två storlekar. |
| packages/ui/src/StatusRow.tsx | Rad med färgad vänsterkant för "Att agera på". |
| packages/ui/src/ListRow.tsx | Rad i en lista, plus Progress. |
| packages/ui/src/Avatar.tsx | Identitetsikon med initialer. Alltid blå. |
| packages/ui/src/MoreLink.tsx | "Visa alla →" i korthuvudet. |
| packages/ui/src/cn.ts | clsx plus tailwind-merge, utökad med våra egna skalsteg. |
| packages/ui/src/components/ui/ | shadcn-komponenterna. Våra filer, med avvikelser kommenterade. |
API
| Namn | Signatur | Beskrivning |
|---|---|---|
| Card | { title?, count?, action?, headingId?, tone?, bodyClassName?, className?, children } | Grundformen för innehåll på arbetsytan. |
| Chip / AiChip | { tone?: ChipTone, children } | ok | warn | info | muted | avv. AiChip märker AI-genererat. |
| Btn / BtnLink | { variant?: BtnVariant, size?: BtnSize } | primary | ghost | ai, i md eller sm. |
| StatusRow | { status?: RowStatus, title, meta?, end? } | krit | warn | info | ok | neutral. Renderas som li. |
| ListRow / Progress | { lead?, title, meta?, end?, children } / { value, done? } | Listrad med valfritt förlopp. |
| cn | (...inputs: ClassValue[]) => string | Slår ihop klasser och låter senare utilities vinna. Känner till text-h2, text-kpi, text-eyebrow, shadow-card och shadow-pop. |
Beroenden och beslut
Kvarstår
- Ingen Storybook och inga komponenttester. /dev/ui:s levande exempel är den enda visuella kontrollen.
- Ingen primitiv för formulärfält – felanmalans formulärspegel bygger sina egna.