Components
Every web component in achery-ui, with its Storybook examples rendered live: switch the theme, accent, dial and material on each page. The API under each comes from COMPONENTS.md.
Components
- AvatarCircular initials avatar.
- BarChartBar and stacked-bar chart.
- CheckboxA ticked box fills with the accent under the chrome and surface dials, and with ink under underline.
- Combobox// Fixed options <Combobox value={tags} onChange={setTags} options={['computer', 'outside', 'quick-win']} placeholder="Add tags…" />
- DatePicker// With Field wrapper <Field label="Scheduled date"> <DatePicker value={date} onChange={...} error={!!errors.date} /> </Field> ```
- EntityPillCompact entity identifier — LetterStamp + label.
- GlyphPickerA trigger button that opens a searchable popover of every glyph in GlyphCategories, grouped by category.
- KpiTileKPI summary tile — eyebrow label, large value, optional delta badge, optional sparkline.
- LetterStampHard-edged square stamp displaying a single letter or glyph.
- MenuMenuItemDef: id, label, onSelect, glyph?, disabled?, danger?
- ProgressBarA determinate bar from 0 to 100, with role="progressbar" and its value exposed.
- SparklineInline SVG sparkline chart.
- StatePillSubscription state indicator wrapping Badge.
- TypeTagMonospace transaction type tag with colour-coded border and background.
Data
Feedback
Inputs
Layout
- AppBarTop-of-page application bar with brand identity, search, and optional built-in controls.
- CardSurface container for grouping related content.
- DetailRailSlide-in contextual detail panel.
- MaterialCardA contained surface wearing the project's material signature.
- SidebarVertical navigation sidebar.
- TabsAccessible tab navigation built on Radix Tabs.
Overlays
Primitives
- BadgeCompact inline label for status, category, or metadata.
- ButtonThe primary interactive element.
- EyebrowUppercase section label rendered in small-caps with tracked letter-spacing.
- Form inputsForm primitives: Field (label + hint/error wrapper), Input (single-line), Textarea (multi-line), Select (native dropdown), and SearchInput (search with compass icon).
- Glyph397 SVG glyphs drawn in the vocabulary of alchemical and botanical illustration.
- MarginaliaDecorative botanical/alchemical glyph for corner or edge ornamentation.
- ToggleBinary on/off switch built on Radix Toggle.
- TypographyFour components covering the full type scale.