Also in the Unlumen UI registry

Copy a prompt for your agent, copy the install command, or open the docs that ship it.

AI Chat

ai-chat

A chat component that allows you to chat with an AI.

motion, lucide-react1 example

Docs ↗

Animated List

animated-list

A real-time push feed where new items animate in from the top with spring physics — Stripe Radar style.

motion1 file1 example

Docs ↗

Apple Switch

apple-switch

Animated toggle switch with separate track/thumb sizing, spring feedback, optional label text, and tone variants.

motion1 file1 example

Docs ↗

Aurora Card

aurora-card

Aurora-blur pricing card with a configurable hero area, layout hooks, and customizable shader controls.

@react-three/fiber, three1 example

Docs ↗

Blob Card

blob-card

Animated card with fluid blob header, animated glow border, and configurable colors.

1 file1 example

Docs ↗

Cards View Icon

cards-view-icon

Animated icon where four square dots reorder in a 2×2 grid via Motion layout animation when active, signaling a card view mode.

motion1 file1 example

Docs ↗

Clipped Circle

clipped-circle

A cursor-following spotlight effect that reveals a soft glowing circle wherever the user moves their mouse inside the container.

motion1 file1 example

Docs ↗

Command Menu

command-menu

A composable ⌘K command palette with fuzzy search, custom groups, built-in theme switcher, and animated content reveal.

next, next-themes, lucide-react1 file1 example

Docs ↗

Compact View Icon

compact-view-icon

Animated icon where a 3×2 grid of dots reorder themselves via Motion layout animation when active.

motion1 file1 example

Docs ↗

Copy Button

copy

A copy button component with a variety of styles and animations.

motion, lucide-react, class-variance-authority1 file1 example

Docs ↗

Cursor

An animated cursor component that allows you to customize both the cursor and cursor follow elements with smooth animations.

motion1 file1 example

Docs ↗

Cursor

cursor-primitive

An animated cursor component that allows you to customize both the cursor and cursor follow elements with smooth animations.

motion1 file

Dia Text Reveal

dia-text-reveal

Animated text reveal with a colorful gradient sweep effect, inspired by the Dia app.

motion1 example

Docs ↗

Dock

Animated dock with Gaussian magnification, spring physics, separators, and tooltip carets.

motion1 file1 example

Docs ↗

Expandable Navbar

expandable-navbar

A full-width fixed header with velocity-highlight hover, expanding inline dropdown, scroll hide/show, and a mobile circle-reveal overlay.

motion, next, next-themes, lucide-react1 example

Docs ↗

Favicon Search

favicon-search

A search input that fetches and smoothly animates the site favicon into the search bar as you type a URL.

motion, lucide-react1 file1 example

Docs ↗

File Tree

file-tree

Animated file-tree component with animated hover highlight, spring folder expand/collapse, and automatic file-type icons.

motion, lucide-react1 file1 example

Docs ↗

Floating Navbar

floating-navbar

A sticky floating pill navbar with scroll-velocity spring physics, velocity-highlight hover effect, dropdown menus, mobile overlay, and optional theme toggle.

motion, next, next-themes, lucide-react1 example

Docs ↗

GitHub Graph

github-graph

A polished, animated GitHub contribution graph for portfolio sites.

motion1 file1 example

Glowing Badge

glowing-badge

Badge with an animated pulsing glow dot. Supports status variants: default, success, warning, error, info.

motion1 file1 example

Docs ↗

Gooey Navbar Menu

gooey-navbar-menu

A spring-animated navbar menu with a gooey SVG-filtered background that connects the active trigger and dropdown panel.

framer-motion, lucide-react, class-variance-authority1 example

Docs ↗

Gooey SVG Filter

gooey-svg-filter

An SVG filter that creates a gooey, fluid merging effect on adjacent elements using Gaussian blur and alpha-channel color matrix manipulation.

1 example

Docs ↗

Gravity Stars Background

gravity-stars

A background component featuring a subtle yet engaging animated gravity stars effect.

motion1 example

Docs ↗

Hover Expand

hover-expand

A vertical list of rows that expand on hover to reveal a full-width image, animated with Motion springs.

motion1 file1 example

Docs ↗

Hover Feature Cards

hover-feature-cards

A responsive grid of feature cards where a description panel slides in from below on hover, with spring animation and optional image support.

motion1 file1 example

Docs ↗

Hover Image List

hover-image-list

A list of large headings that reveal an image on the left and shift right on hover, animated with Motion.

motion1 example

Docs ↗

Inline Testimonials

inline-testimonials

Testimonials rendered as inline flowing text with circular avatars. Hover to blur others and reveal the author's name and role.

motion, next1 example

Docs ↗

Kbd

Keyboard key and shortcut display component with a soft, minimal key style.

