AhaSlides Design
v0.50.1React · Vue · Lit

AhaSlides Design System · for agents

Components

One token source + one contract per component → this site, the llms.txt feeds, design.md, and per-component agent.json — all generated together, so they can't drift.

◆ generated by generate.mjs — 78 live of 78 planned components

Get started

Published to GitHub Packages, so point the @ahaslides-product scope at the registry and authenticate once, then install, import the token layer at your app root, and import any component. It is one element — identical in React, Vue, and outside any app.

0 · Point the scope at GitHub Packages — once, in .npmrc
@ahaslides-product:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}   # a GitHub token with read:packages
1 · Install
npm i @ahaslides-product/design
2 · Token layer — once, at the app root
import '@ahaslides-product/design/tokens.css';
3 · A component — import its subpath, use the element
import '@ahaslides-product/design/aha-button';   // registers <aha-button>
<aha-button variant="primary">Save</aha-button>
No build step? — one tag registers every element (CDN / no-build pages)
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/tokens.css">
<script type="module" src="https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/all.js"></script>
<aha-button variant="primary">Save</aha-button>   // bundled apps: prefer per-element imports (tree-shaking)

For agents — read this, then connect automatically

Every feed below is generated from the same contract as the components, so it can never drift. Start at llms.txt and follow it:

Live components

