Component catalog

Bootstrap coverage rebuilt with Tachyons Neo utilities.

This page uses tachyons.css, app.css, and Stimulus from a CDN. Most styling is utility markup; the small custom CSS block only handles missing browser-state primitives like floating labels, spinners, and modal backdrops.

CSS

Utility first

Cards, buttons, navigation, tables, lists, badges, and forms are composed from Tachyons Neo utilities.

Behavior

Stimulus controllers

Small controllers manage toggles, tabs, carousel, modal, drawers, toast, range output, validation, and scrollspy.

Scope

Bootstrap-like

Includes accordion, alerts, badges, breadcrumbs, buttons, cards, carousel, drawers, forms, modal, navs, and more.

Controls

Buttons, groups, badges, breadcrumbs, pagination

Action components with size, state, and grouping variants.

Button variants

Badges and navigation helpers

Default Primary Done Queued Failed

Inputs

Forms, input groups, floating labels, validation

Native controls with token colors and a Stimulus validation pass.

Name

Required for validation demo.

Email

Select

Floating label

Textarea

Input group

@

Range 64

Checks Remember preferences Disabled check

Radios Comfortable Compact

File

Color

Navigation

Navbar, navs, tabs, pills, dropdowns

Tabs use Stimulus to manage selected state, utility classes, panels, and ARIA attributes.

Pill navigation mirrors Bootstrap nav-pills with Tachyons utility classes.

Feedback

Alerts, toasts, progress, spinners

✓

Saved successfully

This alert can be dismissed with its close button.

!

Review recommended

Contextual alert color with utility classes.

x

Payment failed

There was a problem with the transaction.

Toast stack

Click the button to insert a toast into the fixed stack.

Progress

Overlays

Dropdowns, modal, drawers, tooltip, popover

Menus and micro overlays

Modal dialog

Native <dialog> with Stimulus open and close actions.

Offcanvas drawers

Top, right, bottom, and left drawer positions cover Bootstrap offcanvas patterns.

Content

Cards, carousel, list groups, tables, collapse

Card title

New

Card header, media, body, links, and footer patterns are represented with utility markup.

Primary action Secondary

Card footer

First slide

Carousel component

Previous, next, and indicators are managed by Stimulus.

List group

Active item Includes supporting copy 14 Second item 8 Third item 3

Accordion and collapse

This panel is visible by default and collapses when another item opens.

Responsive table

Project	Status	Owner	Budget
Catalog rebuild	Live	Mira Patel	$24,000
Checkout flow	Queued	Jonas Klein	$18,500
Notifications	Blocked	Aya Brooks	$9,200

Loading states

Placeholders and utility states

Placeholder card

Bootstrap-like component checklist

Accordion Alerts Badges Breadcrumbs Buttons Button groups Cards Carousel Close button Collapse Dropdowns Forms Input group List group Modal Navbar Navs and tabs Offcanvas drawers Pagination Placeholders Popovers Progress Scrollspy Spinners Tables Toasts Tooltips