Skip to content
StuermanSystems
← All projects

Design system

Component catalogPersonal project

Explore the components behind this site, adapted from shadcn/ui and Radix with a shared visual language.

This personal project is the live component catalog behind Stuerman Systems. It brings the site’s Ink & Cobalt visual language into shared components, typography, and layout primitives.

The components are adapted from shadcn/ui and Radix. Those projects provide the foundation; this catalog shows how I have composed and styled them for this site.

01 / Foundations

A little color. Clear purpose.

Cobalt draws attention to the next step. Ink keeps text readable. Quiet surfaces give the content room.

Components are adapted from shadcn/ui. Radix UI provides most interactive primitives; Base UI powers the Combobox.

Primary
Ink
Surface
Destructive

Actions

Use a primary button for the main action, an outline for an alternative, and a destructive variant for removal. Pending and disabled states make availability explicit.
Shared identityLarge badge

Form controls

Labels explain what to enter. Help and error messages stay beside the relevant control. Try the examples; nothing is submitted or saved.

Label and helper text.

Type to filter, use arrow keys and Enter to select, and Escape to close. From an empty input, press Left Arrow to focus a chip, then Backspace or Delete to remove it.

Interaction & feedback

Dialogs pause a task; sheets add supporting context. Menus group actions, tabs switch views, and feedback explains what happened.
Overview panel.

Ready for composition

Component index

Shared components. One visual language.

The examples above show representative states. The shared package also includes these building blocks for future projects.

Layout & typography

Container · Heading · Text · Prose · Markdown · SkipLink · Wordmark · ActionLink · ArrowRight

Actions & feedback

Button · Badge · Alert · Progress · Skeleton · Spinner · Toaster

Forms

Input · InputGroup · Textarea · Label · Field · Checkbox · RadioGroup · Switch · Select · Combobox · ComboboxChips

Overlays

Dialog · AlertDialog · Sheet · Popover · Tooltip · DropdownMenu

Structure & data

Card · Tabs · Accordion · Separator · Table · Avatar · Breadcrumb · Empty

Back to projects Have a project in mind?