Components & ani.js

All 46 components follow the same conventions - BEM blocks under your prefix, state via .is-* classes:

Block:    .my-card
Element:  .my-card__body
Modifier: .my-card--flat
State:    .is-active / .is-open / .is-disabled

The exact copy-paste markup for every component you selected is in the ds-check.html that ships in your ZIP - rendered live with your tokens.

The library

Basics

  • Buttons - btn--secondary · btn--outline · btn--ghost · btn--danger · btn--s · btn--l · btn--block · btn--icon · btn--fab · btn.is-loading · btn-group
  • Links - link--underline · link--muted
  • Badge - badge--secondary · badge--solid · badge--neutral
  • Chip / tag (Pro) - chip--secondary · chip--neutral · chip--outline · chip__remove
  • Keyboard key - kbd--s · kbd--l
  • Icons (Lucide set) - icon--s · icon--l · icon--search · icon--x · icon--check · icon--chevron-down · icon--chevron-up · icon--chevron-left · icon--chevron-right · icon--plus · icon--minus · icon--menu · icon--arrow-right · icon--arrow-left · icon--calendar · icon--clock · icon--user · icon--settings · icon--trash · icon--edit · icon--info · icon--alert · icon--heart · icon--star · icon--download · icon--upload · icon--external-link · icon--copy · icon--eye · icon--mail · icon--home
  • Avatar (Pro) - avatar--s · avatar--l · avatar--square · avatar--solid · avatar-group
  • Divider / separator - divider--label · divider--vertical · divider--dashed
  • Spacer - spacer--xs · spacer--s · spacer--l · spacer--xl · spacer--2xl · spacer--3xl

Forms

  • Inputs & fields (switch, checkbox…) - input · input--s · input--l · input.is-valid · input-icon · select · textarea · checkbox · radio · switch · range · input-group · file · form-error · form-success
  • Joined inputs (Pro) - join--block
  • File upload / dropzone (Pro) - upload.is-dragover · upload.is-uploading · upload.is-success · upload.is-error · upload__progress
  • Search bar (Pro) - search--s · search--l · search__icon · search__clear · search__kbd
  • Calendar / date picker (Pro) - calendar--compact · calendar__day.is-today · calendar__day.is-selected · calendar__day.is-range-start · calendar__day.is-in-range · calendar__day.is-range-end · calendar__day.is-outside · calendar__day.is-disabled

Content & data

  • Card - card--flat · card--interactive · card__media · card__footer
  • Prose / article (Pro)
  • Hero (Pro) - hero--centered · hero--inverted · hero--plain · hero--image · hero--bg · hero__media
  • Table - table--striped · table--hover · table--bordered · table--fixed · table--sticky-head · table__cell--num · table__cell--center · table-wrap
  • Stats (Pro) - stats--vertical · stats--s · stats--l · stat--primary · stat--secondary · stat__icon · stat__desc--up · stat__desc--down
  • List group (Pro) - list-group--flush · list-group__item--interactive
  • Accordion (Pro) - accordion--flush · accordion--plus · accordion--icon-start
  • Timeline (Pro)
  • Chat bubbles (Pro) - chat__msg--end
  • Rating (Pro) - rating--s · rating--l · rating--secondary
  • Carousel (Pro) - carousel--full
  • Empty state - empty--plain

Navigation

  • Tabs
  • Breadcrumb (Pro)
  • Menu (Pro) - menu--inline
  • Dropdown (Pro)
  • Pagination (Pro)
  • Steps (Pro)

Overlays

  • Modal (Pro) - modal--sm · modal--lg
  • Drawer / side & bottom sheet (Pro) - drawer--start · drawer--bottom · drawer__handle
  • Tooltip (Pro) - tooltip--bottom · tooltip--start · tooltip--end
  • Popover (Pro) - popover--top · popover--end
  • Toast / snackbar (Pro) - toast--success · toast--error · toast-region--top · toast-region--start · toast-region

Feedback & status

  • Alerts - alert--info · alert--success · alert--warning · alert--error · alert__close
  • Announcement banner (Pro) - banner--secondary · banner--neutral · banner__close
  • Status dot - status--primary · status--ok · status--warn · status--error · status--pulse · status--s · status--l
  • Indicator (Pro) - indicator__item--start · indicator__item--bottom · indicator__item--dot
  • Progress (Pro) - progress--secondary · progress--striped · progress--animated · progress--s · progress--l
  • Radial progress (Pro) - radial--secondary · radial--s · radial--l
  • Spinner (Pro) - spinner--s · spinner--l · spinner--secondary
  • Loading dots - loading--s · loading--l · loading--secondary
  • Skeleton (Pro) - skeleton--text · skeleton--title · skeleton--circle · skeleton--block

Layouts

Header, footer, container, grid and section always ship (they’re not tier-gated). Header variants: --sticky, --centered, --transparent, --dark. Footer variants: --light, --minimal (single row). Bottom sheets: add --bottom to the Drawer component.

ani.js - the optional 2 KB helper

  • data-my-toggle="#target" toggles .is-open and keeps aria-expanded in sync; data-my-close closes the nearest open component. Esc, overlay-click and outside-click closing are handled.
  • Modals and drawers get focus trapping, focus restore and body scroll-lock automatically.
  • Tabs switch on click and Arrow keys (.is-active + aria-selected).
  • Toasts with data-my-autodismiss close themselves (default 4s).
  • Search bars: data-my-clear empties the nearest input and refocuses it.
  • Upload dropzones get click-to-browse, drag styling (.is-dragover) and drop-into-the-input handling automatically.
  • Accordion, carousel, tooltip, rating and dropdown-on-focus work with zero JavaScript. Prefer React/Vue/htmx? Delete ani.js - the CSS only cares about the classes.

See them all live in the examples gallery, or build your own.