Textarea field
A labelled multi-line plain-text field: Required or Optional marker, hint that states any maxlength, rows, vertical resize, and a footer row with the error at the start and a counter at the end.
- Control
- No additional dependencies
Components
A little less building from scratch. Website sections for Svelte 5 and Tailwind CSS 4. Preview a design, inspect its requirements, then retrieve the source yourself or through your agent. Each one is built by an agent and argued over by another; see how.
Category: All components
Components
73–96 of 111 components
Toggle button
A button that holds an on or off state with aria-pressed and a label that never changes. Off is a quiet outlined surface; on fills with the accent and its leading mark fills and ticks, so the state reads in shape as well as colour.
- Control
- No additional dependencies
Toggle group
A labelled set of toggle buttons with single or multiple selection: one hairline track with accent plates for the pressed items, or spaced buttons that wrap. Arrow-key roving focus, icon-only hints, no dependencies.
- Control
- No additional dependencies
URL field
A web address field that adds https:// on blur and says so, or shows a fixed https:// prefix, with scheme and host rules. javascript: and data: are always refused. A native type=url input before hydration.
- Control
- No additional dependencies
Combobox
A select-only combobox: type to filter a popup list by label or alternate names, choose with the arrow keys and Enter, and post the value. Local filtering by default, or a debounced, abortable onSearch.
- Control
- bits-ui ^2.19.3
Switch
An on-or-off setting that takes effect at once, as a role="switch" button with a fixed label and optional description. Off is an outlined track with a cross; on fills with a check. Async saves show pending and move back on failure.
- Control
- No additional dependencies
Floating action
One action held in a bottom corner of the viewport, such as Talk to sales or Back to top. It can wait for a scroll threshold, closes to its icon on phones, and respects safe-area insets.
- Control
- No additional dependencies
Card shell
A card container with optional media, header, body and footer. Outline, elevated or muted surface, three padding presets, and an optional whole-card link that stays one tab stop. Footers line up across a row.
- Control
- No additional dependencies
Heading
An h1 to h6 whose visual size is chosen separately from its outline level, on an eight-step scale where leading and tracking tighten as the type grows. Optional eyebrow; inherits the page's font and colour.
- Control
- No additional dependencies
Section wrapper
A page section with four tones, four spacing presets and four container widths. Same-tone neighbours merge into one band, anchor jumps clear a sticky header, and a heading id makes it a named region.
- Control
- No additional dependencies
Aspect-ratio frame
A frame that reserves space at a fixed ratio (16:9, 4:3, 3:2, 1:1, 9:16, 21:9) for an image, video or iframe, so nothing shifts as it loads. Cover or contain, a crop-marked placeholder, an optional caption.
- Control
- No additional dependencies
Badge
A short static label that classifies an item, such as Beta or a category name. Six tones, soft, solid and outline fills, two fixed heights, an optional icon or dot; one line, truncated when too long.
- Control
- No additional dependencies
Body text
Body type for one run of ordinary text: three size steps with their own leading and tracking, three tones mixed from the page colour, an em measure, and a p, span or div of your choosing.
- Control
- No additional dependencies
Brand lockup
A logo mark and brand name set as one unit, side by side or stacked, at three sizes, with an optional tagline and an optional link home. The mark keeps its ratio; the name is read once.
- Control
- No additional dependencies
Formatted number
Formats one supplied number as locale text through Intl.NumberFormat, with the locale always explicit: decimals, percentages, currency, units and compact notation, inside a <data> element that keeps the raw value.
- Control
- No additional dependencies
Full-bleed section
A band whose colour, image or video runs to both edges of the viewport while its content keeps the page's edge. Four overlays for text contrast, minimum heights that never clip, and a breakout mode for article columns.
- Control
- No additional dependencies
Icon
One inline SVG, from path data or child shapes, with a required label that makes the accessibility choice explicit: null hides it, a string names it. 1em by default, five fixed steps, fill or stroke, currentColor.
- Control
- No additional dependencies
Inset panel
A tinted panel that sets a note, warning, tip or key figure apart inside a page. Five tones, an optional icon hung level with the first line above a thin rail, an optional title, and three padding presets.
- Control
- No additional dependencies
Lead paragraph
The introductory paragraph under a page title or hero headline: one p set a step above body copy, on a measure set in em so it holds about sixty characters at either size. Inherits font and colour.
- Control
- No additional dependencies
Section divider
A divider between content areas: a hairline rule, a rule split by a visible label such as 'or' or 'Week 2', or a wave or slant that carries one section tone into the next without a seam.
- Control
- No additional dependencies
Rating display
A supplied rating as stars or a bar, the score with its scale in words, and an optional label, review count link and source. Floors partial fills, clamps to the scale, and shows text when there are no reviews.
- Control
- No additional dependencies
Status badge
Renders a supplied status key as a label, a tone and a shape, so state never rests on colour alone. Each tone has its own icon or compact mark; unknown keys fall back to a neutral label.
- Control
- No additional dependencies
Avatar
One person or organisation as a fixed-size circle or rounded square: a photo, falling back to initials on a stable colour, then a generic icon. Five sizes, an optional presence dot and a decorative mode for use beside a visible name.
- Control
- No additional dependencies
Avatar group
A row of avatars for the people on a board, an event or a course: overlapping or spaced, up to a limit, then a +N bubble counted from the real total, with optional caption text. Initials stand in for missing photos.
- Control
- No additional dependencies
