ONONC

Components

Interactive building blocks — cards, buttons, disclosure, tabs, toasts and more. Keyboard and reduced-motion aware.

Buttons & actions

4

Magnetic Button

Springs toward the cursor, then snaps back on leave.

motionhover

Shimmer Button

A band of light orbits the border continuously.

CSS

Ripple Button

Emits a ripple from the exact press point.

pointer

Toggle Group

Single or multiple selection of toggle buttons.

a11yform

Cards & surfaces

5

Tilt me around

Move your cursor across the card.

Tilt Card

Tilts in 3D toward the pointer with a tracking glare.

motion3D

Spotlight

Hover to sweep the highlight.

Spotlight Card

A radial glow follows the cursor across the surface.

pointer

Hover Card

Rich preview revealed on hover or keyboard focus, with delay.

overlayhover
Revenue
$48.2k
+12.4%vs last week
Customizable

Upgrade to Pro

Unlock advanced analytics and priority support.

Everything in Free, plus unlimited projects and team seats.

Card

Composable content surface with header, content, and footer.

layoutdisplay

Interactive showcase

7

Holo pass

Aurora Nine

Tilt me — the sheen shifts hue with the pointer.

#0042Rare
Customizable
Drag with the pointer or pan with the arrow keys.
Customizable

Move around, then hover a target.

Customizable

Page content

Revealed when loading completes.

Loading…
Customizable
Drag a card sideways, or use the Left and Right arrow keys to pass or keep it.

Aurora

Northern drift

CalmGradient
Customizable

Inputs & forms

17
Notifications
Customizable

OTP Input

Segmented code entry with auto-advance and paste.

formkeyboard

Combobox

Accessible autocomplete with live filtering and keyboard nav.

a11ykeyboard
  • React
  • Next.js
  • Tailwind

Tag Input

Add chips with Enter, remove with × or Backspace.

formkeyboard

File Dropzone

Drag-and-drop file picker with a list (front-end only).

formpointer

Checkbox

Tri-state checkbox with an indeterminate option and labels.

a11yform

Radio Group

Single-select with roving focus and arrow-key navigation.

a11yform

Select

Listbox-style picker with type-ahead and full keyboard nav.

a11ykeyboard
53/160

Textarea

Auto-resizing multiline field with an optional counter.

form

Date Picker

Calendar popover with WAI-ARIA grid keyboard navigation.

a11ykeyboard

Color Picker

HSV picker with a hue slider, hex input, and swatches.

pointerform
July 2026
SuMoTuWeThFrSa

Calendar

Inline month grid for single or range selection (range shown).

a11ykeyboard
ReactTypeScript

Multi-Select

Searchable multi-select with removable chips and keyboard nav.

a11yform
09
:
30

Time Picker

Pick an hour, minute, and AM/PM with spinbutton segments.

a11yform

Navigation

10

Dock

macOS-style icons that magnify by cursor proximity.

motion
A quick summary lives in this panel.

Tabs

Accessible tablist with a sliding underline indicator.

a11ykeyboard

Command Palette

⌘K launcher with live filtering and full keyboard nav.

a11ykeyboardportal

Dropdown Menu

Menu button with roving focus, Escape, and outside-click.

a11ykeyboard
  1. Account
  2. 2Profile
  3. 3Billing
  4. 4Done

Stepper

Multi-step progress with completed and active states.

progress

Breadcrumbs

Accessible trail with chevrons and aria-current.

a11ynav

Pagination

Numbered pages with prev/next and ellipsis collapsing.

a11ynav

Toolbar

Grouped controls with roving focus and aria-pressed toggles.

a11ykeyboard

Menubar

Application menu bar with arrow-key navigation between menus.

a11ykeyboard

Overlays

5

Tooltip

Shows on hover and keyboard focus, linked via aria.

a11yhover

Modal

Portaled dialog with focus management and Escape to close.

a11yportal

Popover

Floating panel of arbitrary content with focus return.

a11yoverlay

Drawer

Slide-in side panel with focus management and Escape.

a11yportal
Right-click here

Context Menu

Right-click menu at the pointer with keyboard navigation.

a11ypointerportal

Data display

10
Next.jsReactTypeScriptTailwindMotionCanvas

Marquee

A seamless infinite scroller that pauses on hover.

CSSloop
Slide 1

Carousel

Looping slides with arrows, dots, and arrow-key support.

a11ykeyboard
Before
After

Image Compare

Before/after wipe with a draggable, keyboardable handle.

pointerkeyboard
MVDPICLM+2

Avatar Stack

Overlapping avatars with an overflow +N chip.

layout
BrandLiveBetaDeprecatedv2.0
Customizable
  • src
    • components
      • button.tsx
      • card.tsx
    • index.ts
  • README.md

Tree View

Expandable hierarchy with roving focus and arrow-key nav.

a11ykeyboard
Team members
Mara VanceEngineer482
Devon ParkDesigner197
Iris ChoPM88
Leo MendezEngineer341

Data Table

Sortable columns with aria-sort and optional row selection.

a11ydata
KCtrlShiftPEsc
Customizable
Mara VanceDevon ParkIris Cho
Customizable

Account settings

Billing

or
EmailSMS
Customizable

Feedback & progress

8

Toast

Imperative toasts via a tiny store and a Toaster.

storearia-live

Scroll me ↓

Paragraph 1. The bar at the top fills as this panel scrolls.

Paragraph 2. The bar at the top fills as this panel scrolls.

Paragraph 3. The bar at the top fills as this panel scrolls.

Paragraph 4. The bar at the top fills as this panel scrolls.

Paragraph 5. The bar at the top fills as this panel scrolls.

Paragraph 6. The bar at the top fills as this panel scrolls.

Paragraph 7. The bar at the top fills as this panel scrolls.

Paragraph 8. The bar at the top fills as this panel scrolls.

Paragraph 9. The bar at the top fills as this panel scrolls.

Paragraph 10. The bar at the top fills as this panel scrolls.

Scroll Progress

Gradient bar tied to scroll position (window or container).

motionscroll

Skeleton

Shimmering placeholders for loading states.

loading

Payment received

Your invoice has been paid in full.

Storage almost full

You have used 92% of your quota.
Customizable
Loading…Loading…Loading…Loading…
Customizable

No messages yet

When you receive messages, they'll show up here.

Empty State

A centered placeholder for empty content with an action.

displayfeedback

Layout & disclosure

4

An original animated component kit.

Yes — ARIA wiring and keyboard support throughout.

Everything reads from CSS variables.

Accordion

Accessible disclosure list with smooth height transitions.

a11ydisclosure
Sidebar
Content

Resizable

Split panels with a draggable, keyboard-resizable divider.

pointera11y
Unlimited projects, advanced analytics, and priority support — all in one plan.

Collapsible

A single show/hide disclosure with an animated height.

a11ydisclosure

Changelog

v1.12 — improvements and bug fixes across the board.

v1.11 — improvements and bug fixes across the board.

v1.10 — improvements and bug fixes across the board.

v1.9 — improvements and bug fixes across the board.

v1.8 — improvements and bug fixes across the board.

v1.7 — improvements and bug fixes across the board.

v1.6 — improvements and bug fixes across the board.

v1.5 — improvements and bug fixes across the board.

v1.4 — improvements and bug fixes across the board.

v1.3 — improvements and bug fixes across the board.

v1.2 — improvements and bug fixes across the board.

v1.1 — improvements and bug fixes across the board.

Scroll Area

A bounded scroll container with a custom, themed scrollbar.

pointerlayout