Component Library

Browse 68 components with live demos across 7 categories. Every component is token-driven — swap the theme or skin and every demo restyles instantly. All components use --color-link, --color-bg, --surface-shadow-md and 89 other CSS custom properties. Try the live theme × skin lab on skins.php, open a demo, inspect the source — zero build step, just CSS.

Build Faster with EXSA

A token-driven CSS framework. No build step. Just CSS.

<link rel="stylesheet" href="dist/components/hero.css"> <body class="exsa"> <header> <figure> <img src="hero-bg.jpg" alt="Background"> </figure> <h1>Build Faster with EXSA</h1> <p>A token-driven CSS framework. No build step. Just CSS.</p> <p> <button>Get Started</button> <button>Learn More</button> </p> </header> </body>

What design tokens does this use?

82 design tokens from the active theme file drive all colors. --color-link for the active label, --color-bg-secondary for hover states and borders, --border-radius for the container corners.

Is it pure CSS or does it need JavaScript?

Pure CSS. It uses a hidden checkbox input + the :checked pseudo-class to toggle the panel height. Same pattern as our Toggle Switch component.

Can I nest accordions inside each other?

Yes. Nest another .accordion block inside .accordion__panel-inner. Each nested accordion gets its own independent checkbox IDs. Works up to any depth.

<div class="accordion"> <div class="accordion__item"> <input type="checkbox" class="accordion__trigger" id="a1"> <label class="accordion__label" for="a1">Title</label> <div class="accordion__panel"> <div class="accordion__panel-inner">Content here</div> </div> </div> </div>

To Do2

Design tokens audit

Sweep 82 tokens for drift

docsAug 24

Kanban demo

Aug 24

Doing1

Contracts probe

Aug 23

<div class="kanban"> <div class="kanban__col" data-col-id="todo"> <div class="kanban__col-head"> <span class="kanban__col-title">To Do</span> <span class="kanban__col-count badge badge--default">2</span> </div> <div class="kanban__cards"> <article class="kanban__card" data-card-id="c1" tabindex="0"> <div class="kanban__card-title">Design tokens audit</div> <div class="kanban__card-text">Sweep 82 tokens for drift</div> <div class="kanban__card-foot"> <span class="kanban__card-tags badge badge--primary">docs</span> <span class="kanban__card-date">Aug 24</span> </div> </article> </div> <button class="kanban__add" data-col-add="todo">+ Add card</button> </div> </div>

-20%

Design System Starter

★★★★☆

$29 $39

Token Explorer

★★★★★

$49

<div class="shop__card"> <div class="shop__card-image"><img src="product.jpg" alt=""></div> <span class="shop__card-badge badge badge--danger">-20%</span> <div class="shop__card-body"> <div class="shop__card-title">Design System Starter</div> <div class="shop__card-rating">★★★★☆</div> <div class="shop__card-price">$29 <span class="shop__card-price--old">$39</span></div> </div> </div>

Open Drawer

<label class="btn btn--neutral" for="d1">Open Drawer</label> <input type="checkbox" class="drawer__toggle" id="d1"> <label class="drawer__backdrop" for="d1"></label> <div class="drawer__panel"> <div class="drawer__head"> <h3 class="drawer__title">Panel</h3> <label class="drawer__close" for="d1"><span class="ic ic-close"></span></label> </div> <div class="drawer__body">...</div> </div>

<button class="btn btn--neutral" data-modal-open="demo-modal">Open Modal</button> <div class="modal" id="demo-modal"> <div class="modal__dialog"> <div class="modal__header"> <h3 class="modal__title">Confirm Action</h3> <button class="modal__close"><span class="ic ic-close"></span></button> </div> <div class="modal__body">...</div> <div class="modal__footer"> <button class="modal__btn">Cancel</button> <button class="modal__btn modal__btn--primary">Confirm</button> </div> </div> </div>

Starter

^$9

per month

5 projects
1 GB storage
Basic analytics
Priority support
Custom domain

Project Kickoff

Initial architecture defined. Token system designed with 82 tokens powering all 9 layers.

Mar 2026

First 8 Components