1 file1 example

Docs ↗

List View Icon

list-view-icon

Animated icon where three horizontal lines shuffle vertically when active, signaling a list view mode.

motion1 file1 example

Docs ↗

Magnetic Button

magnetic-button

A button that magnetically follows cursor proximity with spring physics. Smoothly snaps back when the cursor leaves.

motion, class-variance-authority1 file1 example

Docs ↗

Math Graph

math-graph

A real-time visual math function builder with animated SVG curves, a pan/zoom canvas, crosshair tooltip, and support for multiple expressions simultaneously.

motion, react-use-measure2 files1 example

Docs ↗

Motion FAQs Accordion

motion-faqs-accordion

A clean Motion-powered FAQ accordion with spring-animated content reveal.

motion1 file1 example

Docs ↗

Motion Slide Menu

motion-slide-menu

An animated React multi-level slide menu with recursive nested navigation, morphing category headers, and direction-aware transitions.

framer-motion, lucide-react, react-use-measure1 example

Motion Subtitle

motion-subtitle

Animated subtitle text with per-character reveal, blur transition, speed control, and top/bottom direction.

framer-motion1 file

Motion Tabs Menu

motion-tabs-menu

A floating bottom tab bar that expands upward with spring animations to reveal tab-specific content, with direction-aware slide transitions.

framer-motion, react-use-measure, lucide-react1 example

Docs ↗

Next.js Ship

nextjs-ship

Animated chip/CPU circuit board visualization with gradient pulse traces traveling along PCB-style paths.

motion1 file1 example

Docs ↗

Notion Floating Action Menu

notion-floating-action-menu

A faithful Notion-inspired quick-create menu with a compact action panel and an animated compose-to-close interaction.

motion1 example

Notion Mention Link

notion-mention-link

A Notion-inspired rich link mention with a securely fetched preview card on hover.

next3 files1 example

Orbital Image Wheel

orbital-image-wheel

Scroll-driven half-wheel image layout powered by GSAP ScrollTrigger, with cinematic blur/saturation/brightness focus and centered captions.

gsap1 file1 example

Docs ↗

Orbiting Skills

orbiting-skills

Animated skill badges that orbit a center element. On desktop the ring follows the cursor on hover; on mobile the ring is always visible.

motion1 file1 example

Docs ↗

Page Transition

page-transition

GSAP-powered Next.js App Router page transition provider. Wraps your layout to animate between pages with a curtain reveal or slide push — ported from the Codrops async transition demo.

gsap, next1 file1 example

Docs ↗

Perspective Flow

perspective-flow

Scroll-driven 3D image grid with perspective rotations, blur, brightness, and inner parallax — supports both GSAP ScrollTrigger and Framer Motion engines.

framer-motion, gsap1 file1 example

Docs ↗

Pinned List

pinned-list

A list of items that animate smoothly to a pinned section using Framer Motion layout animations.

motion, lucide-react1 file1 example

Docs ↗

Pixel Background

pixel

An interactive background featuring tiny pixel particles that ripple outward from the center on hover, then fade away.

next-themes2 examples

Docs ↗

Pixel Scroll Transition

pixel-scroll-transition

Canvas-based scroll transition that wipes between two colors with a configurable pixel grid, directional patterns, easing, and accent-color bands.

motion1 example

Avatar Group

primitives-animate-avatar-group

An animated avatar group that displays overlapping user images and smoothly shifts each avatar forward on hover to highlight it.

motion1 file

Code Block

primitives-animate-code-block

A code block component that animates the code as it is written.

shiki1 file

Cursor

primitives-animate-cursor

An animated cursor component that allows you to customize both the cursor and cursor follow elements with smooth animations.

motion1 file

Github Stars

primitives-animate-github-stars

A component that animates a number of stars, smoothly animating number transitions using the SlidingNumber component.

motion1 file

Motion Grid

primitives-animate-motion-grid

A grid that displays animations in a grid.

motion1 file

Pin List

primitives-animate-pinned-list

A pin list component that allows you to pin items to the top of the list.

motion1 file

Animate Slot

primitives-animate-slot

A slot component that allows you to use motion components with any element.

motion1 file

Spring

primitives-animate-spring

A flexible, animated spring component that attaches a draggable element to its origin with a spring line.

motion1 file

Tabs

primitives-animate-tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

motion1 file

Tooltip

primitives-animate-tooltip

An animated tooltip that shows contextual info on hover or focus and smoothly glides to the next element without disappearing between transitions.

motion, @floating-ui/react1 file

Button

primitives-buttons-button

A simple button that animates on hover and tap.

motion1 file

Flip Button

primitives-buttons-flip

A button that flips between two states on hover.

motion1 file

Liquid Button

primitives-buttons-liquid

A button that fills on hover.

motion1 file

