Components

1–24 of 111 components

Modal dialog

A modal dialog for a focused task: title, optional description, a body that scrolls on its own and a raised footer band of actions, with focus held inside and returned to the opener.
- Control
- bits-ui ^2.19.3
Page container

One element that centres content at a named width (prose, narrow, default, wide or full) and keeps a 16, 24 or 32 px gutter from the screen edge. No vertical space, no background.
- Control
- No additional dependencies
Site header

A responsive site header with a brand link, primary links with one level of dropdowns, a call to action, optional actions and a small-screen drawer.
- Section
- No additional dependencies
- Dark mode
Site shell

The outer frame of every page: a skip link, optional announcement bar, header, main landmark and footer, with the footer held at the bottom of short pages and anchors kept clear of a sticky header.
- Section
- No additional dependencies
Split layout

Two content regions side by side on proportional columns, stacking to one column in a chosen order below a breakpoint measured on the component's own width. The DOM order is always primary then secondary.
- Control
- No additional dependencies
Announcement bar

A thin band above the site header with one short message, an optional badge and link, an optional dismiss button remembered per message id, and an expiry the server can decide.
- Section
- No additional dependencies
Content-and-sidebar layout

A fluid main column beside a fixed-width sidebar landmark, parted by one full-height hairline. The sidebar can stick below a page header and scroll on its own, and stacks before or after the content in a narrow column.
- Control
- No additional dependencies
Mobile navigation drawer

A Menu button that opens a native modal drawer: large primary links, smaller secondary links and one call to action pinned to the foot, with focus handling, scroll lock and close on link.
- Control
- No additional dependencies
Price display

One price, formatted from a number with Intl.NumberFormat for an explicit locale and currency, with an optional From prefix, billing unit and tax qualifier on the amount's baseline, and one full phrase for screen readers.
- Control
- No additional dependencies
Primary navigation

A horizontal row of a website's main destinations with a current-page bar or pill, and a More disclosure that collects the trailing items that do not fit.
- Control
- No additional dependencies
- Dark mode
Sticky region

Keeps one block in view while its parent scrolls: a contents rail or order summary held below a sticky header, or a bottom action bar with safe-area padding. Pure CSS, from a chosen breakpoint.
- Control
- No additional dependencies
Dropdown navigation

A row of top-level links where some items are buttons that open a compact panel of related links, with optional one-line descriptions, an overview link for the section's own page and a footer shelf.
- Control
- No additional dependencies
- Dark mode
Split-media hero

An opening section with the headline, copy and actions beside an image or a muted looping video. The media reserves its aspect ratio, stacks under the copy on phones and swaps sides with one prop.
- Section
- No additional dependencies
Product-screenshot hero

An opening section with the headline and actions above a large product screenshot in a browser frame, a phone frame or none. The frame reserves the image's shape and can run into the section's bottom edge.
- Section
- No additional dependencies
Simple pricing grid

Compare up to three plans a row and lift the recommended one. Prices, feature lists and buttons line up across cards; each button links to your signup, checkout or contact page.
- Section
- No additional dependencies
Billing period switcher

A monthly, quarterly or annual switch for a pricing section: native radios styled as one pill track, a saving note per option, and the chosen period's payment commitment beneath. It changes displayed prices only.
- Control
- No additional dependencies
Pricing comparison table

A feature matrix comparing two to five plans across grouped rows. Every cell is included, not included, limited with a note, or a written value, and the highlighted plan runs as one band from header to last row.
- Section
- No additional dependencies
Feature grid

A feature section: eyebrow, heading and intro over a 2, 3 or 4 column grid of features, set as cells of one hairline-ruled panel, a filled panel or ruled cards, with rows aligned by subgrid.
- Section
- No additional dependencies
Alternating feature sections

A product tour as a run of text-and-media rows: a compact text column beside a larger framed image, the image swapping sides row by row from lg and stacking under the copy on phones.
- Section
- No additional dependencies
Feature spotlight

One capability given a full section: eyebrow, heading, detailed copy, check-marked points and up to two actions beside a large screenshot or video set in a quiet frame. Media swaps sides at lg; copy stays first.
- Section
- No additional dependencies
Minimal footer

A single-band site footer: the brand and a short row of links on one line, with the copyright and policy links beneath a hairline on the same two edges. Inline or centred.
- Section
- No additional dependencies
Customer logo strip

One row of customer or partner logos under a short label, each sized by its proportions so wordmarks and square marks carry equal weight. Static wrap or a slow, pausable marquee.
- Section
- No additional dependencies
Feature tabs

A tabbed feature section: an introduction, an underline tab row, and a panel with the feature copy beside a framed screenshot or product surface, or a points list when there is no media.
- Section
- bits-ui ^2.0.0
Multi-column footer

A site footer with a brand block, contact details and two to five headed link columns, each hung from one shared rule, over a small-print row with copyright and legal links.
- Section
- No additional dependencies