Collection

React Components & Next.js Templates

React components and templates that turn a promising build into a coherent product faster. Use them as dependable foundations for vibe coding, then adapt the structure, interactions and visual language to fit your idea.

152 designs
Made by the HorizonX team

Animated Pagination

Page controls where the active marker slides to the chosen page and the content slides in from the matching side.

HorizonX Code

Animated Popover

A small panel anchored to its button that fades and slides in with account actions.

HorizonX Code

Animated Progress Bar

A progress bar that fills in eased steps and ends with a check, plus an indeterminate mode for unknown durations.

HorizonX Code

Animated Toast

A notification that slides up from the corner, stacks with others and dismisses itself with a progress line.

HorizonX Code

New

Checkpoint Restore

Review file and line changes, confirm a checkpoint restore, and see which checkpoint was restored.

HorizonX Code

New

Cost Meter

Track token usage, credits and session spend against a budget, with per-model detail.

HorizonX Code

New

Filter Bar

Find accounts with search, removable conditions and saved views.

HorizonX Code

New

Funnel Chart

Find conversion and drop-off between activation stages.

HorizonX Code

New

Grouped Rows

Organize table rows under collapsible headers with counts and annual value totals.

HorizonX Code

New

Kanban Board

Columns of task cards with counts and work-in-progress limits; drag cards between columns or move them by keyboard, and add a card inline.

HorizonX Code

New

Live Log

Follow structured logs, filter levels, highlight search matches, pause scrolling and copy the full buffer.

HorizonX Code

New

Order Confirmation

A clear receipt with order number, delivery estimate, items and next steps.

HorizonX Code

New

Order Summary

Itemized prices, coupon feedback, estimated tax, delivery and one consistent total.

HorizonX Code

New

Permission Primers

Screens that explain notifications and tracking before the phone's own prompt, each with a real "Not now".

HorizonX Code

New

Upsell Modal

An optional order extra with explicit add and decline actions in a focus-trapped dialog.

HorizonX Code

Animated Empty State

An empty state that floats in with a staggered title, message and action after the last item is removed.

HorizonX Code

Animated Hover Card

A profile preview card that opens when you rest on a link, with a short delay so it never flickers.

HorizonX Code

Animated Validation Shake

A field that gives a short horizontal shake on an invalid submit while the error message fades in.

HorizonX Code

New

Approval Gate

Review a command and its risk before allowing it once, allowing this command for the session, or denying it.

HorizonX Code

New

Assignee Picker

Pick several people for a task from a searchable list with avatars; remove one with its chip or everyone at once.

HorizonX Code

New

Checkout Steps

Contact, shipping and payment stages with validation, edit actions and a mobile order disclosure.

HorizonX Code

New

Conversation Sidebar

Chat history grouped by date, with search, rename in place and delete with a confirmation. Becomes a sheet on phones.

HorizonX Code

New

Donut Chart

Understand the composition of visitor sources.

HorizonX Code

New

Invoice Table

Paginated invoices with downloadable CSV receipts and an empty state.

HorizonX Code

New

Notification Preferences

A matrix of events by channel (email, push, in-app) with switches, quiet hours and a reset to the defaults.

HorizonX Code

New

Result Cards

A tool's output shown as a readable card: a 5-row data table, a two-week line chart or a weather report, each with a View raw toggle.

HorizonX Code

New Premium

Tool Calls Kit

What an AI agent does between question and answer: tool calls with their JSON, results as cards, its plan, failures with retry, approvals and the tool picker.

HorizonX Code

Animated Swipe Delete

An inbox row that reveals a delete action as you swipe it, then collapses, with a visible delete button and undo.

HorizonX Code

Animated Toggle Switch

A switch whose thumb slides across with a slight squash while the track fills.

HorizonX Code

New

Board Filters

A filter bar for task views: search, assignee avatars, a label menu and Only my tasks, with a live result count.

HorizonX Code

New

Developer Keys

Create, list and revoke API keys: name, scope and expiry, the secret shown once with copy, last-used dates.

HorizonX Code

New

Inline Cell Edit

Edit text, select and date values in place with keyboard save and cancel.

HorizonX Code

New

Task Detail Panel

Everything about one task in a side sheet: title, status, priority, assignees, labels, dates, description, checklist and comments.

HorizonX Code

New

Task List View

The board's tasks as a dense list grouped by status, with collapsible groups and status changed in place from each row.

HorizonX Code

New

Task Queue

Prioritize queued work by dragging, keyboard pickup or move buttons, and pause or resume the queue.

HorizonX Code

New

Tool Chips

Toggles for the tools an agent may use (search, code, files, browser) with tooltips, a count of active tools and why a tool is off.

HorizonX Code

New

Upgrade Modal

Compare plans and billing periods, then review before confirming.

HorizonX Code

New

Usage Meters

Included capacity, exact consumption and visible threshold alerts.

HorizonX Code

New

Bulk Actions

Assign, export or delete selected accounts, with explicit all-results selection.

HorizonX Code

New

Credits Top-up

Credit purchases with preset or custom amounts and automatic top-up settings.

HorizonX Code

New

Tool Error Card

A failed tool call in plain words: the error code, a collapsible stack, Retry and Edit arguments with JSON validation.

HorizonX Code

Animated Alert Dialog

A blocking confirmation dialog for destructive actions, with the safe Cancel choice focused first.

HorizonX Code

New

Members and Invites

Manage a team: seat counter, invite by email with a role, member table with role changes, pending invites with resend and revoke.

HorizonX Code

New

Payment Method

A drawn card and editable billing details with a default-method switch.

HorizonX Code

New

Profile Form

Edit a profile: photo with preview, name, username with a live availability check and a bio with a counter.

HorizonX Code

Coperto Activity Skyline

A 3D calendar heatmap for restaurants: a year of covers per night as a calendar that rises into an isometric skyline.

HorizonX Code

MORVA Interior Design

An editorial room-design landing page with tactile imagery and considered motion.

HorizonX Code

Premium

Sedra

A calm, scroll-driven landing page for an AI landscape design studio, built in React, Vite and Tailwind.

HorizonX Code

From the blog

Guides

All articles

Guide Best React + Tailwind Component Libraries in 2026 Read the guide Guide React Shader Backgrounds: Plan the Integration and Static Fallback Read the guide Guide What Are Coded UI Kits? (And When They Beat Figma Kits) Read the guide Guide Design Tokens in 2026: A Practical Guide for Designers and AI Workflows Read the guide Guide Figma Templates vs Coded Components: Which Should You Start From? Read the guide Guide Vibe-Coded UI Production Readiness: 15-Point Checklist Read the guide

Keep exploring

Related collections

All collections

Tailwind UI Kits & Templates

137 designs

SaaS Website Templates

53 designs

Find the next design for your project

Browse every design in the HorizonX catalog, from UI kits and templates to textures, shaders and mockups.

Explore all designs Browse collections