Skip to content
Hypermedia Components

Kitchen sink

Every component, live, on one page, grouped the same way as the Components sidebar. Use it to scan the whole library at a glance, sanity-check theming (try the color / density / dark switchers in the header), or jump to a component’s full docs via its heading link. Note that the density switcher’s compact / dense tiers are pointer-fine desktop presets — see Density · Touch targets before shipping them to touch users.

Actions

Section titled “Actions”

Button

Section titled “Button”

Button group · Kbd

Section titled “Button group · Kbd”
⌘K

Toggle group

Section titled “Toggle group”

Toolbar

Section titled “Toolbar”

Command

Section titled “Command”
Navigation
Go homeG H
Search

Forms

Section titled “Forms”

Field · Input

Section titled “Field · Input”

We’ll never share it.

Input group

Section titled “Input group”

Input OTP · Slider

Section titled “Input OTP · Slider”

Range

Section titled “Range”

Select · Datepicker

Section titled “Select · Datepicker”

Combobox · Multicombobox

Section titled “Combobox · Multicombobox”
  • Japan
  • United States
  • United Kingdom
  • JavaScript
  • TypeScript
  • Python

Checkbox · Radio · Switch

Section titled “Checkbox · Radio · Switch”

Rating

Section titled “Rating”
Rate

Calendar

Section titled “Calendar”

Dropzone

Section titled “Dropzone”

Attachment

Section titled “Attachment”
  • notes.md4 KB
  • report.pdf1.2 MB
  • huge.iso9.8 GB
Section titled “Navigation”

Breadcrumb · Pagination

Section titled “Breadcrumb · Pagination”

Stepper

Section titled “Stepper”
  1. Account (completed)
  2. Profile
  3. Review

Tabs

Section titled “Tabs”
Account settings.
Section titled “Menu”

Menubar · Navmenu

Section titled “Menubar · Navmenu”

Context menu

Section titled “Context menu”
Right-click me

Tree

Section titled “Tree”
  • src
    • app.js

Overlays

Section titled “Overlays”

Dialog · Drawer · Popover

Section titled “Dialog · Drawer · Popover”

Dialog

A native modal dialog.

Drawer

Slides in from the edge.

A light-dismiss popover.

Tooltip · Hovercard

Section titled “Tooltip · Hovercard”
A short tooltip.@ada
Ada Lovelace
@ada
Mathematician & first programmer.

Data display

Section titled “Data display”

Table

Section titled “Table”
NameRoleStatus
AdaEngineerActive
BeaDesignerAway

Datagrid

Section titled “Datagrid”
NameRoleStatus
AdaEngineerActive
BeaDesignerAway

Card · Avatar

Section titled “Card · Avatar”
Card title
A generic surface for grouped content.
ABC

Item

Section titled “Item”
Quarterly reportUpdated 2 days ago

Badge

Section titled “Badge”
InfoSuccessWarningError

Chip

Section titled “Chip”
  • read:members
  • write:members
  • admin:realm

Separator

Section titled “Separator”

Above

Below

Alternative

Timeline

Section titled “Timeline”
  1. Deploy finished
  2. Build started

Chat

Section titled “Chat”
  1. Show me the failing checks.
  2. Context switched to project “ops”.
  3. Two checks are red: lint and unit.

Accordion

Section titled “Accordion”

What is Hypermedia Components?

A semantic CSS + htmx UI kit for hypermedia applications.

How do I install it?

pnpm add @hypermedia-components/core

Collapsible

Section titled “Collapsible”

Show details

This region is hidden until the user opens it.

Feedback

Section titled “Feedback”

Alert

Section titled “Alert”
Saved

Your changes were saved successfully.

Toast · Progress · Spinner

Section titled “Toast · Progress · Spinner”

Meter

Section titled “Meter”
42%82%97%

Skeleton

Section titled “Skeleton”

Empty state

Section titled “Empty state”

No results

We couldn’t find anything matching your search.

Layout

Section titled “Layout”

Aspect ratio

Section titled “Aspect ratio”
16 / 9

Scroll area

Section titled “Scroll area”

Scroll me.

Two

Three

Four

Five

Six

Splitter

Section titled “Splitter”
Left
Right

Shell

Section titled “Shell”

A full application shell, scaled into a box here. On a real page it fills the viewport and the sidebar collapses to an off-canvas overlay on mobile.

Acme
Main content scrolls independently of the chrome.
© Acme
Section titled “Carousel”
Slide 1
Slide 2
Slide 3

Layout patterns

Section titled “Layout patterns”

Not components — the responsive primitives from Fundamentals · Layout and the table-overflow helper, shown here for completeness.

Layout utilities

Section titled “Layout utilities”

Intrinsically responsive primitives — no breakpoints. Resize the window and the grid reflows, the cluster wraps, the sidebar collapses.

A
B
C
D
  • tag-one
  • tag-two
  • tag-three
  • tag-four
Main content keeps its width and wraps the sidebar when space runs out.

Table scroll wrapper

Section titled “Table scroll wrapper”

A wide table in .hc-table-scroll confines the overflow to a scroll strip instead of pushing the page sideways. Scroll the strip below.

OrderCustomerEmailCreatedStatusTotal
#1001Ada Lovelaceada@example.com2026-05-01Shipped$129.00
#1002Alan Turingalan@example.com2026-05-02Pending$42.50

See also

Section titled “See also”