OSS

Lightweight hover tooltip with delay control and provider wrapper for accessible hint text.

Grouped toggle buttons for single or multiple selection patterns like formatting toolbars.

Pressable toggle button for on/off states with variant styles, distinct from checkbox or switch.

Multi-line text field with consistent borders, focus styles, and disabled states for longer form content.

Tabbed interface with list, triggers, and content panels for switching views without page navigation.

Semantic HTML table with header, body, footer, row, and cell components for structured data display.

Toggle switch for boolean settings with smooth animation and accessible on/off states via Radix.

Toast notification toaster using Sonner with theme-aware styling and Lucide status icons.

Draggable range slider for numeric values with Radix thumb and track styling for volume or progress.

Placeholder shimmer block for loading states that mirrors content layout before data arrives.

Collapsible application sidebar with mobile sheet fallback, menu groups, and keyboard toggle shortcut.

Slide-in panel from any screen edge for mobile-friendly drawers, filters, or secondary navigation.

Visual divider line between sections, horizontal or vertical, with Radix accessibility semantics.

Custom dropdown select with scrollable options, keyboard navigation, and Radix-powered positioning.

Custom scrollable container with styled scrollbar and overflow handling via Radix scroll primitives.

Grouped radio buttons for single-choice selections with Radix keyboard navigation and focus management.

Horizontal progress bar showing completion percentage with Radix accessibility and smooth fill animation.

Floating content panel anchored to a trigger for compact forms, pickers, or contextual information.

Page navigation controls with previous, next, ellipsis, and numbered links for long result sets.

Desktop-style menubar with nested submenus, shortcuts, and checkbox items using Radix primitives.

One-time password input with segmented digit slots, paste support, and focus management.

Styled single-line text input with focus ring, disabled states, and file upload support for forms.

Rich preview card shown on hover for user profiles, link previews, or compact detail popovers.

Contextual menu with items, checkboxes, radio groups, shortcuts, and submenus powered by Radix.

Modal dialog overlay with focus trap, close button, header, footer, and animated open/close transitions.

Command palette with searchable items, groups, and shortcuts using cmdk inside an optional dialog.

Accessible checkbox control with Radix primitives, check indicator, and keyboard-friendly toggle states.

Content container with header, title, description, content, and footer slots for grouped UI blocks.

Date picker calendar built on react-day-picker with navigation, outside days, and button variants.

Versatile button with variant and size options built on Radix Slot for composable actions and links.

Hierarchical breadcrumb trail with links, current page, separator, and ellipsis for deep navigation.

Small status label for counts, categories, or tags with variant styles for emphasis levels.

User avatar with image fallback and optional status indicator for profiles and comment threads.

Inline alert banner with title and description for success, warning, or informational messages.

Collapsible sections with animated expand/collapse for FAQs, settings groups, or nested content.

Simple labeled textarea block for comments and long-form entry.

Multi-line text field with consistent border, focus, and disabled styling.

TanStack table with sorting, text/range/select column filters.

Read-only data table with header, body rows, and footer total.

Composable table primitives for headers, rows, cells, and footers.

Toggle switch paired with a descriptive label for settings.

Labeled single-thumb slider for numeric preference input.

Range slider for numeric input with Radix drag and keyboard interaction.

Modal signup form with email, password, and primary submit action.

Labeled Radix select for choosing one option from a list.

Radix-powered select menu with trigger, content, and item primitives.

Search field with keyboard shortcut hint for quick filtering.

Grouped radio buttons for single-choice form fields.

Vertical radio group with labels for exclusive choices.

Tag input multiselect with search and removable chips.

Tag-style multiselect built on popover and command patterns.

Labeled text input showing inline validation error messaging.

Accessible text input primitive with focus ring, invalid state, and file/search variants.

Autocomplete combobox with searchable command palette behavior.

Standard labeled checkbox row for agreements and preferences.

Styled checkbox control with Radix semantics and keyboard support.

Accessible calendar grid built with React Aria date components.

Shimmer effect on text. Easily adjust the duration and the spread of the shimmer effect. Built for React, Next.js, and Tailwind CSS.

Animates text by morphing shared letters between words, creating fluid transitions. Built for React, Next.js, and Tailwind CSS.

Text animation that transitions between multiple items, creating an engaging looping effect. Built for React, Next.js, and Tailwind CSS.

Easily animate text content with various effects. You can apply animations per character or per word, and customize the animation effects using custom variants or preset animations. Built for React, Next.js, and Tailwind CSS.

A dynamic spotlight effect component that follows cursor movement. Built for React, Next.js, and Tailwind CSS.

Animated scroll progress for your web pages. Built for React, Next.js, and Tailwind CSS.

A magnetic effect for elements that allows them to be attracted to the mouse cursor. Built for React, Next.js, and Tailwind CSS.

Infinite scrolling slider component that smoothly loops through its children. It supports both horizontal and vertical directions, with customizable speed and speed on hover. Ideal for creating continuous carousels, marquee displays, or dynamic content showcases. Built for React,

Easily animate elements when they come into view. You can apply animations to elements when they enter the viewport, or when they are fully visible. Built for React, Next.js, and Tailwind CSS.

A customizable glow effect with animation modes, colors, blur-sm, and transitions. Built for React, Next.js, and Tailwind CSS.

A versatile UI element that provides a flexible and customizable way to organize and display menu items within your application. Built for React, Next.js, and Tailwind CSS.