Ripple Button

primitives-buttons-ripple

A button that animates on tap with a ripple effect.

motion1 file

Auto Height

primitives-effects-auto-height

An effect that automatically adjusts the height of an element based on its content.

motion1 file

Blur

primitives-effects-blur

An effect that allows you to animate elements with a blur effect on first view or load.

motion1 file

Click

primitives-effects-click

An effect that creates animated effects at the click position, adding interactive feedback to user actions.

motion1 file

Effect

primitives-effects-effect

An effect that allows you to animate elements on first view or load.

motion1 file

Fade

primitives-effects-fade

An effect that allows you to animate elements with a fade effect on first view or load.

motion1 file

Highlight Nav Menu

primitives-effects-highlight-nav-menu

A Radix UI NavigationMenu with animated highlight hover effects built in.

@radix-ui/react-navigation-menu, class-variance-authority, lucide-react1 file

Image Zoom

primitives-effects-image-zoom

An effect that allows you to zoom in on an image on hover.

motion1 file

Magnetic

primitives-effects-magnetic

A magnetic effect that clings to the cursor, creating a magnetic attraction effect.

motion1 file

Particles

primitives-effects-particles

A particles effect that creates a particle system.

motion1 file

Shine

primitives-effects-shine

An animated light sweep effect with configurable timing, colors, and triggers (hover, tap, or continuous).

motion1 file

Slide

primitives-effects-slide

An effect that allows you to animate elements with a slide effect on first view or load.

motion1 file

Theme Toggler

primitives-effects-theme-toggler

An effect that allows you to toggle the theme gradually.

1 file

Tilt

primitives-effects-tilt

An effect that allows you to animate elements with a tilt effect on mouse hover.

motion1 file

Zoom

primitives-effects-zoom

An effect that allows you to animate elements with a zoom effect on first view or load.

motion1 file

Counting Number

primitives-texts-counting-number

A counting number animation.

motion1 file

Gradient Text

primitives-texts-gradient

A gradient text animation.

motion1 file

Morphing Text

primitives-texts-morphing

A text component that smoothly morphs characters to transition between strings.

motion1 file

Rolling Text

primitives-texts-rolling

A rolling text animation.

motion1 file

Rotating Text

primitives-texts-rotating

A rotating text animation.

motion1 file

Scrolling Number

primitives-texts-scrolling-number

A scrolling number animation.

motion1 file

Shimmering Text

primitives-texts-shimmering

A shimmering text animation.

motion1 file

Sliding Number

primitives-texts-sliding-number

A sliding number animation.

motion, react-use-measure1 file

Splitting Text

primitives-texts-splitting

A splitting text animation.

motion1 file

Typing Text

primitives-texts-typing

A typing text animation.

motion1 file

Progressive Blur

progressive-blur

Top and bottom progressive blur overlays that stack multiple backdrop-filter layers to produce a smooth edge-to-transparent blur effect.

1 file1 example

Docs ↗

Questionnaire

A motion-enhanced multi-step questionnaire with animated checkpoints, direction-aware blur transitions, validation, and keyboard shortcuts.

@shadcn/react, hugeicons-react, motion1 example

Refresh Button

refresh

An icon button that spins on click and supports async refresh callbacks — ideal for reloading component previews or live data.

class-variance-authority, motion, lucide-react1 file1 example

Docs ↗

Scramble Text

scramble-text

A text animation component that reveals characters with a scramble/glitch effect, with imperative controls for manual triggering.

1 file1 example

Docs ↗

Shimmering Text

shimmering-text

Animated gradient shimmer text with viewport-triggered and repeating animation support.

motion1 file1 example

Docs ↗

Shimmer Skeleton

shimmer-skeleton

Lightweight loading skeleton with a smooth shimmer sweep animation.

1 file1 example

Docs ↗

Sidebar 002

sidebar-002

Slide-in overlay sidebar with spring animation, animated dash items, and cursor-following video preview.

motion1 example

Docs ↗

Sidebar Toggle Icon

sidebar-toggle-icon

Animated SVG icon that morphs between open and closed sidebar panel states using Motion path interpolation.

motion1 file1 example

Docs ↗

Animate Slot

slot

A slot component that allows you to use motion components with any element.

motion1 file

Smart Animate Text

smart-animate-text

Per-character blur-slide animation with direct value changes and no animation queue.

motion1 example

Docs ↗

Social Hover Cards

social-hover-cards

A row of social links with a shared morphing preview card and direction-aware content transitions.

motion1 example

Square Pattern Background

square-pattern

An interactive grid background where squares randomly light up with colors and react to hover.

1 example

Docs ↗

Stacked Feature Cards

stacked-feature-cards

A two-column section with a sticky animated hero card on the left and a stack of rotating feature cards on the right.

