Component Library
76 components.
Built to impress.
71 free · 5 pro · React · Vue · Svelte
Installing components
Free components work immediately. Pro requires PARTICLEUI_TOKEN in your .env.
Looking for full-page blocks?
20+ section blocks — hero, auth, dashboard, marketing and more.
76 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.
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.
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.
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.
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.
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.
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.
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.
Navigation Menu
Accessible site navigation with dropdown panels, built on Radix UI.
Noise Texture
SVG fractal noise overlay that adds depth and premium feel to any surface.
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.
Radio Group
Radio group built on Radix UI with electric accent indicator.
Resizable
Draggable resize handles for panel layouts, built on react-resizable-panels.
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 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.
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.
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.
Word Rotate
Cycles through an array of words with a fade + slide animation. Supports static prefix and suffix text.