Components

A clear call to action, with bound labels, variants and keyboard focus.

Connect content with an accessible, theme-aware inline link.

Give a form control a clear label and required marker.

A text field with a label, placeholder, validation and reactive feedback.

Write a message with a themed multiline field.

Enter a verification code with automatic advance and paste support.

Choose one option from a keyboard-accessible popover.

Search a list and select an option.

Group actions in a compact menu.

Show actions at the pointer or keyboard-focused target.

Organise application commands in adjacent menus.

Mix direct navigation and grouped resource links.

Make a choice that can be checked, cleared and bound to application data.

Choose one option from a labelled group.

Turn a setting on or off with clear, theme-aware feedback.

Keep an independent action selected or unselected.

Switch text alignment with accessible icon buttons and see the content respond.

Edit a bounded number with typing, step controls or the mouse wheel.

Adjust a value along a track, with a bound label and readout.

Scrub a number directly with a compact, draggable gauge.

Choose a lower and upper bound together.

Browse months, select a date and mark events in an inline calendar.

Choose a calendar date in a compact popover.

Time Picker built with Blinc.

Choose a colour with a saturation field, hue, opacity and saved swatches.

Switch between related views in the same space.

Organise related questions into expandable sections.

Reveal supporting details without leaving the page.

Keep the current location visible in a navigation trail.

Browse a larger collection a page at a time.

Keep the main sections of a workspace in a collapsible rail.

Explain a control with a short hint on hover.

Reveal supporting information alongside its trigger.

Keep a small set of preferences close to the control.

A focused confirmation step, with dismissal and trigger focus restoration.

A bottom sharing panel with project members, guest permissions and a clear completion action.

Inspect a project’s files in a side drawer with selectable rows, file details and sync status.

Confirm a completed action without interrupting the workflow.

Keep important feedback visible within the page.

Compare all five semantic variants in soft, solid and outline styles, with an optional status icon.

Represent people with initials, status and grouped avatars.

Show a changing value with an eased, CSS-styled progress bar.

Indicate work in progress with theme-timed motion.

Reserve a calm placeholder while content loads.

A project summary with a clear heading, a short brief, reviewer avatars and its current review status.

Compare eight common ratios, then change the native aspect-ratio layout constraint directly with CSS.

Separate related groups of content with a themed divider.

Let people divide space between neighbouring panels.

Browse overflowing content in a themed scroll container.

Browse thousands of rows while mounting only the visible window.

Present related values with themed headings, rows and cells.

Browse hierarchical content with expansion and selection.

Line, area, bar, pie, donut and specialised charts, each with its own interactive example.

Build a readable hierarchy with a shared type scale.

Structure short sequences with bullets and numbers.

Give quoted content a clear place in the reading flow.

Render formatted content directly in the native layout.

Present highlighted source without an editable field.

Edit source with syntax highlighting, line numbers, search and selection.

Write formatted prose with headings, emphasis and a selection toolbar.

A compact keyboard shortcut reference with grouped keycaps for command search, documents, saving and preferences.

Use crisp vector icons that inherit the surrounding theme.

Draw gradient fills, layered shapes, a colour palette and a progress bar with canvas-rendered text.

The detailed Fennec fox from the original SVG gallery, rendered at three sizes with theme-aware tints.

Explore the interactive notched menu bar, bulge navigation, angle cuts and scooped dock from the Notch example.

Display raster images with fitting, cropping and theme-aware surfaces.

Display audio amplitude and played progress with theme-aware colours.

Audio transport, volume controls and an optional waveform.

Native video surfaces with shared transport, seeking and volume controls.

Recognise taps, long presses and directional swipes.

Reveal a workspace activity feed with staggered entrance and fade-out motion.