New This Week: 9 February 2026

We have been busy building out the UI Destination library. Here is what landed this week.

Components

Accordion

Collapsible sections with smooth height animation and accessible controls.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/accordion.json

View component

Activity Feed

List of activity items with icon, description, timestamp, and optional action link.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/activity-feed.json

View component

Activity Feed Item

Timeline style activity entry with avatar, action text, timestamp, and optional attachment preview.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/activity-feed-item.json

View component

Alert Banner

Full-width dismissible banner for announcements with icon and close button.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/alert-banner.json

View component

Ambient Glow Card

A feature card with a rotating ambient aura for premium highlights.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/ambient-glow-card.json

View component

Animated Beam Connectors

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/animated-beam-connectors.json

View component

Animated Border Gradient

Animated conic gradient border wrapper with configurable radius and hover pause.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/animated-border-gradient.json

View component

Animated Card Hover

Hover tilt card with optional glare and depth effect.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/animated-card-hover.json

View component

Animated Counter

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/animated-counter.json

View component

Animated Gradient Border Card

Card with a rotating gradient border for premium emphasis.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/animated-gradient-border-card.json

View component

Animated Marquee Strip

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/animated-marquee-strip.json

View component

Animated Spotlight

Cursor spotlight overlay with spring follow and blur control.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/animated-spotlight.json

View component

Animated Text Reveal

Reveal text by letter or word as it enters the viewport.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/animated-text-reveal.json

View component

Audio Player

UI only audio player with play/pause, progress, volume control, and time display.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/audio-player.json

View component

Aurora Button

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/aurora-button.json

View component

Status Avatar

Avatar with image fallback and a small status indicator badge.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/avatar-status.json

View component

Badge

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/badge.json

View component

Bento Card

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/bento-card.json

View component

Bento Grid

Asymmetric bento layout tiles with ambient glow and shine animations.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/bento-grid.json

View component

Border Beam Button

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/border-beam-button.json

View component

Bottom Nav Bar

Mobile-style bottom navigation with icons, labels, and active state.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/bottom-nav-bar.json

View component

Breadcrumbs

Navigation breadcrumbs with separators, current page styling, and optional collapse.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/breadcrumbs.json

View component

Button

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/button.json

View component

Calendar Grid

Monthly calendar grid with events and navigation.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/calendar-grid.json

View component

Carousel

Horizontal slide carousel with autoplay, dot navigation, and swipe indicators.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/carousel.json

View component

Cart Item

Cart row with thumbnail, title, inline quantity selector, price, and remove button.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/cart-item.json

View component

Changelog Entry

Version entry with tags, date, and collapsible details.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/changelog-entry.json

View component

Character Counter

Textarea with live character count, limit enforcement, and warning states.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/character-counter.json

View component

Chat Bubble

Message bubble with avatar, timestamp, tail pointer for left/right alignment, and read receipt dots.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/chat-bubble.json

View component

Checkbox Group

Checkbox list with optional select all toggle and indeterminate support.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/checkbox-group.json

View component

Circular Progress

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/circular-progress.json

View component

Color Picker

Popover color picker with preset swatches, recent colors, and custom hex input.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/color-picker.json

View component

Combobox Multi

Multi-select combobox with search filtering, tag display, and keyboard navigation.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/combobox-multi.json

View component

Command Menu

Searchable command palette with grouped results and keyboard navigation.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/command-menu.json

View component

Comment Thread

Nested comment display with reply action, like count, and indented replies.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/comment-thread.json

View component

Comparison Bar

Horizontal bar with two values, labels, and percentage split.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/comparison-bar.json

View component

Comparison Table

Feature comparison table for plans or tiers with boolean checkmarks.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/comparison-table.json

View component

Confetti

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/confetti.json

View component

Confetti Burst

Triggered confetti celebration effect that bursts outward from the center.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/confetti-burst.json

View component

Cursor Spotlight

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/cursor-spotlight.json

View component

Data Table

Sortable, filterable data table with pagination and search.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/data-table.json

View component

Data Table Mini

Compact sortable table with optional striped rows for quick datasets.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/data-table-mini.json

View component

Data Table Simple

Lightweight sortable table with column headers, row click, and semantic styling.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/data-table-simple.json

View component

Date Range Picker

Date range selection with calendar dropdown, presets, and clear action.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/date-range-picker.json

View component

Date Time Picker

