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 Loading Button

A button whose label turns into a spinner while saving, then a check, then back to the label.

HorizonX Code

Animated Sliding Tabs

Tabs whose active pill slides to the selected tab while the panel below crossfades.

HorizonX Code

New

Area Chart

Revenue trends with selectable series and precise value inspection.

HorizonX Code

New

Chat Thread

The scrolling conversation: your turns, the assistant's answers, timestamps and a jump to the latest message.

HorizonX Code

New

Heatmap

Explore hourly activity with keyboard grid navigation.

HorizonX Code

New

Social Proof Step

Store rating with count, a testimonials carousel people page through themselves, and press names as neutral wordmarks.

HorizonX Code

Animated Card Expand

A card that grows into a detail view from its own position and shrinks back when closed.

HorizonX Code

Animated Dropzone Upload

A file drop area that highlights when a file is dragged over it, then lists each file with its progress.

HorizonX Code

Animated Hamburger Menu

A mobile menu button that morphs into a close icon while the full menu slides down with staggered links.

HorizonX Code

Animated One-Time Code Input

A verification code field split into slots, where focus moves as you type and a full code ends with a short pulse.

HorizonX Code

New

Founder Note

A short personal letter from the founder with a hand-drawn signature, shown right before the paywall.

HorizonX Code

New

Paywall

Subscription screen: benefits, monthly or yearly switch with the saving, plan cards, one clear button, restore and terms.

HorizonX Code

Animated Accordion

A stack of questions that expand and collapse smoothly, with the height animating and the chevron turning.

HorizonX Code

Animated Checkbox and Radio

Native checkboxes and radio buttons where the tick draws itself and the dot scales in.

HorizonX Code

Animated Combobox

A text field with a suggestion list that drops in as you type, highlights matches and fills in the choice.

HorizonX Code

Animated Scroll Reveal

Sections that fade up one after another as they scroll into view.

HorizonX Code

Animated Slider

A slider whose value bubble follows the thumb while the track fills, with a two-thumb range version.

HorizonX Code

New

Column Manager

Choose visible columns, reorder with drag or buttons, and pin important fields.

HorizonX Code

New Premium

Data Table Kit

An editable account portfolio with saved views, configurable columns, selection, grouping and pagination.

HorizonX Code

New

Kpi Cards

Scan outcome metrics, changes and compact trend lines.

HorizonX Code

New

Table Pagination

Navigate a known result set with row ranges, page sizes and direct page jumps.

HorizonX Code

Animated Button Press

A button that dips slightly when pressed and shows a highlight from the point you clicked.

HorizonX Code

Animated Carousel

A slide carousel that moves with momentum on drag or arrows, with dots that follow along.

HorizonX Code

Animated Copy Confirm

A copy button whose icon morphs into a check with a small Copied bubble, then returns.

HorizonX Code

Animated Filter Shuffle

A filterable card grid where the remaining cards glide into their new places as chips are toggled.

HorizonX Code

Animated Pull to Refresh

A list you pull down past a threshold to refresh, with a stretching indicator and a spinner.

HorizonX Code

Animated Shrinking Header

A page header that becomes compact and gains a shadow once you scroll past a threshold, without the page jumping.

HorizonX Code

New

Bar Chart

Compare acquisition channels in grouped or stacked bars.

HorizonX Code

New

Current Plan

A subscription overview with renewal, limits, plan changes and cancellation.

HorizonX Code

New

Payment Methods

Formatted card fields, prefix-based brand text, saved cards and neutral wallet choices.

HorizonX Code

New

Plan Builder

"Building your plan" loader with a percentage and a checklist that fills, then a summary of the plan with Continue.

HorizonX Code

New

Source Citations

Numbered markers inside an answer that preview their source on hover, plus the list of sources below it.

HorizonX Code

New

Tool Call Card

One call an agent makes: tool name, status, duration and a summary, opening to the input and output JSON.

HorizonX Code

Animated Floating Label

Text fields whose label rises and shrinks above the value when you focus or fill them.

HorizonX Code

Animated Like Burst

A heart that fills with a small pop and a burst of particles while the count goes up by one.

HorizonX Code

Animated Sheet

A modal side panel that slides in from any edge while the page stays visible behind a soft backdrop.

HorizonX Code

Animated Skeleton

Placeholder blocks with a soft shimmer that crossfade into the real content without shifting the layout.

HorizonX Code

Animated Spinner

A loading spinner that swaps in for a button label, plus a standalone ring in several sizes.

HorizonX Code

Animated Success Check

A confirmation where a circle draws itself, a check stroke follows, and the mark pops slightly.

HorizonX Code

Animated Tooltip

A short label that fades in above toolbar icons on hover or keyboard focus.

HorizonX Code

New

Danger Zone

Irreversible workspace actions in one red card: transfer ownership, export all data, delete with type-to-confirm.

HorizonX Code

New

Security Panel

Account security in one place: change the password, set up two-factor with a QR code, and sign out other devices.

HorizonX Code

New

Session List

Find an agent session by status and inspect its task, model and elapsed time.

HorizonX Code

New

Streaming Message

An answer that renders Markdown as tokens arrive, with code blocks you can copy and a stopped state.

HorizonX Code

New

Suggestion Chips

Four starter prompts for an empty conversation; choosing one fills the composer.

HorizonX Code

Animated Drag Reorder

A list you can reorder by dragging, with the other rows sliding out of the way.

HorizonX Code

Animated Infinite Scroll

A list that loads the next items as you reach the end, with new entries fading in one after another.

HorizonX Code

Animated Modal

A centered form dialog that fades and scales in over a dimmed page, with the field focused and ready to type.

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