Skip to components
MiscellaneousUIInstall DefaultExample

The neutral foundation

Default components

A hands-on catalog of 7 layouts, 3 motion demos, 12 primitives and 9 interactions. Edit a field, open a panel, or try the keyboard.

Local Shape scopes

These scopes stay square and rounded as the global Shape changes. Body portals use global Shape; this popup uses a destination inside its rounded scope.

Local square
Local rounded
Overlay anatomy and local portal checks

All of these portals explicitly use this rounded scope. Each attached panel rounds only its exposed edge.

Command Palette

Search for a command to run...

Container

Border-box width caps and inherited responsive gutters.

Caps include padding: narrow 48rem, default 72rem, wide 80rem. Full keeps gutters. Gutters: 1rem → sm 1.5rem → lg 2rem.

narrow — content boundary
default — content boundary
wide — content boundary
full — content boundary
Matching base/sm/lg overrides: uniform 0.5rem gutters

Section

Independent vertical padding for major regions.

Padding, not sibling margins. Each consecutive section retains both sides. Default md: 2rem → md 3rem → lg 4rem.

none

sm

md

lg

xl

Explicit base/md/lg override: 0.5 / 1 / 1.5rem

Stack

Vertical flow with shared gaps and cross-axis alignment.

Vertical flow. Shared gaps: 0 / 0.25 / 0.5 / 1 / 1.5 / 2rem; default md, stretch.

noneSecond item
xsSecond item
smSecond item
mdSecond item
lgSecond item
xlSecond item
startVariable width item
centerVariable width item
endVariable width item
stretchVariable width item

Forwarded clicks: 0

Cluster

Horizontal groups that naturally wrap.

Wrapping is always enabled. Variable-width controls and long text remain in reading order.

noneLong metadata: TypeScript and reusable compositions
xsLong metadata: TypeScript and reusable compositions
smLong metadata: TypeScript and reusable compositions
mdLong metadata: TypeScript and reusable compositions
lgLong metadata: TypeScript and reusable compositions
xlLong metadata: TypeScript and reusable compositions
startTaller item
centerTaller item
endTaller item
stretchTaller item

Grid

Optional viewport presets, or complete local column control.

Viewport presets: 2 at lg; 3/4 use two at md then their target at lg. md = 48rem, lg = 64rem.

Target 2

Region 1
Region 2
Region 3
Region 4

Target 3

Region 1
Region 2
Region 3
Region 4

Target 4

Region 1
Region 2
Region 3
Region 4

Matching overrides replace only that modifier; base does not reset md/lg.

Region 1
Region 2
Region 3
Region 4

Narrow local region: no preset, local query columns

Region 1
Region 2
Region 3
Region 4

Bleed

Nearest-Container gutter cancellation, never viewport breakout.

Negative physical margins cancel only nearest Container gutters. Nested Bleed consumes no further scope; a nested Container starts a new one. Extra padding, grid tracks and non-stretch flows require intentional composition. Clipping ancestors still clip.

Normal content boundary · Stack intermediary

left
right
both
Direct nested Bleed: no extra extension
Wrapper → Bleed: no extra extension
Direct Container resets scope
Wrapper → Container → Stack → Bleed
One-sided nesting also consumes scope atomically
Intentionally clipped by this content-width wrapper
No Container: zero-extension fallback

Presets

Six equivalent entrances with shared timing and geometry.

Replay remounts this demo only. Focus always bypasses motion.

slide-up

A quiet entrance, ready to use.

slide-down

A quiet entrance, ready to use.

slide-left

A quiet entrance, ready to use.

slide-right

A quiet entrance, ready to use.

fade

A quiet entrance, ready to use.

scale

A quiet entrance, ready to use.

Timing and geometry come from registry/shared/motion/config.ts. Edit that source to change project-wide defaults.

Reveal

Viewport entrances, scoped defaults and protected custom states.

Replay remounts this demo only. Focus always bypasses motion.

Global defaults · slide-up

A quiet entrance, ready to use.

Provider fade · repeated entry

A quiet entrance, ready to use.

Nested geometry · local movement and timing

A quiet entrance, ready to use.

Custom hidden/visible states

A quiet entrance, ready to use.

Entrances begin hidden and animate into view. Custom hidden/visible variants replace preset movement; focus and reduced motion still reveal immediately. For arbitrary controllers, gestures or semantic elements, use direct motion.* (consumer-owned safeguards). The shared motion.css exposes opacity and transform with JavaScript disabled. Enabled-JS hydration failures and nonstandard custom fallback properties are not covered.

Stagger

Native staggered entrances through Layout, with immediate focus access.

Replay remounts this demo only. Focus always bypasses motion.

A small, useful composition

One group observer. StaggerItem is the actual Grid child.

Plan

A quiet entrance, ready to use.

Build

A quiet entrance, ready to use.

Review

A quiet entrance, ready to use.

Group delay applies once; items inherit geometry and timing, not an extra delay. Nested groups observe and sequence independently. Put span/flex/width classes on the wrapper; use direct motion.li/span for list or inline semantics. Sidebar motion belongs inside its regions. Bleed is not clipped; prefer fade or vertical entrances near outer edges. Transforms temporarily change containing blocks for fixed/sticky descendants; keep viewport overlay hosts outside animated regions.

Button

Six visual variants, icons, and disabled actions.

Actions taken: 0

Card

A complete surface for a project summary.

Abstract neutral project cover
Developer portfolio
A small interface with a clear purpose.
A personal home for projects, skills, and a thoughtful introduction.
View portfolio

Badge

Compact labels in every available variant.

defaultsecondaryoutlineghostdestructivelink

Input

Empty, filled, disabled, and invalid text fields.

Use a complete email address.

Input Group

Inline and block addons, with a working local draft action.

⌘ K
Local draft · no message is sent
0 characters

No note saved yet.

/
https://

Enter a domain for your project.

Textarea

Multiline editing and disabled content.

Select

Choose a project framework from a keyboard-accessible list.

Checkbox

Independent preferences, checked and unchecked.

Radio Group

One choice from a set of delivery options.

Delivery frequency

Switch

On, off, and disabled preferences.

Tabs

Switch between project overview and implementation notes.

A reusable foundation for clear, accessible interfaces.
A reusable foundation for clear, accessible interfaces.

Accordion

Expandable answers about the component system.

The registry is the source of truth. This showcase imports it directly.

Dialog

A focused conversation with an accessible modal.

Sheet

A side panel for project details.

Drawer

A bottom panel that supports swipe dismissal.

Popover

Contextual settings anchored to their trigger.

Tooltip

Helpful context on hover or keyboard focus.

Command

Filter commands and select with arrows and Enter.

Selected command: None

Sonner

Real notifications for success, errors, and undoable actions.

Back to top

A scroll-aware control that returns to the top and moves focus to a meaningful target. Scroll inside the frame.

Open direct view

Floating actions

A fixed single action or an expandable disclosure of actions that opens toward the page interior. Scroll and interact inside the frame.

Open direct view