Component catalogue
Every registered component, rendered with default props. Cycle theme and mode to verify all four skins.
Animation
8 components
Gesture & Hover
Micro-interactions on hover, focus, and click. Motion handles enter/leave without CSS keyframes.
Loading Morphs
Motion.timeline() morphs skeleton placeholders into real content. Staged entrance with stagger.
Logo Scatter
Pill-shaped logo pieces scatter across the viewport on a loop, then sway gently before reassembling. Built with Motion v10 WAAPI transforms.
Page Transitions
Simulate route transitions with Motion.timeline — outgoing content exits, incoming content enters.
Scroll Progress
Motion.scroll() links animation progress to page scroll position. Zero event listeners, zero JS overhead.
Spring Physics
Motion.spring() produces physics-based easing. Tune stiffness, damping, and mass for wildly different feels.
Text Reveal
Three distinct character-level reveal effects: blur rise, scale scatter, and wave rotation.
inView Reveals
Motion.inView() triggers animations when elements enter a scrollable viewport — zero scroll event listeners.
Data
25 components
Bar Chart
Pure SVG bar chart rendered server-side. No JS, no canvas. Accepts any data slice.
Data Grid
Sortable, filterable, paginated data table. All logic client-side — no server roundtrip for sort/filter.
Donut Chart
Pure-SVG donut chart using stroke-dasharray. Includes legend, center label, and hover tooltips.
Gauge / Meter
SVG circular gauge with 270° arc. Optional tick marks. Server-side rendered — zero JS.
GitHub Heatmap
GitHub-style contribution heatmap. SVG rendered server-side from date/value pairs. Zero JS, zero dependencies.
Horizontal Timeline
CSS scroll-snap horizontal timeline. Dot + card per item. No JS — pure CSS scroll.
Infinite Scroll
Sentinel div triggers Datastar @get when it enters the viewport. Server appends HTML. One Datastar attribute — no custom JS.
Lazy Image
IntersectionObserver lazy-loads image on scroll. Skeleton placeholder fades to image on load.
Line Chart
Pure-SVG multi-series line/area chart rendered server-side. Smooth bezier curves, optional grid, dots, and fill.
Paginated Pages
Animated page container driven by the Pagination signal — replays an entrance animation once per page switch.
Pie Chart
Pure SVG solid pie chart using arc paths. Legend with percentage labels. No JS.
Radar Chart
Multi-series radar/spider chart rendered as inline SVG. Server-side Go math — zero JS, zero canvas.
Snake Timeline
Serpentine timeline where items flow left→right in odd rows and right→left in even rows. Curved connectors bridge the row ends. Great for long event histories without excessive vertical scroll.
Sortable List
Drag-to-reorder list using HTML5 drag-and-drop API. Optional grab handle icon. OnChange callback with new value order.
Sparkline
Tiny inline SVG trend line for use inside stat cards, tables, or dashboard tiles.
Stat Card
Key metric display: label, large value, optional delta with up/down coloring.
Syntax Highlighter
Server-side syntax highlighting via chroma. Zero client JS — inline styles. Supports 300+ languages, 40+ themes.
Tree View
Hierarchical collapsible tree using native <details> elements. No JS, keyboard accessible.
Virtual List
Scrollable list using CSS content-visibility:auto for zero-JS viewport culling. Browser skips layout/paint for off-screen rows.
Datastar
9 components
Animation (Motion)
Motion v10 (window.Motion, 24 KB) provides animate(), timeline(), stagger(), and inView(). Call from any Datastar expression.
Effects & Refs
data-effect runs side-effects when signals change. data-ref captures element references. data-init fires once on mount.
Events
data-on:EVENT handles DOM events. data-on-interval runs on a timer. data-on-intersect fires on viewport entry.
Fetch (SSE)
@get and @post send signals to the server via SSE. data-indicator shows loading state. The connection is request-response (not persistent).
Modifiers
Event modifiers after __ control how handlers fire: debounce, throttle, window, document, stop, prevent, once, passive.
Patterns
Real-world patterns: client-side search filter, multi-step wizard, optimistic toggle.
Reactivity
data-text, data-show, data-bind, data-attr, data-style, data-class — six ways to reflect signal state in the DOM.
Server Push (SSE)
PatchElements morphs DOM fragments. PatchSignals updates client state. data-on-signal-patch reacts to incoming patches.
Signals
data-signals declares reactive state. data-computed derives new signals from expressions. Signals scope to their subtree.
Feedback
8 components
Alert
Contextual banner: info / success / warning / danger. Optional dismiss button.
Empty State
Centred placeholder for zero-data views. Icon, title, message, action buttons.
Loading Overlay
Full-surface spinner overlay driven by a Datastar signal. Covers content while async operations run.
Notification Badge
Count badge overlaid top-right on any content — icons, buttons, avatars.
Notification Stack
Fixed-position persistent notification feed. Add via window._pushNotification(). Auto-dismisses with duration.
Shimmer
Animated gradient loading placeholder. Lighter than Skeleton — just the shimmer effect with configurable size and shape.
Spinner
CSS-animated loading indicator. Six variants × three sizes. Swiss + Ink variants match their themes.
Form
22 components
Calendar Picker
Custom styled date picker. Month grid with keyboard-friendly day selection. Submits ISO 8601 value via hidden input. No external library.
Color Input
Styled native color picker with optional hex label. Datastar signal tracks the selected value.
Combobox
Filterable select — type to search, arrow keys to navigate, Enter to select. Hidden input carries the value.
Contact Form
Full contact form: fields, validation error display, altcha captcha, honeypot, SSE submit.
Date Input
Styled native date picker. Uses browser-native calendar popup. Same visual style as other inputs.
File Drop Zone
Drag-and-drop file upload area. Shows file names on selection, drag-over highlight state.
File Input
Styled file upload trigger with filename feedback. Wraps a hidden native input.
Multi Select
Chip-based multi-value selector with dropdown. Selected values displayed as removable chips; hidden inputs carry values for form submission.
Number Input
Stepper with − and + buttons. Min/max/step enforced via Datastar expressions.
OTP Input
One-time-password entry — single-digit boxes with auto-advance, backspace navigation, and paste support.
Password Input
Password field with show/hide toggle. Datastar signal tracks visibility; data-attr swaps input type.
Range Pair
Min/max dual-handle range selector. Two overlapping range inputs with Datastar signals enforcing low ≤ high.
Search Input
Search field with icon prefix, optional Datastar debounced @get, and clear button.
Tags Input
Multi-value input — type and press Enter or comma to add, × to remove. Hidden input carries comma-separated values.
Layout
19 components
Accordion
Collapsible content sections using native <details>/<summary> — no JS required.
App Shell
Sidebar + main content layout. Wraps layout.Sidebar with a flex container.
Auth Layout
Centered single-column card layout for login and register pages.
Background
Decorative CSS pattern layer. Dots, grid, lines, diagonal, cross, or gradient. Position absolute, pointer-events none.
Banner
Full-width announcement strip. Variants match semantic colors. Optional dismiss button.
Bento Grid
Mosaic CSS grid layout. BentoItem controls column and row spans. Great for dashboards, feature showcases, landing pages.
Breadcrumb
Navigation trail built from BreadcrumbItems. Last item is current page (no link).
Footer
Page footer. Structured neo-brutalist variant with brand cell, titled link columns and bottom bar — or a simple flex row via children.
Masonry Grid
CSS-columns masonry layout. Items flow top-to-bottom. Zero JS — pure CSS column-count.
Resizable Panels
Two panels with a drag handle. Pointer events, touch support, configurable split and min-size.
Sidebar
Collapsible left navigation sidebar. Datastar signal controls open/collapsed state. Width transitions smoothly.
Stepper
Horizontal multi-step progress indicator. States: complete / active / upcoming.
Table of Contents
Scroll-spy navigation for long-form content. Highlights active section via IntersectionObserver. Can auto-detect headings.
Tabs
Datastar-driven tabbed panels. Signal holds the active tab slug; switching is instant.
Overlay
11 components
Alert Dialog
Confirmation dialog with cancel/confirm. Driven by Datastar signal; confirm runs an expression before closing.
Command Palette
⌘K command palette overlay. Filterable list of actions, grouped with keyboard navigation.
Context Menu
Right-click context menu anchored to the cursor. Closes on click-outside, Escape, or item selection.
Drawer
Datastar-gated slide-in side panel. Right or left placement, three sizes.
Dropdown
Datastar-driven contextual menu. Closes on outside-click via window listener.
Hover Card
Rich content card triggered by hovering. Pure CSS — no JS, no Datastar. Ideal for user profile previews, link previews.
Lightbox
Full-screen image viewer. Click thumbnail to open, ←/→ keys navigate, click backdrop or × to close.
Popover
Positioned floating panel gated by a Datastar signal. Closes on outside-click.
Sheet
Full-edge slide-in panel. Bottom placement suits mobile; right placement suits desktop side panels.
Toast
Self-managing notification stack: auto-dismiss timer, progress bar, icons, variant tones, queue up to 6.
Primitive
45 components
Announcement Bar
Dismissable top-of-page strip. Datastar signal controls visibility.
Audio Player
Native HTML5 audio with animated Canvas waveform (40 bars), play/pause, scrub, time display. Zero external JS.
Avatar
User avatar with image or initials fallback, optional status dot, and size/shape variants.
Avatar Group
Stacked overlapping avatars with +N overflow badge for large sets.
Badge
Small pill label for counts, statuses, or tags. Variants match semantic colors.
Button Group
Horizontal group of related buttons. Attached mode collapses shared borders into a connected strip.
CTA Banner
Full-width call-to-action strip with title, description, and one or two action buttons.
Callout
Left-bordered highlight block for tips, notes, and warnings. Variants match semantic colors.
Chip
Dismissible pill tag. Click × removes from DOM or calls a custom Datastar expression.
Code Block
Styled pre/code display with language label and copy-to-clipboard button.
Collapse
Animated show/hide region driven by a Datastar signal. Max-height CSS transition, no JS.
Color Swatch
Single color preview tile. Use ColorSwatchGroup for palettes. Supports square and circle shapes.
Copy Button
Copies text to clipboard. Datastar signal flips to show checkmark feedback, resets after 2 s.
Countdown
Live countdown timer to a target datetime. Updates every second via JS setInterval.
FAB
Floating action button fixed to a viewport corner. Speed Dial variant expands a mini-action list.
Feature Card
Marketing card with colored icon box, title, and description. Optionally a link.
Flip Card
3D CSS flip on hover or Datastar-signal click. Front and back faces are fully custom content.
Gradient Text
CSS background-clip:text gradient fill. Theme-aware by default (accent → ink). Any HTML tag, any gradient angle.
Icon
Iconify-generated SVGs rendered inline. All registered icons shown below — searchable and copy-on-click.
Icon Button
Square icon-only button. Thin wrapper over Button with size=icon — adds aria-label and pass-through Attrs.
Marquee
Infinite horizontal scroll strip. CSS-only animation — items duplicated server-side for seamless loop. Optional pause-on-hover.
Media Card
Card with an image/media area on top and content below. Badge overlay, lazy loading, optional title link, action slot.
Number Ticker
Animated number counter using requestAnimationFrame with ease-out cubic easing. Optional IntersectionObserver trigger.
Pricing Card
Pricing tier card with price display, feature checklist, and CTA button.
Progress
Horizontal progress bar with value, optional label, semantic variant colors, and three sizes.
Progress Ring
SVG circular progress indicator. Server-rendered with correct stroke-dashoffset.
Rating
Star rating widget. Datastar signal holds current value. Read-only variant available.
Read Progress
Thin progress bar fixed at top of page that fills as the user scrolls. Tracks window scroll or a custom container.
Scroll Area
Styled scroll container with thin themed scrollbars via CSS scrollbar-width + scrollbar-color.
Scroll To Top
Fixed button that appears after scrolling past a threshold. Smooth-scrolls to top on click. Zero dependencies.
Segmented Control
Radio group styled as a connected button bar. Keyboard accessible via native radio inputs.
Share Button
Web Share API with clipboard fallback. Uses navigator.share() on supported devices; copies link on desktop.
Split Button
Primary action button with chevron dropdown for alternate actions. Datastar signal controls dropdown open state.
Tilt Card
3D perspective tilt driven by pointer position. Optional shine gradient overlay. Zero JS libraries.
Toggle Group
Segmented button control. Only one option active at a time, driven by a Datastar signal.
Tooltip
CSS-only hover tooltip. Four placement options. No JavaScript required.
Typewriter
Animated type-and-delete loop across multiple phrases. No dependencies — pure JS setInterval with configurable speed/pause.
Video Player
Native HTML5 video with custom-styled controls: play/pause, scrub, volume, mute, speed selector, fullscreen. Zero external JS.
Word Rotate
Cycles through a list of words with a fade+slide transition. No dependencies — pure CSS transitions + setInterval.
Special
9 components
Captcha (Altcha)
Self-hosted proof-of-work captcha. No CDN, no telemetry. challenge= sets the JSON challenge endpoint.
Confetti
Canvas confetti burst. Trigger on click, page load, or manually via window._confetti(). rAF animated, self-cleaning canvas.
Cookie Banner
GDPR cookie consent banner. Renders via JS — hides instantly if already accepted. localStorage persist. No Datastar needed.
Language Toggle
Cycles through locales, persists in cookie, optional page reload. Drop-in for multilingual sites.
Login Form
Composite sign-in form: email + password (show/hide) + remember me + submit. Composed from form.Field, form.Input, form.PasswordInput, primitive.Button.
Onboarding Tour
Step-by-step spotlight tour with floating tooltip. Clip-path overlay highlights target element. No external library.
OpenMap
Leaflet-powered interactive map using OpenStreetMap tiles. Self-hosted JS (148KB). Drop pins with popups.
Theme / Mode Toggle
Cycles $theme (swissbrut↔ink) and $mode (light↔dark). ThemeToggleRoot must appear once per page.
User Menu
Composite: clickable Avatar opens a dropdown with identity header + action items. Composed from primitive.Avatar + custom Datastar dropdown.