Slideshow, progress bars, toggle, tabs, charts, toast, tooltip, and breadcrumbs — all pure CSS.

Jun 2026

23 Components Complete

Extended to 23 components across 6 categories. Theme engine supports 5 presets with live switching.

Jul 2026

Export Engine v1

Selective CSS export: cherry-pick components, bundle with base framework + chosen theme. One download.

<div class="timeline"> <div class="timeline__item timeline__item--active"> <div class="timeline__dot"></div> <div class="timeline__content"> <div class="timeline__time">Jun 2026</div> <h4 class="timeline__title">Milestone</h4> <p class="timeline__desc">...</p> </div> </div> </div>

<span class="tooltip" data-tip="Tooltip text here" tabindex="0"> hover me </span>

Right-click anywhere in this box

<div data-ctx-menu> Right-click here <div class="ctx-menu ctx-menu--soft"> <div class="ctx-menu__label">Actions</div> <button class="ctx-menu__item">Edit<span class="ctx-menu__shortcut">Ctrl+E</span></button> <hr class="ctx-menu__sep"> <button class="ctx-menu__item ctx-menu__item--danger">Delete</button> </div> </div>

SM

AN

KB

JD

RT

+5

Default Primary Success Warning Danger 14

<span class="badge badge--default">Default</span> <span class="badge badge--primary">Primary</span> <span class="badge badge--success">Success</span> <span class="badge badge--warning">Warning</span> <span class="badge badge--danger">Danger</span> <span class="badge badge--primary badge--count">14</span> <span class="badge badge--dot badge--success" title="Online"></span>

Design Tokens

82 design tokens drive every component. Change one theme file to restyle the entire library.

Export Engine

Select components, pick a theme, download a single CSS file. No build tools needed.

No Image Card

★★★★☆

Cards work without images too. Add a rating between the title and text for review-style cards. The body fills the full width.

Horizontal — image beside content

Horizontal Card

Image sits on the left, content flows on the right. Body is vertically centered for balanced reading. Collapses to stacked on narrow containers.

Horizontal Reversed

Flexible ★★★★☆

Same layout, image on the right. Add .card--horizontal-reverse to flip the direction. Title, badge, and star rating share one row — divider separates metadata from body text. Works with all card variants.

<div class="grid grid-auto-fit gap"> <div class="card card--hoverable"> <img class="card__image" src="cover.jpg" alt=""> <div class="card__body"> <h4 class="card__title">Design Tokens</h4> <p class="card__text">82 design tokens drive every component.</p> </div> <div class="card__footer"> <span class="badge badge--primary">v2.4</span> </div> </div> <div class="card card--hoverable"> <div class="card__body"> <h4 class="card__title">No Image Card</h4> <span class="card__rating">★★★★☆</span> <p class="card__text">Cards work without images too.</p> </div> <div class="card__footer"> <span class="badge badge--default">Rating</span> </div> </div> </div>

Project	Owner	Status	Updated
Token Engine	Ana	Active	2h ago
Export CLI	Ben	Review	5h ago
Theme Builder	Chen	Active	1d ago
Legacy Docs	Dana	Archived	12d ago
CDN Setup	Eli	Active	3d ago

<div class="table-wrap"> <table class="tbl tbl--striped tbl--responsive"> <thead> <tr><th scope="col">Project</th><th scope="col">Owner</th><th scope="col">Status</th><th scope="col">Updated</th></tr> </thead> <tbody> <tr> <td data-label="Project">Token Engine</td> <td data-label="Owner">Ana</td> <td data-label="Status"><span class="tbl-badge tbl-badge--success">Active</span></td> <td data-label="Updated">2h ago</td> </tr> </tbody> </table> </div>

Name: Sam Intelco
Email: sam@intelco.com
Company: intelco
Status: Active

Repository: github.com/exsa/framework
Version: v1.0.0-rc.1
License: MIT