Add Item Button leaf
The full-width "+ Add" affordance that sits under a settings list (OptionRow / QuestionList) — a dashed, tertiary add row that appends a new item.
add-item-button.md · add-item-button.agent.json · add-item-button.llms.txt
Alert leaf
An inline, contextual feedback banner — info, success, warning, error, or branding — in regular/small sizes, with an optional full-width banner mode and a trailing action.
alert.md · alert.agent.json · alert.llms.txt
AutoComplete composite
Free-text input with suggestions as you type — search boxes, tag entry, known-but-open fields — rendered through the shared AutoComplete.
autocomplete.md · autocomplete.agent.json · autocomplete.llms.txt
Avatar leaf
Represent a person or entity with a photo, initials, or an icon — solo or in a stacked group.
avatar.md · avatar.agent.json · avatar.llms.txt
Badge leaf
A small count or status marker — notification counts, unread dots, a standalone status label.
badge.md · badge.agent.json · badge.llms.txt
Breadcrumb leaf
A trail of ancestor links ending in the current page — and, at size=page-title, the page heading itself (there is no separate page-title component).
breadcrumb.md · breadcrumb.agent.json · breadcrumb.llms.txt
Button leaf
Trigger an action or navigation — the primary interactive control.
button.md · button.agent.json · button.llms.txt
Card leaf
A surface that groups related content — cover, title, body and footer actions — in default/small size, bordered or flat, with a hover lift and a loading skeleton.
card.md · card.agent.json · card.llms.txt
Card select leaf
Single-select as an icon+label card grid — pick one of N options each shown as its own visual card, with roving radiogroup keyboard navigation. Two layouts: labelled tiles (stretch to fill `columns`) or compact 44px icon-only squares.
card-select.md · card-select.agent.json · card-select.llms.txt
Carousel composite
A swipeable set of slides — onboarding, a feature tour, a gallery — rendered through the shared Carousel.
carousel.md · carousel.agent.json · carousel.llms.txt
Checkbox leaf
Let a user turn one or more independent options on or off.
checkbox.md · checkbox.agent.json · checkbox.llms.txt
Collapse leaf
A single expandable panel that hides secondary content until asked.
collapse.md · collapse.agent.json · collapse.llms.txt
Color picker leaf
Pick a colour from a selectable palette of presets.
color-picker.md · color-picker.agent.json · color-picker.llms.txt
Counted input leaf
A single-line settings field whose character counter shows only while the field is focused and is hidden at rest — the shared CountedInput pattern for option/answer text.
counted-input.md · counted-input.agent.json · counted-input.llms.txt
Counted textarea leaf
The multi-line settings field — a CountedInput that wraps to several lines, grows from minRows to maxRows then scrolls, with the same focus-only character counter.
counted-textarea.md · counted-textarea.agent.json · counted-textarea.llms.txt
CSAT leaf
The shared thumbs up/down satisfaction prompt — the one CSAT control, not a bespoke rating.
csat.md · csat.agent.json · csat.llms.txt
DatePicker composite
Pick a date or a date range from a calendar — schedules, deadlines, filters — rendered through the shared DatePicker.
datepicker.md · datepicker.agent.json · datepicker.llms.txt
Descriptions leaf
A read-only label/value grid summarising one entity's fields — N columns, bordered or plain, horizontal or vertical, with per-item span.
descriptions.md · descriptions.agent.json · descriptions.llms.txt
Divider leaf
A thin rule that separates blocks of content — full-width, with a label, or a vertical hairline.
divider.md · divider.agent.json · divider.llms.txt
Drawer composite
A side panel that slides in for a longer edit or detail view — rendered through the shared Drawer.
drawer.md · drawer.agent.json · drawer.llms.txt
Dropdown leaf
A trigger button that reveals a floating overlay of actions — with leading icons, dividers, disabled rows and a red danger action.
dropdown.md · dropdown.agent.json · dropdown.llms.txt
Empty leaf
The placeholder for a surface that has no data yet.
empty.md · empty.agent.json · empty.llms.txt
Flex leaf
A flexbox container with the DS spacing scale baked into `gap` — direction, align, justify, wrap.
flex.md · flex.agent.json · flex.llms.txt
Form composite
A labelled, validated set of fields — sign-in, settings, create dialogs — rendered through the shared Form.
form.md · form.agent.json · form.llms.txt
Grid leaf
A CSS-grid container — a fixed column count or a responsive auto-fit, with the DS gutter scale, track justify/align, and a responsive collapse.
grid.md · grid.agent.json · grid.llms.txt
Icon leaf
One glyph set, called by name — 259 icons imported from Figma, rendered by the shared <aha-icon>, never inline SVG.
icon.md · icon.agent.json · icon.llms.txt
Illustration leaf
One spot-art set, called by name — 20 multi-colour illustrations imported from Figma, rendered by the shared <aha-illustration>, never inline SVG.
illustration.md · illustration.agent.json · illustration.llms.txt
Image leaf
A framed image with rounded corners, a hover preview mask, a loading placeholder and a broken-src fallback.
image.md · image.agent.json · image.llms.txt
Image action button leaf
The compact per-option image control — an image icon button with empty / loading / thumbnail states and a Change/Edit/Delete menu; it emits intents, the host owns the modals.
image-action-button.md · image-action-button.agent.json · image-action-button.llms.txt
Image dropzone leaf
The full-width settings image field where the image IS the field — a dashed upload card with empty / loading / filled states and a Change/Edit/Delete overlay; it emits intents, the host owns the modals (SETTINGS-44).
image-dropzone.md · image-dropzone.agent.json · image-dropzone.llms.txt
Info box leaf
A settings-only tinted callout in four tones (information / success / warning / error), optionally dismissible — a bespoke component, not Ant Alert.
info-box.md · info-box.agent.json · info-box.llms.txt
Input leaf
A single-line text field — names, search, numbers, short free text — with sizes, error/warning status, affixes, a clear ✕ and a password reveal.
input.md · input.agent.json · input.llms.txt
InputNumber composite
Enter a number with steppers, min/max and precision — quantities, limits, durations — rendered through the shared InputNumber.
input-number.md · input-number.agent.json · input-number.llms.txt
List leaf
A vertical list of uniform rows — avatar + title/description meta and trailing actions, with size, bordered and split options.
list.md · list.agent.json · list.llms.txt
Loader leaf
The full-surface branded loading screen shown while a new environment boots — workspace → editor, or editor → presenting.
aha-loader.md · aha-loader.agent.json · aha-loader.llms.txt
Menu leaf
A list of selectable options — a side nav, a settings list, an overflow menu — with icons, groups, submenus and danger actions.
menu.md · menu.agent.json · menu.llms.txt
Modal composite
A focused, blocking dialog in two types — a Confirmation (yes/no decision) and an Action (a task surface) — rendered through the shared Modal.
modal.md · modal.agent.json · modal.llms.txt
Mode field leaf
A labelled field with an inline exclusive mode control whose body swaps in place — the settings field for a control that has two-or-more mutually-exclusive modes.
mode-field.md · mode-field.agent.json · mode-field.llms.txt
Notification composite
A richer, stacking message with a title + description — rendered through antd's notification API.
notification.md · notification.agent.json · notification.llms.txt
Number with unit leaf
A fixed-width digit input with the unit written IN FULL inline (rendered exactly as passed — "seconds", "points" — muted grey), a hover ▲/▼ stepper, a hard digit cap, clamp-on-change, and an error line — the settings field for a number that carries a unit.
number-with-unit.md · number-with-unit.agent.json · number-with-unit.llms.txt
Numbered item leaf
The numbered wrapper for a repeatable composite item — a grey card with a muted number chip, a "<Label> N" header, a hover delete, and a body slot (SETTINGS-43).
numbered-item.md · numbered-item.agent.json · numbered-item.llms.txt
Option row leaf
The repeatable option/answer row — one bordered row with an inside drag handle, a borderless counted textarea, an optional correct toggle (circle or square) and per-option image, and a floating hover delete; marking correct paints the whole card success-green (SETTINGS-20/34/23/39).
option-row.md · option-row.agent.json · option-row.llms.txt
Pagination leaf
A page selector for a paged list or table — prev / numbered pages with ellipsis / next; two sizes, a simple mode, and a whole-control disabled state.
pagination.md · pagination.agent.json · pagination.llms.txt
Paywall leaf
Wrap a pro-gated affordance; the shared upsell renders itself — the crown upgrade mark, title, one-sentence body, the fixed unlock line, and Upgrade + See all plans CTAs are baked in.
paywall.md · paywall.agent.json · paywall.llms.txt
Popconfirm composite
A lightweight inline confirmation popover anchored to the trigger — confirm/cancel a low-risk action.
popconfirm.md · popconfirm.agent.json · popconfirm.llms.txt
Popover leaf
Anchor a floating card of rich content — a title, a body, and an optional arrow — to a trigger.
popover.md · popover.agent.json · popover.llms.txt
Progress leaf
A determinate progress indicator — completion, upload, a quiz timer — as a line, segmented steps, or a circle.
progress.md · progress.agent.json · progress.llms.txt
QR code composite
A scannable QR code — a join link, a deck URL, a Wi-Fi handoff — rendered through the shared QRCode.
qr-code.md · qr-code.agent.json · qr-code.llms.txt
Question list leaf
An editable list of collapsible questions — each a prompt field plus its OptionRow choices — with a full-width "+ Add question" that disables at max; composes NumberedItem + OptionRow (SETTINGS-31/36).
question-list.md · question-list.agent.json · question-list.llms.txt
Radio leaf
Pick exactly one option from a small mutually-exclusive set, all shown at once.
radio.md · radio.agent.json · radio.llms.txt
Rate leaf
Capture or display a score as a row of stars.
rate.md · rate.agent.json · rate.llms.txt
Result leaf
A full-block outcome state — success, error, info, warning, 404, 403 or 500 — with an icon, title and actions.
result.md · result.agent.json · result.llms.txt
Screen heading leaf
A product page header — a title/greeting or a breadcrumb trail on the left, action buttons on the right, responsive across desktop / tablet / phone.
screen-heading.md · screen-heading.agent.json · screen-heading.llms.txt
Section Header leaf
A settings GROUP header — the hierarchy parent that a stack of setting rows sits under: a noun-phrase label, an optional "?" help, and a right-aligned action slot (a master switch, a count, a link).
section-header.md · section-header.agent.json · section-header.llms.txt
Segmented leaf
Switch between a few mutually-exclusive options inline — labels, leading icons, or icon-only, in three sizes.
segmented.md · segmented.agent.json · segmented.llms.txt
Select composite
Pick one value (or several) from a known set — with type-to-search — rendered through the shared Select.
select.md · select.agent.json · select.llms.txt
Select field leaf
Pick one value from a short, known set — a lightweight native-select-backed field that embeds anywhere.
select-field.md · select-field.agent.json · select-field.llms.txt
Setting group leaf
The settings GROUP container — an optional semibold header (with a "?" help and an action slot) over a column of rows — that bakes in the panel spacing scale so gaps come out right automatically.
setting-group.md · setting-group.agent.json · setting-group.llms.txt
Setting Row leaf
ONE setting — a label (with an optional "?" help) plus a slotted DS control; inline (label-left / control-right) by default, or stacked (label above, control full-width) for a wide control.
setting-row.md · setting-row.agent.json · setting-row.llms.txt
Settings list leaf
A schema-driven group of settings rows — semibold label left (with a "?" help tooltip), control right — reusing existing DS controls.
settings-list.md · settings-list.agent.json · settings-list.llms.txt
Skeleton leaf
A greyed placeholder that holds a component's shape while its content loads.
skeleton.md · skeleton.agent.json · skeleton.llms.txt
Slider composite
Drag to set a value across a known range — volume, opacity, thresholds, ranges — rendered through the shared Slider.
slider.md · slider.agent.json · slider.llms.txt
Space leaf
An even, DS-scale gap between a small inline set of items — buttons, tags, inline controls.
space.md · space.agent.json · space.llms.txt
Spin leaf
A brand-coloured spinner for an indeterminate wait — loading a page, a panel, or results.
spin.md · spin.agent.json · spin.llms.txt
Statistic leaf
A single headline number with a caption, prefix/suffix (text or icon), precision, trend colour and a loading skeleton.
statistic.md · statistic.agent.json · statistic.llms.txt
Status badge leaf
A glanceable lifecycle pill for a domain object — draft, published, closed, archived, active, inactive.
status-badge.md · status-badge.agent.json · status-badge.llms.txt
Steps composite
Show progress through a sequence of ordered stages — wizards, onboarding, checkouts — rendered through the shared Steps.
steps.md · steps.agent.json · steps.llms.txt
Sub setting group leaf
The dependent (child) settings wrapper — indents a cluster of sub-settings under one parent toggle with a tight gap, spacing only (no border, no card).
sub-setting-group.md · sub-setting-group.agent.json · sub-setting-group.llms.txt
Switch leaf
A single setting that takes effect immediately — on or off.
switch.md · switch.agent.json · switch.llms.txt
Table composite
A data grid — results, leaderboard, participant/admin list — rendered through the shared DataTable.
table.md · table.agent.json · table.llms.txt
Tabs leaf
Switch between sibling content panels from a tab bar — line, primary or card, in two sizes, with per-tab icons.
tabs.md · tabs.agent.json · tabs.llms.txt
Tag leaf
A small label chip for a category, keyword, or state — filled or bordered, with an icon, a dismiss ×, or a checkable toggle.
tag.md · tag.agent.json · tag.llms.txt
Textarea composite
Enter multi-line free text — descriptions, messages, notes — with autosize and char count, rendered through the shared Textarea.
textarea.md · textarea.agent.json · textarea.llms.txt
TimePicker composite
Pick a time of day from scrolling hour/minute/second columns — schedules, reminders, durations — rendered through the shared TimePicker.
time-picker.md · time-picker.agent.json · time-picker.llms.txt
Toast composite
A brief, auto-dismissing confirmation of an action — rendered through antd's message API.
toast.md · toast.agent.json · toast.llms.txt
Tooltip leaf
A short, transient hint shown on hover or focus of its trigger.
tooltip.md · tooltip.agent.json · tooltip.llms.txt
Upload leaf
Select files by clicking a drop zone or dragging onto it — then manage them as rows or picture tiles with per-item state.
uploader.md · uploader.agent.json · uploader.llms.txt
User info leaf
A person/identity row — an avatar next to a name, with an optional email underneath.
user-info.md · user-info.agent.json · user-info.llms.txt

