Trending Society

Animated Tabs | UI components | Trending Society

More from @motiq, 85 components

All @motiq

Activity Stream component
@motiq
A collaboration/product activity feed that goes beyond a timeline: groups repeated actions, date separators, an unread divider, live arrival insertion, and event-type/actor filtering. Presentation-only — the app supplies events.
Data display2 registry deps · 1 package
Adaptive Safe-Zone Grid component
@motiq
A content-aware structural grid for hero sections: the grid quiets inside one or many safe areas (via an SVG mask) so foreground copy stays readable, while detail collects toward the frame edges. Optional perspective skew, highlighted cells, and a restrained accent shimmer. Deterministic (SSR-safe), light/dark, reduced-motion-static, forced-colors-safe, offscreen-paused. SVG + CSS only.
Backgrounds2 registry deps
Agent Run Timeline component
@motiq
A presentation-only timeline for a multi-step agent / automation run: an ordered rail of steps with tool calls, outputs, errors, retry attempts, optional nested sub-stages, human approval checkpoints, and run-level lifecycle controls (cancel / resume). The app owns the run and every status; the component never executes an agent, generates reasoning, invents confidence, or claims a step succeeded on its own.
AI2 registry deps · 1 package
AI Response Stream component
@motiq
Renders a streaming assistant response supplied by your app — text, fenced code with copy, inline [n] citations to a sources rail, and streaming/stopped/complete/error states with Stop, Retry, and Copy. Presentation only: it never calls a model. Reduced-motion shows text instantly; a polite live region announces completion, not tokens.
AI2 registry deps · 1 package
Animated Accordion component
@motiq
Radix Accordion with Motion height/opacity reveal and a rotating chevron. Single/multiple modes, keyboard, and disabled state preserved. Reduced-motion safe.
Motion and effects1 registry dep · 2 packages
Animated Button component
@motiq
A real button with press-scale feedback and accessible loading (aria-busy + polite spinner) and success states. Solid, outline, and ghost variants. Reduced-motion safe.
Buttons and actions1 registry dep · 1 package
Animated Dialog component
@motiq
Radix Dialog with Motion enter/exit choreography (scale, slide-up, fade). Preserves portal, focus trap, Esc, and overlay. Reduced-motion safe.
Overlays1 registry dep · 2 packages
Animated Grid component
@motiq
A CSS-only animated grid background layer with a slow drift, optional radial fade mask, and a prefers-reduced-motion stop. No canvas, no JS loop. Decorative.
Backgrounds1 registry dep · 2 packages
Animated Icons component
@motiq
Two inline-SVG animated icons — AnimatedArrow (nudge) and AnimatedCopy (copy-to-check swap) — triggered on hover, tap, focus, or mount. Decorative and inherit their label from a parent control. Reduced-motion safe.
Icons1 registry dep · 1 package
Animated List component
@motiq
A semantic list whose items fade/slide in with a stagger and animate out cleanly on removal, with layout-based reordering. Requires stable keys. Reduced-motion safe.
Data display1 registry dep · 1 package
API Request Inspector component
@motiq
A presentation-only inspection surface for a single HTTP request/response your app already has — method/url/status/duration/timing phases, headers/query/body, error, requestId, environment, retryCount, and an auth summary. Credential headers and fields are redacted by default and can never be revealed from inside the component. Expandable sections, in-payload search, formatted/raw + wrapped/scrolling views, and copy of url/request/response. It never sends anything.
Other2 registry deps · 1 package
Approval Workflow component
@motiq
Display and control an app-owned approval process — sequential or parallel stages, required/optional reviewers, minimum approvals, current-user actions (approve / reject / request changes / comment / cancel / resubmit), decision history, and collapsing completed stages. The app owns authorization; the component surfaces app-provided disabled reasons. Status is icon + label; reduced-motion safe.
Other2 registry deps · 1 package

Animated Tabs

Install

Live preview

Registry dependencies1

Packages2

Animated Tabs

Install

Live preview

Registry dependencies1

Packages2

Source

More from @motiq, 85 components

The Signal

Install

Live preview

Registry dependencies1

Packages2

Install

Live preview

Registry dependencies1

Packages2

Source

More from @motiq85, 85 components

More from @motiq, 85 components