Combined date and time picker with calendar dropdown and time input fields.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/date-time-picker.json

View component

Dock

Animated dock with magnification and hover labels inspired by desktop launchers.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/dock.json

View component

Dot Pattern Background

Animated dot grid background with a soft wave motion.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/dot-pattern-background.json

View component

Drag to Scroll Gallery

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/drag-scroll-gallery.json

View component

Embed Card

Embeddable content card with responsive iframe support.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/embed-card.json

View component

Empty State

Centered empty state placeholder with icon, text, and optional action.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/empty-state.json

View component

Expandable Card

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/expandable-card.json

View component

Feature Card

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/feature-card.json

View component

Feature Checklist

Checklist list with checkmark icons, title, and optional descriptions.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/feature-checklist.json

View component

Feature Grid

Responsive grid of feature items with icons, titles, descriptions, and optional links.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/feature-grid.json

View component

File Dropzone

Drag and drop upload area with preview, progress, and file type validation.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/file-dropzone.json

View component

File Upload

Drag and drop file upload zone with progress indicators.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/file-upload.json

View component

Flip Card

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/flip-card.json

View component

Floating Input

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/floating-input.json

View component

Floating Toolbar

A floating pill toolbar with an animated active indicator and springy hover motion.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/floating-toolbar.json

View component

Form Field

Wrapper for form controls with label, description, required indicator, and error messaging.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/form-field.json

View component

Glass Card

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/glass-card.json

View component

Glow Card Stack

Stacked cards that spread a soft glow on hover.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/glow-card-stack.json

View component

Glow Input

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/glow-input.json

View component

Gradient Card

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/gradient-card.json

View component

Gradient Text

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/gradient-text.json

View component

Hover Border Gradient Card

Card with an animated gradient border that energizes on hover.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/hover-border-gradient-card.json

View component

Image Gallery

Grid gallery with lightbox modal, keyboard navigation (arrows, escape), and thumbnail strip.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/image-gallery.json

View component

Inline Edit

Click to edit inline text with enter to save and escape to cancel.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/inline-edit.json

View component

Interactive Bento Grid

A bento grid that expands and rearranges items on hover.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/interactive-bento-grid.json

View component

Kanban Board

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/kanban-board.json

View component

Key Value List

Definition list for metadata with horizontal or vertical layouts.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/key-value-list.json

View component

Link Preview

OpenGraph style preview card with image, title, description, and domain.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/link-preview.json

View component

Loading Dots

Bouncing dots loader with staggered animation for inline loading states.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/loading-dots.json

View component

Login Form

Email and password login form with remember me, forgot password, and social login buttons.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/login-form.json

View component

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.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/magnetic-button.json

View component

Marquee

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/marquee.json

View component

Media Grid

Masonry style grid for mixed media items with hover overlays.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/media-grid.json

View component

Mega Menu

Dropdown navigation with columns, icons, descriptions, and featured items.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/mega-menu.json

View component

Mention Input

Text input that supports @mentions with dropdown suggestions and highlighted mentions.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/mention-input.json

View component

Meteors Background

Animated meteor streaks background for hero sections or cards.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/meteors-background.json

View component

Metric Bar

Horizontal bar with label, value, and filled percentage visualization.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/metric-bar.json

View component

Metric Display

Large number display with count animation, unit suffix, and optional comparison value.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/metric-display.json

View component

Mini Chart

Tiny sparkline or bar chart for inline data visualization.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/mini-chart.json

View component

Mobile Drawer

Off-canvas navigation drawer with overlay and swipe-to-close support.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/mobile-drawer.json

View component

Morph Text

Morphs between words with a smooth blur and slide transition.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/morph-text.json

View component

Morphing Blob

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/morphing-blob.json

View component

Motion Tabs

Animated tabs with a sliding indicator and motion content transitions.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/motion-tabs.json

View component

Multi Select

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/multi-select.json

View component

Noise Texture Background

Subtle animated grain overlay for sections and cards.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/noise-texture-background.json

View component

Notification Badge

Small count badge with 99+ overflow, dot variant, and optional pulse animation.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/notification-badge.json

View component

Notification Center

Dropdown panel for notifications with unread count, mark as read, and clear all actions.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/notification-center.json

View component

Notification Toast

Toast notification with variants, auto-dismiss, and optional action button.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/notification-toast.json

View component

Number Counter

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/number-counter.json

View component