Guidelines

Composition guides — how to assemble the components above for a use case. A pattern ships no new primitive; it reuses components and documents conventions, linking each rule back to its aha-design skill.

App shell pattern
How an AhaSlides product SCREEN is assembled from DS components — the left nav rail (real brand mark + nav items + one primary CTA), the top bar (context left, actions/avatar right), the content region, and where relevant a canvas/stage — spaced by --aha-* tokens, with a real brand identity and no dead placeholders. Closes the composition gap that turns a component-correct screen into generic-admin-template slop.
5 rules · reuses 7
Audience iframe pattern
How to build the audience-facing iframe of a slide-type plugin — mobile-first single-column layout, theme-from-xprops, self-rendered submit/waiting/correct-incorrect states, the standard submit-button spec, and host-utility integration — composed from existing components.
54 rules · reuses 14 · 11 backlog
Canvas pattern
How a slide type LOOKS on the canvas — the 16:9 stage, theme/colour/fonts from xprops, semantic state colours, WCAG readability from across the room, framed-vs-full-canvas, the presenter control bar, in-canvas keyboard affordances, and i18n — built from existing components.
35 rules · reuses 12 · 4 backlog
Feedback pattern
How to build transient and post-action feedback — toasts, the DS V3 Alert inline banner, inline correct/incorrect result panels, and the CSAT thumbs widget — from existing components, plus when NOT to use a toast.
17 rules · reuses 9 · 4 backlog
Overlays pattern
How to build a modal, drawer, or popover — surface choice, safety-critical dismiss behaviour, state reset, drawer placement/width, the async-confirm pattern, inline error surfacing, and danger-styled confirms — built from existing components.
10 rules · reuses 7 · 4 backlog
Settings pattern
How to organise a settings surface — group ordering, help-text vs tooltip, sub-settings, plan-gating, and the danger zone — built from existing components.
13 rules · reuses 23
Status badges pattern
How to build a status/state pill on a domain object — dot + localised label, the aha-status-pill class convention, the role=status + aria-label contract, i18n labels, and colour driven by the modifier class — from existing components.
9 rules · reuses 6 · 1 backlog
UX writing pattern
The WORDS in every product surface — sentence-case casing, one canonical label, and specific / actionable / blameless error-empty-feedback microcopy — applied to the labels and copy the existing components render.
10 rules · reuses 8 · 4 backlog

Agent feeds

llms.txt index · llms-full.txt full · design.md visual language · CHANGELOG.md version history · variables.css token layer · per-component <slug>.agent.json

Roadmap

The Components tab lists the full planned inventory (greyed = soon), taken from the aha-design component-standard measured set. Leaf primitives ship as one shared Lit web component (portable to any environment); composites ship as antd / ant-design-vue wrappers (app-only). Each component follows the same lifecycle: contract → build → theme → render-matrix verify → judge → publish.