The components behind every THJ frontend.
One dark, restrained, system-design language: ink canvas, frosted glass panels, a single crimson accent, colour reserved for severity. Copy a component into your app and own the code. Light theme is a token swap, not a second library.
npx shadcn@latest add https://ui.thjsecurity.tech/r/button.jsonThe registry is shadcn-compatible, so the standard CLI pulls a component and its token dependencies straight into your app. No package to install, no version lockstep.
Inputs
Input
Single-line field on the glass surface.Label
Form label bound to a control.Field
Label, control and hint composed as one row.Select
Styled dropdown. Never a native select.Checkbox
Square check with the crimson fill.Switch
On and off toggle.Multi-select filterregistry
Popover checklist for filtering a column.Data display
Badge
Mono small-caps status pill. Colour is severity.Card
Frosted glass panel with a hairline.Section cardregistry
Card with an eyebrow header and body.Table
Dense data table with mono numeric columns.Avatar
Initials hashed to one of eight identity colours.Progress
Determinate bar.Score barregistry
Labelled meter for a 0-100 score.Bar listregistry
Ranked list of values as proportional bars.Separator
Hairline divider, horizontal or vertical.Skeleton
Shimmer placeholder while content loads.