Get Started
Introduction
byronwade/ui is a personal master design system, published as a namespaced shadcn registry. It ships 59 token-driven components and 10 full-page layout archetypes, all built around a single warm-green accent. Install with the shadcn CLI into any Next.js + Tailwind v4 project — you own the copied code.
Why it exists
Most products drift: each surface reinvents its own buttons, spacing, and color. This registry is the opposite — one shared, calm, content-first aesthetic that every project can adopt in minutes and re-skin to its own brand from a single CSS variable. Because it's a shadcn registry, the code is copied into your repo: no runtime dependency, no version lock-in, fully yours to edit.
- One warm-green accent carries every bit of emphasis — the rest is calm ink and gray.
- Hairline borders before shadows; whitespace is a material, not an afterthought.
- Each page earns one signature hero — never a generic, repeated card grid.
- Pure tokens. Override one variable and the whole system re-skins, light and dark.
All 59 components
Foundation
1Libraries
2UI
6Status dotAtomic status indicator dot with tone + optional pulse.Ring gaugeCircular score ring with status tone and big centered number.Gradient avatarRadial-gradient avatar disc derived deterministically from a seed.Activity gridGitHub-style grid of small circles, filled in brand where active.Filter pillPill-with-chevron filter / range selector control.Segmented controlInline segmented toggle (Referrer · Links · Campaign style).
Composites
5Timeline railVertical event/timeline rail with connectors and terminal marker.Split with railSummary column + vertical rail archetype shell.Hero sectionFull-bleed hero composition shell.Metric statLabel + large value + delta badge metric row.Centered focalOne centerpiece + floating card; first-run & single-action tools.
Primitives
4ButtonA polymorphic button component built on Base UI with CVA-powered variant and size styles, supporting icon-only sizes and custom render targets.BadgeA small inline label component with multiple semantic variants (default, secondary, destructive, success, warning, outline, ghost, link) built on Base UI's useRender for polymorphic rendering.CardA composable card container with header, title, description, action, content, and footer sub-components, supporting a compact "sm" size variant.Status PillA colored-dot-plus-label chip that communicates status at a glance using a soft tinted background and a matching StatusDot.
Forms
10InputA styled text input field that wraps Base UI's Input primitive, supporting all native HTML input attributes with consistent focus, disabled, and validation states.TextareaA styled textarea element that auto-sizes to its content and supports focus, disabled, and invalid states via standard HTML textarea props.LabelA styled wrapper around the native HTML label element with consistent typography and disabled-state handling.SelectAn accessible dropdown select built on Base UI's Select primitive, composed of compound parts (trigger, content, items, groups, labels, separators) with animated popover positioning and keyboard navigation.CheckboxA styled checkbox input built on Base UI's headless Checkbox primitive, rendering a checkmark indicator with focus, disabled, and validation states.SwitchA toggle switch component built on Base UI's Switch primitive that supports two sizes and accessible checked/disabled states.Radio GroupA radio group component built on Base UI primitives that renders a group of mutually exclusive radio buttons in a vertical grid layout.ToggleTwo-state pressable toggle button with variant and size styles.Toggle GroupSingle- or multi-select group of toggle buttons sharing variant/size context.Input GroupGrouped input shell with aligned addons, buttons, and embedded controls.
Overlays
8TooltipA compound tooltip component built on Base UI that shows a floating label near a trigger element with animated entry/exit transitions.PopoverA floating popover panel built on Base UI that renders anchored content next to a trigger element with configurable side and alignment positioning.Dropdown MenuA composable dropdown menu built on Base UI's Menu primitive, providing a trigger-controlled popup with support for items, checkboxes, radio groups, submenus, separators, and keyboard shortcuts.DialogA modal dialog compound component built on Base UI's Dialog primitive, with overlay, content popup, header, footer, title, description, and close button sub-components.Hover CardA compound component that displays a floating preview card when hovering over a trigger element, built on Base UI's PreviewCard primitive.SheetSlide-over panel dialog anchored to any screen edge.CommandCommand palette built on cmdk with dialog and input-group integration.Navigation MenuAccessible site navigation with animated dropdown panels.
Feedback
4AlertA compound alert component for surfacing inline feedback messages with an optional title, description, icon slot, and action button.ProgressA linear progress bar built on Base UI that displays a labeled, accessible indicator of completion with optional label and numeric value display.SkeletonA pulsing placeholder div used to indicate loading state before content is available.SonnerA themed toast notification provider that wraps the Sonner Toaster with next-themes integration and custom Lucide icons for success, info, warning, error, and loading states.
Data display
9TabsA compound tabs component built on Base UI that renders a tabbed interface with optional horizontal or vertical orientation and two list variants (default pill or underline line).AccordionA vertically stacked set of collapsible sections, each with a trigger header that toggles its content panel open or closed.AvatarA compound avatar component built on Base UI primitives, supporting image display with fallback text, an optional badge indicator, and grouped avatar stacks.SeparatorA thin horizontal or vertical dividing line built on Base UI's Separator primitive for visually separating content sections.BreadcrumbA compound navigation component that renders an accessible breadcrumb trail with support for links, the current page, separators, and an ellipsis for collapsed items.TableA styled, accessible HTML table compound component with scrollable container, header, body, footer, rows, cells, and caption parts.Aspect RatioContainer that locks child content to a fixed width-to-height ratio via CSS custom property.Scroll AreaCustom-styled scrollable viewport with optional scrollbars built on Base UI.CollapsibleExpand/collapse region with trigger and animated panel.
Patterns
3Page HeaderA dashboard page heading that renders a title, optional subtitle, and optional action slot in either a left-aligned (start) or centered layout.Stat CardA compact metric tile displaying a labeled value with an optional icon, delta trend pill, and muted hint line.Empty StateA centered empty-state panel with a dashed border, optional icon chip, title, description, and an optional action slot.
Charts
1House components
4Detail HeaderA resource detail page header that renders a title row with an optional badge and action buttons, followed by a responsive grid of label-over-value metadata columns.SectionA titled settings-style content block with an optional header action, rendering a labelled section heading above a bordered card body; ships with companion SettingsList and SettingRow compound components for building explain-everything config panels.Event TimelineA vertical "domain events" style timeline that renders a list of labeled events with toned status dots, optional descriptions, and monospaced timestamps connected by a vertical rule.Verification ProgressMulti-step verification status tracker with tone-colored steps, optional counts, and connecting rails.
Morph
2useChromeMorphThe shared morph hook for floating chrome — a toolbar pill, launcher, or nav dock. It animates a container's width/height/border-radius between its collapsed box and an open panel on a tuned curve, cross-fading rest↔panel, then shrinks cleanly back. Position-agnostic and reduced-motion aware.MorphDockA config-driven morphing navigation dock. The item row morphs compact ↔ full, and the whole pill blooms in place into a consumer-provided panel via useChromeMorph — items, badges, core/pinned flags, a trailing cluster, and a contextual action. Pure --dock tokens, reduced-motion + Esc + click-away.