Loading...
Loading...
Loading...
Every component is typed, accessible, dark-mode ready, and built to drop straight into your Next.js project.
Showing all 108 components
Low-level building blocks built on Radix UI. Fully accessible, dark-mode ready, and composable.
A vertically stacked set of interactive headings that each reveal a section of content.
Confirmation dialog requiring explicit user action.
User avatar with image, fallback initials, and optional status ring.
Small status label with color-coded variants.
Accessible button with multiple visual variants and sizes.
Surface container with header, content, and footer slots.
A control that allows the user to toggle between checked and not checked.
Modal dialog built on Radix Dialog with overlay and close button.
Context or action menu built on Radix DropdownMenu.
React Hook Form integration with Radix Label, Slot, and accessible error messages.
Styled text input extending native <input> attributes.
Accessible form label built on Radix Label.
Canvas-based glitch text effect with configurable speed, colors, and smooth transitions.
Displays rich content in a portal, triggered by a button.
Displays an indicator showing the completion progress of a task.
A set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time.
Dropdown select menu built on Radix Select with keyboard navigation.
Horizontal or vertical divider built on Radix Separator.
Slide-out panel from any edge. Built on Radix Dialog.
Animated placeholder for loading states.
Toggle switch built on Radix Switch.
Semantic HTML table with styled header, body, and row components.
Tabbed content built on Radix Tabs.
Styled multiline text input extending native <textarea>.
Icon button that toggles between light and dark themes.
WebGL flowing threads animation rendered on a full-size canvas.
Hoverable tooltip built on Radix Tooltip.
App-shell widgets: sidebar, topbar, stats, charts, data table, command palette, and more.
Chronological event list with icons, timestamps, and empty state.
Renders a list of dashboard activity feed items (comments, file uploads) with avatars.
Mobile slide-out sheet for viewing activity feed below xl breakpoint.
Card wrapper for chart visualizations with title, description, and legend.
⌘K command palette with grouped search results and keyboard navigation.
Client-side shell managing command menu and notification panel state.
Pre-wired topbar with search, notifications, theme toggle, and user dropdown.
Sortable, selectable data table with column definitions and row actions.
Placeholder for empty lists with icon, title, description, and CTA.
Slide-out notification panel with item list and read state.
SVG area chart comparing two time series with gradient fills and glow effects.
Collapsible sidebar with grouped navigation, tooltips, and a footer slot.
Metric card with label, value, and optional trend badge.
Top navigation bar with mobile menu toggle, search trigger, and action slots.
User menu with avatar, sign-out, and configurable action items.
Landing page sections: hero, features, pricing, testimonials, and three CTA variants.
Asymmetric bento grid with spotlight cards and stagger animations.
Interactive bento-grid testimonial layout with hover animations.
Default CTA wrapper — renders the CtaThreads variant.
Interactive 3D keycard CTA with tilt effect.
Terminal-style CTA with blinking cursor.
Full-width CTA with flowing WebGL Threads background.
Falling meteor streaks and tilt card effects for hero/CTA background decoration.
Accordion-based FAQ section with staggered entrance animations.
Bento-style feature grid with icons, annotations, and hover effects.
Alternative features grid layout with icon cards and scroll-triggered entrance.
Minimal footer with branding and navigation links.
Animated dot-grid background with radial gradient mask.
Full-width animated hero with scroll parallax, floating depth layers, wireframe mockup, and dramatic entrance animations.
Full-width hero with glitch headline, meteors, floating code, and magnetic CTAs.
Forces dark theme on marketing pages. Restores previous theme on unmount.
Two opposing infinite-scroll rows creating a wall-of-love effect.
Container with an animated gradient border that orbits the element.
Transparent navbar with backdrop blur and mobile hamburger menu.
Responsive pricing table with plan cards, feature lists, and tooltips.
Constrained-width section wrapper with optional anchor id.
Text with an animated shimmer gradient sweep effect.
Interactive browser frame with tab switcher showcasing live component previews.
Card with a radial spotlight glow that follows the cursor.
Horizontal row of key metrics with animated counters.
Animated tech stack marquee showing framework logos and labels.
Grid testimonial section with oversized quote marks and avatar cards.
Dark section with scroll-driven wireframe assembly animation.
Presentational auth forms — wire to any provider (Clerk, NextAuth, Supabase).
Split-screen auth layout with a branded left panel and form content on the right.
Email-only form for password reset requests.
Email + password login form with social OAuth slot.
Name + email + password signup form with terms acceptance.
Google and GitHub OAuth buttons as demo placeholders.
Flat, card-free settings pages with section components and danger zone.
API key management table with create/revoke actions.
Billing plan, payment method, and invoice display.
Destructive actions (delete account, export data) with confirmation dialogs.
Name + email profile editing form.
Sidebar navigation + content area for settings sub-routes.
Flat section with title, description, optional action, and a top divider.
Client-side shell owning the nav config so the route layout stays a server component.
3-step animated wizard: welcome screen → setup checklist → step wizard → dashboard.
Toasts, banners, and loading states for user feedback.
Full-width banner for system messages with four visual variants and optional dismiss.
Centered loading state with animated spinner and optional description.
Animated Pong-style loading indicator with bouncing ball and paddles.
Context-based toast system. Wrap your app and use useToast() to show toasts.
Cross-cutting components used across marketing, dashboard, and auth.
Brand logo rendered as text with optional icon.
Full-screen mobile navigation overlay with slide-in animation.
FadeIn, SlideUp, and ScaleIn wrappers providing common Framer Motion entrance animations with reduced-motion support.
Film-grain noise texture overlay using an SVG feTurbulence filter with direct DOM animation.
Page title with optional description and trailing action buttons.
Wraps the app in next-themes with class-based dark mode.
User avatar with image support, fallback initials, and size variants.
Reusable React hooks for common SaaS patterns — debouncing, clipboard, storage, and SSR safety.
Copy text to the clipboard with a temporary success flag that auto-resets.
Debounce a value by a given delay. Useful for search inputs and API calls.
SSR-safe useLayoutEffect — uses useEffect on the server, useLayoutEffect on the client.
Persist state in localStorage with JSON serialization and cross-tab sync.
Subscribe to a CSS media query. Returns false during SSR to avoid hydration mismatches.
Returns true after the component has mounted. Use to guard browser-only rendering.
Run a callback when a click or touch occurs outside the referenced element.
Core utility functions, constants, validation schemas, and mock data.
Shared Framer Motion easing curves, durations, and physics constants.
Mock data fetching layer demonstrating the expected response shape.
Application-wide constants like ROUTES, POST_STATUS, and PLAN_LIMITS.
Realistic mock data for populating lists, tables, and settings.
Core utilities like Tailwind class merging (cn), formatDate, and formatPrice.
Zod schemas for both client-side form validation and server-side action validation.
Get the full library with every premium component, lifetime updates, and priority support.
View Pricing