8020IQ8020IQ8020IQ8020IQ
Design system
  • Overview
  • Tokens
  • Components
    • Actions
    • Forms
    • Data
    • Charts
    • Brand
    • Feedback
    • Navigation
    • Surfaces
  • Patterns
  • Map
Reference
  • Documentation
  1. 8020IQ Design
  2. /
  3. Components

Components

Every primitive and every brand device, grouped by what you would come looking for.

Segments
ActionsEverything a reader clicks to do something: the four button variants, their five sizes, and every state.3 componentsFormsTaking a value from a reader: inputs, selects, multi-select, switches, sliders and their labels.9 componentsDataThe table — sticky header and sorting on every column, which is the house standard — plus pagination and the figures that go in it.5 componentsChartsFour chart types, each one configured rather than duplicated, on the five derived series colours.5 componentsBrandThe marks that make a screen read as ours: the eyebrow, the bracket callout, the metric card, the band scale, the logo.10 componentsFeedbackTelling a reader what happened, or what is about to — alerts, empty states, skeletons, tooltips and hints — and the reader telling us back, with Shift+Click.11 componentsNavigationGetting somewhere and knowing where you are: tabs, breadcrumbs, menus, the rail and the scope selector.7 componentsSurfacesWhat things sit on and float above: cards, panels, dialogs, sheets, separators and the three elevation tiers.10 components

Every specimen renders from the registry's own sources — the same files `shadcn add @8020iq/<item>` copies into an app.