<dl class="data-list data-list--bordered"> <div class="data-list__item"> <dt class="data-list__label">Name</dt> <dd class="data-list__value">Sam Intelco</dd> </div> <div class="data-list__item"> <dt class="data-list__label data-list__label--success">Status</dt> <dd class="data-list__value"><span class="badge badge--success">Active</span></dd> </div> <div class="data-list__item"> <dt class="data-list__label data-list__label--primary">Repository</dt> <dd class="data-list__value">github.com/exsa/framework</dd> </div> </dl>

HORIZONTAL

Tight spacing

Default spacing

Loose spacing

After lg separator

VERTICAL (in a toolbar)

EXSA Features Docs Themes v1.0.0-rc.1

Code Block

Syntax-highlighted code block with a copy-to-clipboard button. The .code-block__header shows a language label; the copy button sits beside it. Clicking the button copies the <code> content and shows a green "Copied!" checkmark for 2 seconds. Omit the header with .code-block--no-header — the copy button overlays the top-right corner of the code area. Add .code-block--sm for a compact variant with smaller padding and font. Uses --color-bg-secondary for the background, --color-link for hover, and --color-success for the copied state. Requires ~86 lines of JavaScript for the clipboard API.

<div class="card card--hoverable">
  <img class="card__image" src="cover.jpg" alt="">
  <div class="card__body">
    <h4 class="card__title">Design Tokens</h4>
    <p class="card__text">82 design tokens drive every component.</p>
  </div>
  <div class="card__footer">
    <span class="badge badge--primary">v2.4</span>
  </div>
</div>

/* EXSA theme token reference */
:root {
  --color-bg:           #fff;
  --color-bg-secondary: #e9e9e9;
  --color-text:         #000;
  --color-link:         #118bee;
  --color-success:      #16a34a;
  --color-danger:       #dc2626;
  --border-radius:      5px;
  --box-shadow:         2px 2px 10px;
}

.btn { display: inline-flex; align-items: center; gap: .4em; }
.btn--primary { background: var(--color-link); color: #fff; }

Invoice #1042 paid

by Acme Corp · $1,240

09:41

Deploy delayed

CI queue full

08:12

Payment failed

Card expired

17:03

Backup completed

Nightly job

03:00

<div class="activity"> <div class="activity__group"> <div class="activity__header">Today</div> <div class="activity__list"> <div class="activity__item"> <div class="activity__body"> <div class="activity__title">Invoice #1042 paid</div> <div class="activity__text">by Acme Corp · $1,240</div> </div> <span class="activity__time">09:41</span> </div> <div class="activity__item activity__item--warning"> <div class="activity__body"> <div class="activity__title">Deploy delayed</div> <div class="activity__text">CI queue full</div> </div> <span class="activity__time">08:12</span> </div> <div class="activity__item activity__item--danger"> <div class="activity__body"> <div class="activity__title">Payment failed</div> <div class="activity__text">Card expired</div> </div> <span class="activity__time">17:03</span> </div> <div class="activity__item activity__item--muted"> <div class="activity__body"> <div class="activity__title">Backup completed</div> <div class="activity__text">Nightly job</div> </div> <span class="activity__time">03:00</span> </div> </div> </div> </div>

No projects yet

Create your first project to get started.

No results

Try a different search term.

<div class="empty-state empty-state--bordered"> <span class="empty-state__icon"><span class="ic ic-inbox"></span></span> <h3 class="empty-state__title">No projects yet</h3> <p class="empty-state__text">Create your first project to get started.</p> <div class="empty-state__actions"> <button class="btn btn--primary">New project</button> <button class="btn btn--outline">Import</button> </div> </div>  <div class="empty-state empty-state--sm"> <span class="empty-state__icon"><span class="ic ic-search"></span></span> <h3 class="empty-state__title">No results</h3> <p class="empty-state__text">Try a different search term.</p> </div>

1:26 / 4:02

Video Gallery

Responsive grid of video cards with thumbnail previews, play button overlay, and duration badges. Set the YouTube embed URL via data-video on each .video-gallery__card. Click any card to open it in a fullscreen modal player with the embedded video. Each card shows a thumbnail, play icon overlay, duration badge, title, and metadata line. Requires ~54 lines of JavaScript for the modal player. Colors use --color-link for the play icon, --color-bg-secondary for duration badges, and --border-radius for cards.