Animated border effect that moves along the edges of its parent container. Built for React, Next.js, and Tailwind CSS.

Easily animate numbers. Built for React, Next.js, and Tailwind CSS.

Visually highlights selected items by sliding a background into view when hovered over or clicked. This smooth transition helps users focus on the active item, making it ideal for interactive lists, menus, or navigations where clear selection feedback is important. Built for Reac

A vertical rotation of words

A card with a time warping background effect.

Characters appearing in typed animation

Fade in text as you scroll down the page.

A dynamic text that generates continuous sparkles with smooth transitions, perfect for highlighting text with animated stars.

A shiny button component with dynamic styles in the dark mode or light mode.

A button with a shimmering light which travels around the perimeter.

An animated button with ripple useful for user engagement.

An animated scrolling retro grid effect

An animated button with a rainbow effect.

An animated pulsating button useful for capturing attention of users.

Particles are a fun way to add some visual flair to your website. They can be used to create a sense of depth, movement, and interactivity.

A collection of circles which move in orbit along a circular path

Animate numbers to count up or down to a target number

A dynamic text morphing component for Magic UI.

A meteor shower effect.

An infinite scrolling component that can be used to display text, images, or videos.

A spotlight effect that follows your mouse cursor and highlights borders on hover.

Interactive Hover Button — an animated UI component from Magic UI with hover and motion effects.

A hero video dialog component.

A background grid pattern made with SVGs, fully customizable using Tailwind CSS.

A flickering grid background made with SVGs, fully customizable using Tailwind CSS.

A background dot pattern made with SVGs, fully customizable using Tailwind CSS.

An implementation of the MacOS dock using react + tailwindcss + motion

An animated beam of light which travels along the border of its container.

Bento grid is a layout used to showcase the features of a product in a simple and elegant way.

A beautiful aurora text effect

A light glare effect which pans across text making it appear as if it is shimmering.

An animated gradient background which transitions between colors for text.

An animated beam of light which travels along a path. Useful for showcasing the integration features of a website.

Tab bar with sliding active indicator and smooth content transitions between panels.

Bottom or side drawer with fluid motion curves for filters, settings, and mobile menus.

Headline text with a sliding shimmer gradient for eye-catching titles and loading states.

Button that emits particle burst on click for playful micro-interactions and celebrations.

Animated loading indicator with multiple visual styles for async states and spinners.

Glassmorphism card with liquid distortion hover for premium dashboards and portfolios.

CTA button with animated gradient border and hover lift for primary actions.

Drag-and-drop file upload zone with progress feedback for forms and asset pickers.

3D flip card revealing back-face content on interaction for product comparisons and reveals.

Responsive bento layout grid for feature showcases with varied tile sizes and icons.

Radiating light beams background effect for hero sections and dark-mode landing pages.

Command-style search bar with keyboard shortcuts and quick action suggestions.

Expandable tree view for nested folders and hierarchical data.

Tag input with autocomplete suggestions and removable badges.

TanStack-powered data table provider with sortable headers and row rendering.

Status badge with semantic color variants for online/offline states.

Loading spinner variants for inline and centered busy states.

Human-readable relative timestamps that update over time.

Interactive star rating input with hover preview and half-star support.

Compact month calendar widget for inline date picking.

Keyboard-navigable list with selection and grouped item support.

Rich text editor shell with formatting toolbar and slash command menu.

Drag-and-drop file upload zone with click-to-browse fallback.

Composable combobox with popover trigger, search input, and creatable items.

HSV color picker with swatch preview and channel inputs.

Card-style radio choice list for plan or option selection flows.

Range-capable calendar with month navigation and selection states.

Countdown timer with configurable duration and visual styles for deadlines and events.

Layered button with texture overlay variants, giving tactile depth without heavy image assets.

Drag-and-drop reorderable list with smooth motion for priorities, queues, and ranked items.

Inline popover form that opens from a trigger for quick edits without navigating away.

Clean card shell with subtle borders and spacing for content blocks and dashboard tiles.

Display heading with animated gradient text fill for hero titles and marketing headlines.

Feature highlight carousel with animated slides for product tours and onboarding flows.

Compact morphing notification island that expands for status updates and collapses when idle.

macOS-style dock bar with magnification on hover for app shortcuts and tool palettes.

Animated link or button with a rotating cosmic gradient border and soft glow for standout CTAs.

Full-bleed animated gradient backdrop that adds motion to landing sections and hero areas.

Counts up or down with smooth digit transitions, ideal for stats, KPIs, and live counters.

Small pixel tooltip for contextual hints without breaking the retro visual language.

Toggle switch with arcade-style on/off states for binary settings and modes.

Dropdown select with chunky pixel menu for retro forms and inventory pickers.

Segmented pixel progress bar for XP bars, loading meters, and completion tracking.

Text input with retro pixel outline matching the 8-bit design system forms.

Modal dialog with retro frame for confirmations and focused task overlays.

Chunky pixel checkbox for settings panels and retro-themed preference forms.

Retro card container with pixel frame borders for dashboards and game-inspired layouts.

Pixel-styled button with chunky borders and retro press states for nostalgic UIs.

Small pixel badge for status labels, rarity tiers, and compact metadata chips.

Square pixel-framed avatar for player profiles and character pickers.

Inline alert banner with pixel borders for warnings, errors, and success messages.