Component Library
98 components.
All free. MIT licensed.
React · Vue · Svelte · no sign-in needed
One command to install
Source lands directly in your repo. No account, no token, no runtime package.
Looking for full-page blocks?
20+ section blocks — hero, auth, dashboard, marketing and more.
98 components
Accordion
Vertically stacked sections that expand/collapse, built on Radix UI.
Alert
Inline alert banner with default, info, success, warning, and destructive variants.
Alert Dialog
Confirmation dialog with accessible labelling. Blocks interaction until dismissed.
Animate In
Versatile viewport-triggered entrance animation wrapper. 7 variants: fade, slide-up/down/left/right, scale, rotate.
Animated Beam
SVG curved beam that animates between two ref'd elements. Used to visualise data flow in hero sections. Configurable curvature, speed, gradient colors, and direction.
Animated List
Staggered slide-up + fade-in entrance for list children. Configurable delay between items.
Aurora Background
Slow-moving blurred blob aurora background with configurable palette, speed, and blur radius. Wraps any content.
Auth Flow
Sign-in, sign-up, forgot-password, and verify-email screens stitched together. Ready to wire to your auth provider.
Avatar
Circular avatar with image, fallback initials, and electric ring variant.
Badge
Inline status badge with five variants including electric accent.
Badge Shine
Status badge with an automatic shining light sweep. Three variants: default, pro, and new. Pure CSS.
Bars Loader
Vertical bars that animate in a wave pattern — great for audio/data loading states.
Beam
Animated light beam that slides across a 1px separator line. Configurable color, speed, and delay.
Blog
Blog index with header, hero, article list with author avatars, newsletter section, and footer.
Blur Fade
Viewport-triggered entrance animation: blurs out then fades in smoothly. Zero dependencies, respects prefers-reduced-motion.
Border Beam
Rotating conic-gradient border that sweeps around any container. Configurable colors, speed, and border width.
Breadcrumb
Accessible breadcrumb navigation with separator, ellipsis, and current page slots.
Button
Accessible button with six variants and electric-glow on the default variant.
Calendar
Full-featured calendar picker built on react-day-picker with ParticleUI styling.
Card
Composable card with header, content, and footer slots.
Checkbox
Checkbox with electric fill and smooth check animation.
Combobox
Searchable select built by combining Command inside a Popover.
Command
Command palette / ⌘K menu built on cmdk with fuzzy search.
Confetti Button
Button that fires a canvas confetti burst on click. Wraps the core Button component.
Context Menu
Right-click context menu with items, checkboxes, radio groups, submenus, and shortcuts.
Counter
Spring-animated number counter with IntersectionObserver trigger, easing, and prefix/suffix support.
Cursor Trail
Full-page canvas cursor trail that leaves a fading particle stream. Fixed overlay, zero layout impact. Configurable color, size, trail length, and fade duration.
Data Table
Fully featured data table with sorting, filtering, pagination, and row selection via TanStack Table v8.
Date Picker
Calendar inside a Popover, triggered by a Button. Composable and accessible.
Dialog
Accessible modal dialog built on Radix UI with smooth enter/exit animations.
Docs Site
Documentation shell with sticky top nav, sidebar navigation, main content area, on-page TOC, and footer.
Dot Matrix
5×5 grid loader with 20 animation variants — sweep, spiral, ripple, vortex, and more.
Dots Loader
Three dots that bounce in sequence — the classic loading indicator.
Dropdown Menu
Accessible dropdown with items, checkboxes, radio groups, labels, and submenus.
Electric Badge
Animated badge with pulsing electric glow. Great for status indicators and labels.
Flip Card
3D CSS flip card with front and back slots. Supports horizontal/vertical flip and hover/click trigger.
Floating Dock
macOS-style dock with spring-scale magnification on hover. Fully keyboard accessible.
Form
Form field wrappers integrating react-hook-form with accessible labels, descriptions, and error messages.
Glitch Text
Cyberpunk-style glitch effect with layered text-shadow offsets and random jitter keyframes.
Globe
Canvas-rendered rotating dot globe with depth-based opacity. Zero external dependencies. Configurable size, dot color, spacing, and rotation speed.
Glow Button
A button with a pulsing electric glow effect on hover.
Glow Card
Card with cursor-tracked radial spotlight glow. Configurable color, size, and opacity.
Glow Input
Input with animated gradient border and drop-shadow glow on focus. Drop-in replacement for Input.
Gradient Card
Card with animated border gradient and dark glass background.
Gradient Text
Animated gradient text with 5 variants: electric, aurora, fire, candy, and gold.
Hover Card
Rich hover card for previewing content without navigating away.
Input
Text input with OKLCH-tuned focus ring and surface hierarchy.
Kbd
Keyboard shortcut display with OS-aware symbols and elegant dark styling.
Label
Accessible form label built on Radix UI.
Landing Page
Complete SaaS landing page: hero, logo cloud, alternating features, stats, testimonials, pricing, FAQ, CTA, and footer. Install one component, get everything.
Letter Swap
On hover, each letter scrambles through random characters before revealing the real letter. Configurable speed.
Liquid Button
Button with a liquid blob that follows the cursor using a radial gradient fill effect. Smooth mousemove tracking.
Magnetic Button
Button that elastically follows the cursor with a configurable magnetic strength. Snaps back on mouse leave.
Marquee
Infinite scroll marquee with configurable speed, direction, gap, and pause-on-hover.
Meteors
CSS-animated meteor shower effect. Drop into any relative-positioned container.
Morphing Text
Cycles through an array of words with a smooth blur-morph transition. Configurable interval and CSS-only animation.
Navigation Menu
Accessible site navigation with dropdown panels, built on Radix UI.
Neon Border
Card with a pulsing neon glow border. Configurable color. CSS box-shadow animation, no canvas required.
Noise Texture
SVG fractal noise overlay that adds depth and premium feel to any surface.
Number Flow
Smoothly animates between numeric values with digit-by-digit rolling animation. Supports prefix and suffix.
Orbit Animation
CSS orbital rings with configurable items, radii, speeds, and reverse direction. Accepts any ReactNode as orbiting or center content.
Pagination
Page navigation control with previous, next, numbered pages, and ellipsis.
Popover
Floating popover panel anchored to a trigger, with smart collision detection.
Pricing Page
Dedicated pricing page with a centered hero, three-tier pricing table, FAQ section, and CTA footer.
Progress
Linear progress bar built on Radix UI with electric accent fill and glow.
Pulse Loader
Concentric ripple rings radiating outward from a center dot.
Radio Group
Radio group built on Radix UI with electric accent indicator.
Resizable
Draggable resize handles for panel layouts, built on react-resizable-panels.
Retro Grid
Animated perspective grid floor background with scrolling lines. Pure CSS, zero JS. Drop into any relative container.
Ring Loader
Two concentric rings rotating in opposite directions for a dynamic loading effect.
Ripple Button
Button that fires an expanding ripple at the click position. Configurable ripple color.
SaaS Dashboard
Analytics-focused dashboard with KPI stat cards and a detailed data table. Drop into any admin layout.
Scroll Area
Custom scrollbar overlay built on Radix UI. Consistent across browsers.
Scroll Progress
Fixed-position thin progress bar showing how far the user has scrolled down the page. Configurable color and height.
Scroll Reveal
IntersectionObserver-powered fade-in wrapper. Configurable direction (up/down/left/right), distance, duration, delay, and once/repeat mode.
Select
Full-featured select built on Radix UI with keyboard navigation.
Separator
Horizontal or vertical separator rule built on Radix UI.
Sheet
Slide-in panel from any edge — left, right, top, or bottom. Built on Radix Dialog.
Shimmer Button
Button with rotating conic-gradient shimmer border effect. Three variants: default, filled, dark.
Shimmer Text
Text with a moving shimmer highlight — great for hero headlines and loading states.
Shine Border
Animated conic-gradient border with a multi-stop color sweep. Uses @property for smooth angle interpolation.
Skeleton
Loading placeholder with subtle pulse animation.
Slider
Range slider built on Radix UI with electric glow on the thumb.
Sonner
Toast notifications via Sonner with ParticleUI dark theme.
Sparkles Text
Random sparkle SVG stars that appear and fade around your text. Configurable count, color, and speed.
Spinner
Minimal rotating ring spinner with size variants.
Spotlight
Card wrapper with a dual-layer radial spotlight that tracks the cursor. Drop-in replacement for GlowCard with a tighter, more intense beam.
Switch
Toggle switch built on Radix UI with electric accent when checked.
Table
Styled HTML table with header, body, footer, row, head, and cell slots.
Tabs
Accessible tab panels built on Radix UI with keyboard navigation.
Text Reveal
Text revealed by a sliding mask on scroll entry. Clean clip-path animation, viewport-triggered.
Text Shimmer
Light shimmer that sweeps across text. Configurable speed, color, and background. Pure CSS animation.
Textarea
Auto-resizable textarea with matching input design language.
Tilt Card
3D perspective tilt card with cursor-tracked glare highlight. Pure CSS transforms, no dependencies.
Tooltip
Lightweight tooltip built on Radix UI with smooth fade-in.
Typewriter
Animated typewriter with configurable typing/deleting speed, pause, and loop. Electric cursor blink.
Wave Text
Each character gets a staggered vertical wave animation. Configurable duration and amplitude. Pure CSS.
Word Rotate
Cycles through an array of words with a fade + slide animation. Supports static prefix and suffix text.