Orbit Spinner

Circular orbiting dots that create a dynamic spinner.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/orbit-spinner.json

View component

OTP Input

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/otp-input.json

View component

Pagination

Page navigation with previous, next, and ellipsis for large ranges.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/pagination.json

View component

Parallax Section

Layered parallax section with foreground and background motion.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/parallax-section.json

View component

Particle Field

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/particle-field.json

View component

Password Input

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/password-input.json

View component

Password Strength

Password strength meter with animated fill and gradient bar.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/password-strength.json

View component

Pin Input

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/pin-input.json

View component

Preview Wrapper

Preview container with theme and light or dark controls.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/preview-wrapper.json

View component

Price Tag

Price display with currency symbol, strikethrough for discounts, and optional sale badge.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/price-tag.json

View component

Pricing Card

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/pricing-card.json

View component

Pricing Toggle

Segmented toggle for switching between billing cadences.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/pricing-toggle.json

View component

Product Card

E-commerce product card with image, title, price, rating stars, quick-add button, and wishlist toggle.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/product-card.json

View component

Profile Card

Profile card with avatar, role, stats, and action buttons.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/profile-card.json

View component

Progress

Progress bar with animated indicator and customizable value.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/progress.json

View component

Progress Bar

Animated progress bar with moving stripe accents.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/progress-bar.json

View component

Progress Steps

Multi-step progress indicator with horizontal and vertical layouts.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/progress-steps.json

View component

Pulse Loader

Circular pulse loader with a soft expanding ring.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/pulse-loader.json

View component

Pulse Ring

Animated pulsing ring effect for notification indicators and status badges.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/pulse-ring.json

View component

QR Code

Generates a QR code from a value string with configurable size and error correction.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/qr-code.json

View component

Quantity Selector

Numeric stepper with minus/plus buttons, number input, min/max limits, and disabled states.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/quantity-selector.json

View component

Rating Input

Configurable rating input with star or heart icons, hover previews, and optional half steps.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/rating-input.json

View component

Rating Stars

Rating display with half steps, custom icons, and optional readonly mode.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/rating-stars.json

View component

Reaction Picker

Emoji reaction bar with expandable grid and recently used section.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/reaction-picker.json

View component

Rich Text Editor

Lightweight rich text editor with basic formatting controls.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/rich-text-editor.json

View component

Rich Text Input

Simple rich text input with bold, italic, and link toolbar using contenteditable.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/rich-text-input.json

View component

Ripple Button

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/ripple-button.json

View component

Scramble Text

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/scramble-text.json

View component

Scroll Progress Bar

Scroll progress indicator with bar and circle variants.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/scroll-progress-bar.json

View component

Scroll Reveal Text

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/scroll-reveal-text.json

View component

Search Input

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/search-input.json

View component

Searchable Select

Combobox with search filtering, keyboard navigation, and multi-select support.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/searchable-select.json

View component

Share Menu

Share button with dropdown menu for Twitter, LinkedIn, Email, and copy link.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/share-menu.json

View component

Shimmer Button

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/shimmer-button.json

View component

Shimmer Card

Full card skeleton with animated shimmer sweep.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/shimmer-card.json

View component

Shimmer Effect

Skeleton loading shimmer animation for placeholder content while data loads.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/shimmer-effect.json

View component

Skeleton

Shimmering skeleton placeholders with text, avatar, card, and image variants.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/skeleton.json

View component

Skeleton Card

Card skeleton placeholder with shimmer animation and configurable rows.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/skeleton-card.json

View component

Skeleton Shimmer

Skeleton block with a sweeping shimmer highlight.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/skeleton-shimmer.json

View component

Slider

Range slider with track, range, and thumb components.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/slider.json

View component

Slider Range

Dual-handle range slider with labels and live min max values.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/slider-range.json

View component

Sortable List

Drag and drop list for reordering custom list items with a grab handle.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/sortable-list.json

View component

Sparkline

Simple inline line chart with configurable height and color tone.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/sparkline.json

View component

Sparkline Chart

Tiny inline chart for displaying quick trends in compact spaces.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/sparkline-chart.json

View component

Spotlight Card

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/spotlight-card.json

View component

Spotlight Hover Card

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/spotlight-hover-card.json

View component

Stack Cards

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/stack-cards.json

View component

Stat Card

Statistic display card with value, label, optional icon, trend indicator, and optional sparkline area.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/stat-card.json

