H
UI by hampton.io
Get Started

Browse

Components

Modular shadcn/ui components with layered styles, animation, and accessible patterns.

Showing 71 of 71 components

Buttons

6

Aurora Button

An animated button with a flowing gradient effect that shifts between your primary and secondary colors. Perfect for calls-to-action.

Border Beam Button

A button with an animated beam that travels around the border for a premium call to action.

Button

A versatile button component with multiple variants including default, outline, fancy, ghost, and secondary styles.

Magnetic Button

A button that subtly follows the cursor when hovering near it. Uses Framer Motion for smooth, spring-based tracking with customizable magnetic strength.

Ripple Button

A button with an interactive ripple effect that responds to clicks and taps.

Shimmer Button

A button with an animated shimmer/shine effect on hover. Uses pure CSS animation for optimal performance.

Cards

15

Analytics

Track your metrics

Dashboard

All your data in one place with real-time updates

Bento Card

Card component for bento grid layouts. Supports multiple sizes (1x1, 2x1, 1x2, 2x2) with optional gradient backgrounds.

Expandable Card

Click to reveal details and performance stats.

Expandable Card

Clickable card that expands to reveal additional content with smooth animation.

Lightning Fast

Built for performance with optimized animations and minimal bundle size.

Customizable

Easily adapt to your brand with CSS variables and Tailwind classes.

Accessible

WCAG compliant with keyboard navigation and screen reader support.

Feature Card

A card component for showcasing features with icon, title, and description. Supports default, bordered, gradient, and glass variants.

Design

Craft beautiful interfaces with accessible primitives.

Performance

Optimized for speed and minimal bundle size.

Flip Card

3D card component that flips on hover or click to reveal content on the back. Supports both horizontal and vertical flip animations.

NewBeta

Glass Card

Layered glass surfaces with soft highlights and depth.

Glass Card

Glassmorphism card with blur, layered glow, and optional icon support.

Featured

Gradient Card

A beautiful card with gradient background effects.

Gradient Card

A card component with soft gradient glow effects. Great for feature highlights and content sections.

Hover Glow

Hover Border Gradient

A premium card edge that animates with a soft gradient on hover.

Hover Border Gradient Card

Card with an animated gradient border that energizes on hover.

Starter

$9/month
  • 5 projects
  • Basic analytics
  • Email support
Popular

Pro

$29/month
  • Unlimited projects
  • Advanced analytics
  • Priority support
  • Custom integrations

Pricing Card

Pricing plan card with title, price, period, features list, and CTA button. Includes popular/featured variant with highlight.

Interactive

Spotlight Card

Tracks your cursor with a glowing spotlight that reveals detail.

Spotlight Card

Interactive card that tracks the cursor with a glowing spotlight highlight.

Focus

Spotlight Hover Card

A cursor-following glow that reveals depth and detail.

Spotlight Hover Card

Card with a cursor-following spotlight glow and soft hover lift.

Stage 1

Launch Preview

Review the release plan and timelines.

Tap to exploreStack 1
Stage 2

Design Review

Approve final UI and interaction polish.

Tap to exploreStack 2
Stage 3

Go Live

Deploy and monitor the rollout.

Tap to exploreStack 3

Stack Cards

Stacked cards that fan out on hover and focus for a layered showcase.

Monthly recurring revenue

$0
vs previous period12.4%

Active workspaces

0
vs previous period3.2%

Stat Card

Animated stat card with trend indicator and percentage change.

0+
Happy Users
0.0%
Uptime
$0M
Revenue

Stats Card

Animated statistics card with counting animation. Supports prefix/suffix, decimal values, and multiple visual variants.

“This component library has completely transformed our development workflow. The attention to detail is incredible.”
S
Sarah Chen
Product Manager at Acme Inc

Testimonial Card

A card component for displaying customer testimonials with avatar, name, role, company, quote text with quotation styling, and optional star rating.

3D

Tilt Card

A responsive 3D tilt effect with depth and motion.

Tilt Card

3D perspective card that tilts based on cursor position.

Inputs

7

Floating Input

An input field with a label that floats up when focused or filled. Smooth animation provides a clean, modern form experience.

Glow Input

An input field with a soft glow that blooms on focus for an elevated form experience.

Multi Select

A multi-select dropdown with animated open state and selectable chips.

OTP Input

A 6-digit one-time password input with auto-focus navigation. Supports paste, backspace navigation, and keyboard arrows.

Password Input

A password input with a toggle button to show or hide the password. Uses accessible labels and smooth transitions.

Pin Input

A polished 6-digit PIN input with animated focus and fill states.

Cmd+K

Search Input

Command palette style search input with icon, keyboard shortcut hint (Cmd+K), and focus states with accent color.

Text Effects

6

Primary Flow

Accent Energy

Spotlight Shine

Muted Glow

Gradient Text

Animated gradient text with flowing motion and semantic color stops. Uses Framer Motion for a smooth, continuous sweep.

Scramble Text

Scrambles characters before resolving into a crisp headline, perfect for dramatic reveals.

Scroll down to reveal

Everywordarriveswithitsownmoment.Scrolltorevealthestory.

Scroll Reveal Text

Reveals words or characters as you scroll, creating a story-like reading flow.

Typewriter Text

Animates text typing character by character with configurable speed, delay, and an optional blinking cursor.

Typing Delete Text

Types and deletes phrases in a loop with a blinking cursor for a lively terminal effect.

