Sangria DS

Components

Every primitive, every variant

The 25 files in components/ui, rendered from source, plus the app's shared NativeSelect. Toggle dark in the header to check both grounds.

Button

7 variants x 4 sizes, plus states.

Variants

Sizes

States

Badge

Admin
Guest
Deactivated
Bot

Input, Label, Switch

NativeSelect

Not a ui primitive: src/components/native-select.tsx, a shared app component, copied verbatim and held to the app by check:sync. A native <select> with appearance-none and a themed lucide chevron. Browsers treat a mouse click on a <select> as keyboard focus, so a focus ring would flash on every click; the focus cue is a border shift to foreground/40 instead.

Used by the channels, permissions and audit settings pages, the profile form, the developer apps page and the OAuth app card. Tab into the rest control to see the real focus cue.

Verification code

input-otp, as used by the 2FA gate and email confirmation.

Avatar, Skeleton, Separator

ARMI

Overlays

Dialog, Sheet, Popover, Dropdown, Tooltip.

Tabs, Accordion

Message results appear here.

Card, Table

Acme

12 members ยท 8 channels

MemberRoleStatus
Avery RahmanOwner
Active
Monirul IslamAdmin
Guest