View component

Stat Widget

Compact stat widget with label, value, and optional trend indicator.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/stat-widget.json

View component

Stats Card

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/stats-card.json

View component

Status Indicator

Status badge with colored dot and label for online, offline, pending, or error states.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/status-indicator.json

View component

Stepper

Step progress indicator with numbered steps, current, and completed states.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/stepper.json

View component

Sticky Reveal Cards

Sticky stacked cards that reveal as the user scrolls.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/sticky-reveal-cards.json

View component

Swipe Cards

Tinder-style swipeable card stack with drag gestures and action buttons.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/swipe-cards.json

View component

Switch

Toggle switch for boolean settings, built with accessible primitives.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/switch.json

View component

Tag Input

Tag input with autocomplete suggestions and removable chips.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/tag-input.json

View component

Testimonial Card

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/testimonial-card.json

View component

Text Highlight On Scroll

Highlights words in sequence as the user scrolls.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/text-highlight-on-scroll.json

View component

Theme Toggle

Dark and light mode toggle with smooth icon transitions.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/theme-toggle.json

View component

Tilt Card

3D perspective card that tilts based on cursor position.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/tilt-card.json

View component

Timeline

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/timeline.json

View component

Toast Stack

Stackable toast notifications with auto-dismiss, variants, and slide-in animation.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/toast-stack.json

View component

Toggle Group

Toggle button group with single or multiple selection and orientation controls.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/toggle-group.json

View component

Tooltip

Accessible tooltip with provider, trigger, and content primitives.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/tooltip.json

View component

Tree View

Collapsible tree structure with icons for hierarchical data.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/tree-view.json

View component

Typewriter Text

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/typewriter-text.json

View component

Typing Delete Text

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/typing-delete-text.json

View component

User Avatar

User avatar with fallback initials, status indicator, and size variants.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/user-avatar.json

View component

Video Embed

Responsive video container with a play overlay and aspect ratio options.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/video-embed.json

View component

Video Player

Custom video player with play/pause, progress bar, volume control, and fullscreen toggle.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/video-player.json

View component

Virtual List

Windowed list for efficient rendering of long datasets.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/virtual-list.json

View component

Wave Loader

Animated bars that mimic a sound wave while loading.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/wave-loader.json

View component

Wishlist Button

Heart icon toggle button with filled/outline states and optional count badge.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/wishlist-button.json

View component

Word Rotate Text

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

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/word-rotate-text.json

View component

Blocks

Block Demos

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/block-demos.json

View block

Contact Form

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/contact-form.json

View block

Cta Email Capture

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/cta-email-capture.json

View block

Cta Gradient Banner

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/cta-gradient-banner.json

View block

Faq Accordion

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/faq-accordion.json

View block

Features Bento Grid

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/features-bento-grid.json

View block

Features Card Grid

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/features-card-grid.json

View block

Features Comparison Table

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/features-comparison-table.json

View block

Features Tabs

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/features-tabs.json

View block

Footer

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/footer.json

View block

Hero Aurora

A hero section block with atmospheric gradient backdrops and layered glow effects.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/hero-aurora.json

View block

Hero Floating

A hero block with floating badges and cards that animate gently in place.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/hero-floating.json

View block

Hero Grid

A hero block with a subtle dot grid background and structured highlight cards.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/hero-grid.json

View block

Hero Mesh

A hero block with smooth mesh glow blobs and layered depth.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/hero-mesh.json

View block

Hero Split

A split hero layout with copy on the left and a product preview on the right.

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/hero-split.json

View block

Logo Carousel

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/logo-carousel.json

View block

Newsletter Signup

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/newsletter-signup-block.json

View block

Pricing Table

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/pricing-table.json

View block

Stats Counter Section

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/stats-counter-section.json

View block

Team Section

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/team-section.json

View block

Testimonials Carousel

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/testimonials-carousel.json

View block

Trust Badges Row

Install:

npx shadcn@latest add https://ui-destination.vercel.app/r/trust-badges-row.json

View block

Layouts

Dashboard Shell

View layout

Layout Demos

View layout

Login Page

View layout

Saas Landing Page

View layout

Settings Page

View layout

Signup Page

View layout

Waitlist Page

View layout

Quick Start

Add any component to your project with the shadcn CLI:

npx shadcn@latest add https://ui-destination.vercel.app/r/[component].json

Browse all components at /components.