motion, lucide-react1 example

Docs ↗

Team Stack

team-stack

A stacked deck of team member cards that fans out on hover (desktop) or tap (mobile), each with an animated CTA pill and spring physics.

motion, lucide-react1 example

Docs ↗

Text Reveal

text-reveal

Scroll-driven word-by-word or character-by-character text reveal using Motion's useScroll and useTransform.

motion1 file1 example

Docs ↗

Theme Switch

theme-switch

Animated dark / light mode toggle button with a spring-driven sun ↔ moon icon swap and optional View Transition reveal.

next-themes, motion1 file1 example

Docs ↗

Tilt

A spring-animated 3D tilt wrapper that tracks the cursor inside the element.

motion1 file

Docs ↗

Tilt Card

tilt-card

A card with 3D spring tilt, optional floating image, badge and radial shine on hover.

motion1 file1 example

Docs ↗

Tooltip Preview

tooltip-preview

Link tooltip that reveals a website preview card with title, description, image and favicon.

motion1 file1 example

Docs ↗

Velocity Highlight

velocity-highlight

A highlight effect with smooth spring physics that tracks the active element across hover or click interactions.

motion1 file1 example

Docs ↗

Vercel Snap Text

vercel-snap-text

A scroll-driven text list that snaps exactly to each item. The active item scales up with an optional prefix, others fade and indent — all animated with Motion springs.

motion1 example

Docs ↗

Video Slider

video-slider

A video carousel with animated slide transitions and playback controls.

motion, lucide-react1 example

Docs ↗

Wave Background

wave-background

A morphing SVG wave divider that transitions between sections. Supports scroll-driven morphing and ambient looping animation modes.

motion1 example

Docs ↗

From the Unlumen UI readme

unlumen UI Docs

I maintain this open-source documentation site and public component registry for unlumen UI. The code and public registry items in this repository are licensed under MIT.

I keep commercial Pro components, license validation, customer data, and private product APIs in a separate private repository.

Requirements

Node.js 22.18.0 (see .nvmrc)
pnpm 10.26.0 (enabled through Corepack)

corepack enable
pnpm install --frozen-lockfile

Development

pnpm dev

The documentation app uses basePath: "/docs" and runs locally at http://localhost:3001/docs.

Architecture

app/ contains the Next.js App Router documentation site and search endpoints.
content/docs/ contains MDX documentation.
registry/ is the source of truth for public shadcn registry components.
public/r/ and __registry__/index.tsx are generated registry artifacts.
packages/ui/ provides shared UI components used by the docs application.

Registry workflow

Validate source metadata before generating artifacts:

pnpm registry:validate:sources
pnpm registry:build
pnpm registry:validate:generated

registry:build uses the lockfile-installed shadcn CLI. Commit its generated outputs with the corresponding source changes.

Verification and release

Before opening a pull request or release:

pnpm format:check
pnpm lint
pnpm test:unit
pnpm build
pnpm registry:validate:sources
pnpm registry:validate:generated

GitHub Dependabot monitors production dependencies for published security advisories.

Release from a clean, reviewed branch only. Keep local browser/debug artifacts, credentials, and commercial source code out of commits.

Contributing and security

See CONTRIBUTING.md and SECURITY.md.

Unlumen UI contents

Matrix Image

Expand Menu

Floating Tooltip

LED Dot Matrix Display

LED Dot Matrix Display

Scroll Progress

Scroll Reveal Image

Aurora Blur

Glow Button

Cursor Image Trail

Aurora Bars

Horizontal Depth Fade

Pixel Liquid Background

Highlight

Side By Side Slide

About Unlumen UI

Also in the Unlumen UI registry

AI Chat

Animated List

Apple Switch

Aurora Card

Blob Card

Cards View Icon

Clipped Circle

Command Menu

Compact View Icon

Copy Button

Cursor

Cursor

Dia Text Reveal

Dock

Expandable Navbar

Favicon Search

File Tree

Floating Navbar

GitHub Graph

Glowing Badge

Gooey Navbar Menu

Gooey SVG Filter

Gravity Stars Background

Hover Expand

Hover Feature Cards

Hover Image List

Inline Testimonials

Kbd

List View Icon

Magnetic Button

Math Graph

Motion FAQs Accordion

Motion Slide Menu

Motion Subtitle

Motion Tabs Menu

Next.js Ship

Notion Floating Action Menu

Notion Mention Link

Orbital Image Wheel

Orbiting Skills

Page Transition

Perspective Flow

Pinned List

Pixel Background

Pixel Scroll Transition

Avatar Group

Code Block

Cursor

Github Stars

Motion Grid

Pin List

Animate Slot

Spring

Tabs

Tooltip

Button

Flip Button

Liquid Button

Ripple Button

Auto Height

Blur

Click