COMPONENT LIBRARY

Every piece, documented.

The same structure for every entry: a live specimen, its anatomy, the tokens it answers to, and production code. Nothing here is a picture of a component; it is the component.

9Foundations56Components2Layouts

Foundations09

IntroductionWhat Optimistic is, why it exists, and what's inside.● documented

How to UseWhere to start, how the system fits together, and the rules that keep it coherent.● documented

Color SystemA monochrome field with one warm accent. Roles, scales and contrast guarantees.● documented

TypographyInter for reading, Inter Display for headlines, mono for the machine's voice.● documented

SpacingA 4px base scale and the rhythm rules that keep sections breathing evenly.● documented

Grid SystemColumns, gutters and the 1320px container every page hangs from.● documented

ElevationDepth without drama: hairlines first, shadows only where meaning needs them.● documented

Border RadiusFrom sharp panels to rounded chips, and when each is the right call.● documented

BreakpointsThe widths where layouts reflow, and how components adapt across them.● documented

Navigation07

Side NavigationThe vertical rail for product areas, with grouping and collapse.● documented

Top NavigationThe horizontal bar for global wayfinding and primary actions.● documented

BreadcrumbsA trail back up the hierarchy, one hop at a time.● documented

TabsPeer views in one place; one visible, all reachable.● documented

PaginationLong lists cut into honest, numbered pages.● documented

LinkInline navigation that reads as text and behaves like a promise.● documented

Command MenuThe keyboard-first jump-anywhere palette.● documented

Forms16

ButtonThe unit of intent. Sizes, variants, states and the one warm primary.● documented

Split ButtonA primary action with its alternatives folded beside it.● documented

InputSingle-line text entry with labels, hints and honest validation.● documented

TextareaRoom to write. Grows predictably, never traps the scroll.● documented

CheckboxIndependent yes-or-no decisions, including the indeterminate middle.● documented

RadioOne choice from a visible set.● documented

ChoiceboxRadio semantics in a card body, for choices that need explaining.● documented

ToggleInstant on-or-off with optimistic feedback.● documented

DropdownA compact select for known, shortish lists.● documented

ComboboxType to filter, pick to commit. For lists too long to scan.● documented

Date PickerCalendar entry without ambiguity, keyboard included.● documented

Time PickerTimes entered fast, validated quietly.● documented

SearchThe input that answers as you type.● documented

SliderContinuous values chosen by feel, with exact entry as backup.● documented

Pin InputShort codes, one cell per character, paste-friendly.● documented

UploadFiles in by drag, drop or browse, with progress you can trust.● documented

Data Display12

TableA theme-aware data grid: sort, filter, search, select, edit, expand, paginate, pin, resize and more.● documented

ChartBar, line, area, donut and sparkline. Pure SVG, token-coloured, theme-aware, no dependencies.● documented

ListVertical collections with leading and trailing slots.● documented

CardA bordered surface for content and actions, with media, interactive and background-motion variants.● documented

AvatarPeople and teams as compact, stackable identity marks.● documented

BadgeSmall counts and statuses pinned to other elements.● documented

TagsRemovable labels for filtering and classification.● documented

PillsSelectable chips for quick, visible filtering.● documented

IndicatorA dot's worth of status: live, idle, attention.● documented

LogoThe chip pixel-O, its clear space and its misuse cases.● documented

SkeletonThe optimistic loading state: structure first, content on arrival.● documented

Keyboard InputKeys and shortcuts rendered as keys, not prose.● documented

Feedback07

SnackbarBrief confirmations that never block the work.● documented

LoaderFor the moments honesty requires a wait.● documented

ProgressDeterminate movement toward a visible end.● documented

NotificationSystem messages with severity, action and dismissal.● documented

CalloutInline emphasis for things the reader must not miss.● documented

StepperMulti-step flows with the finish line always in view.● documented

Empty StateFirst-run and zero-data moments that point forward.● documented

Overlays05

ModalFocused decisions above the page, escapable by design.● documented

DrawerSide-anchored panels for detail without losing place.● documented

PopoverAnchored content that opens near its trigger.● documented

TooltipA label's whisper on hover and focus.● documented

Bottom SheetMobile-first overlay rising from the bottom edge.● documented

Layout09

AccordionSections that expand one truth at a time.● documented

DividerThe hairline. #1e1e1e, one pixel, everywhere.● documented

FilterFaceted narrowing with visible, removable criteria.● documented

FABThe floating action for a screen's one primary verb.● documented

MenuContextual actions in a compact, keyboardable list.● documented

Icon~2,000 single-colour line icons from Lucide, searchable.● documented

Illustration20 single-colour line scenes for empty, error and success states.● documented

GridLayout primitives for composing responsive regions.● documented

Code BlockSource shown honestly: mono, copyable, highlighted.● documented

Layouts02

Side Menu with NavbarThe app shell: six arrangements of top menu, left menu, header and content.● documented

Form LayoutField rhythm, section grouping and validation placement.in assembly