Collection

Tailwind UI Kits & Templates

Flexible Tailwind UI kits and templates made for real product interfaces, from crisp marketing sections to complete application screens. They give build teams a strong visual system they can customize quickly and carry cleanly into production.

137 designs
Made by the HorizonX team

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

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

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

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 Scroll Reveal

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

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

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

From the blog

Guides

All articles

Guide Best React + Tailwind Component Libraries in 2026 Read the guide Guide What Are Coded UI Kits? (And When They Beat Figma Kits) Read the guide Guide Tailwind Accordion: Accessible Copy-Paste Code (2026) Read the guide Guide Premium UI Kits vs Free Alternatives: A Designer's ROI Analysis Read the guide

Keep exploring

Related collections

All collections

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

Social Proof Step

Animated Card Expand

Animated Dropzone Upload

Animated Hamburger Menu

Animated Loading Button

Animated One-Time Code Input

Founder Note

Paywall

Animated Accordion

Animated Checkbox and Radio

Animated Combobox

Animated Slider

Column Manager

Kpi Cards

Table Pagination

Animated Button Press

Animated Carousel

Animated Copy Confirm

Animated Filter Shuffle

Animated Pull to Refresh

Animated Scroll Reveal

Animated Shrinking Header

Bar Chart

Current Plan

Payment Methods

Plan Builder

Source Citations

Tool Call Card

Animated Floating Label

Animated Like Burst

Animated Sheet

Animated Skeleton

Animated Spinner

Animated Success Check

Animated Tooltip

Danger Zone

Security Panel

Session List

Streaming Message

Suggestion Chips

Animated Drag Reorder

Animated Infinite Scroll

Animated Modal

Animated Pagination

Animated Popover

Animated Progress Bar

Animated Toast

Checkpoint Restore

Guides

Related collections

React Components & Next.js Templates

Dashboard Templates & Admin UI

Landing Page Templates

CSS Cards & Animated Card Components

CSS Buttons & Animated Button Effects

Find the next design for your project