User Inferface Guide

All components

Quick links to each component section (route + anchor).

Button Card CardContent CardDescription CardFooter CardHeader CardTitle IconButton Alert AlertAction AlertContent AlertDescription AlertIcon AlertTitle Avatar AvatarFallback AvatarImage AvatarStack Badge Checkbox CheckboxGroup CheckboxGroupItem RichCheckboxItem Input Textarea Table TableBody TableCaption TableCell TableFooter TableHead TableHeader TableRow Tabs TabsContent TabsList TabsTrigger Breadcrumb BreadcrumbEllipsis BreadcrumbItem BreadcrumbLink BreadcrumbList BreadcrumbPage BreadcrumbSeparator Label Field FieldControl FieldDescription FieldError FieldHeader FieldLabel Radio RadioGroup RadioGroupItem RadioGroupOption RichRadioItem Item ItemActions ItemContent ItemDescription ItemFooter ItemGroup ItemHeader ItemMedia ItemSeparator ItemTitle Dialog DialogBody DialogClose DialogContent DialogDescription DialogFooter DialogHeader DialogTitle DialogTrigger Sonner

Button

Button as link (href)Disabled link Button asChild (Link)

IconButton

Alert

Neutral callout

Displays a callout for user attention.

Item added successfully

This is an alert with icon, title and description.

Item added successfully

Error! API call failed

Please check the marked fields

There was a problem, please check the indicated fields.

Icon on the right

Use iconPosition="end" to flip the icon.

Dialog

Dropdown Menu

Basic

With submenu

With checkboxes

With radio group

Destructive item

Avatar

CNCN

CN

CNCNCNCN

CN

GH

OP

CN

GH

OP

Badge

BadgeSecondaryOutlineGhostDestructive

RoundRound secondaryRound outlineRound ghostRound destructive

Card

Slot in your own content: forms, lists, images, etc.

Email

Password

Don't have an account? Sign up

Input

https://

EUR

Textarea

Default

Round

Error

Disabled

Autogrow (not in Figma)

Label

Default labelRequired label*

Muted labelError label

Field

Something went wrong. Please try again.

Table

Rows use hover + selected state (`data-state="selected"`).
Organization	Role	Status
Acme Inc.	Admin	Active
KOMO	Editor	Pending
Land Steiermark	Viewer	Active

Tabs

Overview content

Small content

Regular content

Large content

Breadcrumb

Checkbox

Checkbox group

Radio

Radio group

Sonner

Toast types

With action button

Loading state

Promise toast

Item

Single item

Optional header

Title

Description

Optional footer

Group + separators

Item one

Description

Item two

Description

Item three (xs)

Description