Built forteams

Word Rotate Text

Rotates through a list of words with a smooth flip animation.

Display

9
$0

Monthly recurring revenue

Animated Counter

Counts up to a target value with Framer Motion easing, optional prefix and suffix, and locale formatting.

0%
Activation
0%
Retention

Circular Progress

Progress ring with animated stroke and optional value label, built with SVG and Framer Motion.

Aurora Labs
EnterpriseActive422 hours ago
Northwind
TeamActive18Yesterday
Halo Studio
StarterTrial63 days ago
Nova Supply
TeamPaused12Last week
Helix Digital
EnterpriseActive641 hour ago
Signal Ops
TeamActive242 days ago
Showing 6 of 7 records
Page 1 of 2

Data Table

Sortable, filterable data table with pagination and search.

Backlog

2

Audit analytics

Validate tracking coverage

Insights

Refresh onboarding

Align steps with new flow

Product

In progress

1

Design usage report

Build flexible data views

Design

Review

1

QA billing checks

Verify invoices

Ops

Done

1

Launch summary

Share outcome with team

Comms

Kanban Board

Draggable kanban board with columns and cards powered by DnD Kit.

0

Users

0.0%

Uptime

$0

Revenue

Number Counter

Animates from a starting number to a target value using requestAnimationFrame. Supports prefix, suffix, decimals, and multiple easing functions.

Uploading72%

Progress

Progress bar with animated indicator and customizable value.

Skeleton

Skeleton loader blocks for placeholders while content loads.

Active users

34.2k

Churn rate

2.1%

Sparkline Chart

Tiny inline chart for displaying quick trends in compact spaces.

  • 1

    Kickoff

    Week 1

    Align stakeholders and goals

  • 2

    Design

    Week 2

    Finalize interface and states

  • 3

    Launch

    Week 3

    Release to early adopters

Timeline

Vertical timeline with animated steps and status styling for sequences or schedules.

Feedback

5
NewBetaOutlineMutedGhost

Badge

Small badge component with multiple style variants for labels or tags.

Slider

Range slider with track, range, and thumb components.

Status Avatar

Avatar with image fallback and a small status indicator badge.

Off

Switch

Toggle switch for boolean settings, built with accessible primitives.

Tooltip

Accessible tooltip with provider, trigger, and content primitives.

Components

15
A
B
C

Animated Beam Connectors

Animated connector beams that link nodes with a flowing motion trail.

Analytics

Realtime insights

Track core metrics as they update.

Alerts

Smart alerts

Stay ahead with instant notifications.

Ops

Workflow automation

Connect tools without the overhead.

Studio

Design review

Collaborate on the final polish.

Analytics

Realtime insights

Track core metrics as they update.

Alerts

Smart alerts

Stay ahead with instant notifications.

Ops

Workflow automation

Connect tools without the overhead.

Studio

Design review

Collaborate on the final polish.

Animated Marquee Strip

An infinite scrolling strip with premium cards for logos, partners, or testimonials.

Click to trigger confetti

Confetti

Animated confetti effect component perfect for celebrations. Includes a ready-to-use ConfettiButton wrapper.

Spotlight

Cursor guided focus

Move your cursor to reveal the highlight and bring focus to key details.

  • ●Real time tracking
  • ●Soft reveal mask
  • ●Premium presentation
  • ●Smooth motion

Cursor Spotlight

A spotlight section that tracks the cursor and reveals content inside the highlight.

Drag to explore5 items

Analytics

Signal Pipeline

Track every handoff with a clear visual timeline.

Reports

Rapid Insights

Pull key metrics into a single scrollable story.

Workflow

Team Sync

Drag through updates without losing your place.

Review

Review Mode

Momentum scrolling keeps long galleries smooth.

Launch

Launch Deck

Highlight the big moments with premium cards.

Drag to Scroll Gallery

A horizontal gallery with drag to scroll momentum and springy cards.

Control

Overview

Monitor everything from a single, elegant panel.

Open overview

Teams

Workstreams

Zoom into active streams and keep them aligned.

View lanes

Signals

Insights

Surface trends with a short, focused summary.

Read insights

Monitor

Alerts

Stay ahead with proactive alerts and context.

Review alerts

Flow

Automation

Launch quick automations with a single action.

Start flow

Assets

Library

Collect every asset in one premium library.

Browse library

Interactive Bento Grid

A bento grid that expands and rearranges items on hover.

Design
Develop
Ship
Scale
Iterate

Marquee

Flexible infinite scrolling marquee component for text, images, or any content. Supports vertical and horizontal scrolling with customizable speed and fade effects.

Atmosphere

Meteor Drift

Streaking highlights that add motion and energy to sections.

Meteors Background

Animated meteor streaks background for hero sections or cards.

Morphing Background

Morphing Blob

Animated SVG blob that morphs between shapes with smooth transitions. Perfect for dynamic backgrounds or visual interest.

Orbit Spinner

Circular orbiting dots that create a dynamic spinner.

Interactive Particles

Particle Field

Interactive particle field with floating particles that respond to mouse movement. Optional connection lines for a network effect.

Streaming64%

Progress Bar

Animated progress bar with moving stripe accents.

Pulse Loader

Three dots that pulse in sequence for compact loading states.

Skeleton Shimmer

Skeleton block with a sweeping shimmer highlight.

Wave Loader

Animated bars that mimic a sound wave while loading.