Registry

A 21st.dev-style catalog of every installable element in JSN UI. The CLI is on the roadmap — until then, copy the snippet and drop the files into your project.

CLI quick start
Initialize JSN UI in a fresh Next.js project, then add any element from the catalog below.
Bash
# Coming soon — the JSN UI CLI
pnpm dlx jsn-ui init
pnpm dlx jsn-ui add button dialog message
pnpm dlx jsn-ui add @blocks/hero
pnpm dlx jsn-ui add @ai/agent-card
Registry endpoints
Programmatic access to every element. Useful for IDE plugins and external tools.
Bash
# List all entries
curl https://jsn-ui.dev/registry.json

# Fetch a single element by slug
curl https://jsn-ui.dev/r/button.json
curl https://jsn-ui.dev/r/agent-card.json
curl https://jsn-ui.dev/r/hero.json
View registry.json/r/button.json
Filter:138 of 138 entries
button
ui
Button
6 variants × 4 sizes, asChild via Radix Slot.
Bash
pnpm dlx jsn-ui add button
@radix-ui/react-slotclass-variance-authority
card
ui
Card
Header, title, description, content, footer, action.
Bash
pnpm dlx jsn-ui add card
input
ui
Input
forwardRef, focus ring, file: styling, aria-invalid.
Bash
pnpm dlx jsn-ui add input
label
ui
Label
Radix Label wrapper for accessible form labels.
Bash
pnpm dlx jsn-ui add label
@radix-ui/react-label
badge
ui
Badge
6 variants incl. success and warning.
Bash
pnpm dlx jsn-ui add badge
class-variance-authority
avatar
ui
Avatar
Radix Avatar with image and fallback initials.
Bash
pnpm dlx jsn-ui add avatar
@radix-ui/react-avatar
separator
ui
Separator
Horizontal and vertical Radix separator.
Bash
pnpm dlx jsn-ui add separator
@radix-ui/react-separator
textarea
ui
Textarea
forwardRef, matches Input styling.
Bash
pnpm dlx jsn-ui add textarea
dialog
ui
Dialog
Animated modal with header, content, footer.
Bash
pnpm dlx jsn-ui add dialog
@radix-ui/react-dialog
dropdown-menu
ui
Dropdown menu
Sections, items, checkbox/radio, sub-menus.
Bash
pnpm dlx jsn-ui add dropdown-menu
@radix-ui/react-dropdown-menu
tabs
ui
Tabs
Radix tabs with built-in keyboard navigation.
Bash
pnpm dlx jsn-ui add tabs
@radix-ui/react-tabs
tooltip
ui
Tooltip
Hover tooltip with provider, content, arrow.
Bash
pnpm dlx jsn-ui add tooltip
@radix-ui/react-tooltip
select
ui
Select
Full Radix Select with viewport and scroll buttons.
Bash
pnpm dlx jsn-ui add select
@radix-ui/react-select
switch
ui
Switch
Toggle switch with smooth animation.
Bash
pnpm dlx jsn-ui add switch
@radix-ui/react-switch
slider
ui
Slider
Single-value slider with Radix internals.
Bash
pnpm dlx jsn-ui add slider
@radix-ui/react-slider
popover
ui
Popover
Positioned panel with anchor support.
Bash
pnpm dlx jsn-ui add popover
@radix-ui/react-popover
combobox
ui
Combobox
Searchable select with keyboard nav and filtering.
Bash
pnpm dlx jsn-ui add combobox
@radix-ui/react-slot
date-picker
ui
Date Picker
Input + popover calendar with clear button.
Bash
pnpm dlx jsn-ui add date-picker
calendar
ui
Calendar
Month-grid date picker with prev/next navigation.
Bash
pnpm dlx jsn-ui add calendar
pagination
ui
Pagination
Page numbers + prev/next with sibling window + ellipses.
Bash
pnpm dlx jsn-ui add pagination
breadcrumb
ui
Breadcrumb
Hierarchical path with chevron or slash separators.
Bash
pnpm dlx jsn-ui add breadcrumb
steps
ui
Steps
Stepper / progress indicator (horizontal or vertical).
Bash
pnpm dlx jsn-ui add steps
avatar-group
ui
Avatar Group
Stacked row of avatars with overflow counter.
Bash
pnpm dlx jsn-ui add avatar-group
kbd
ui
Kbd
Keyboard shortcut chip.
Bash
pnpm dlx jsn-ui add kbd
skeleton
ui
Skeleton
Loading placeholder with pulse animation.
Bash
pnpm dlx jsn-ui add skeleton
empty-state
ui
Empty State
Centered placeholder for empty data / no results.
Bash
pnpm dlx jsn-ui add empty-state
toast
ui
Toast
Auto-dismissing notifications (success/error/info).
Bash
pnpm dlx jsn-ui add toast
resizable
ui
Resizable
Two-pane split with mouse and keyboard resize.
Bash
pnpm dlx jsn-ui add resizable
collapsible
ui
Collapsible
Show/hide panel using native details element.
Bash
pnpm dlx jsn-ui add collapsible
hover-card
ui
Hover Card
Hover-revealed popover with configurable delays.
Bash
pnpm dlx jsn-ui add hover-card
data-table
ui
Data Table
Sortable table with custom cells and row keys.
Bash
pnpm dlx jsn-ui add data-table
tag-input
ui
Tag Input
Chip-style multi-input with suggestions.
Bash
pnpm dlx jsn-ui add tag-input
message
ai
Message
Chat bubble with role + avatar + content + actions.
Bash
pnpm dlx jsn-ui add message
conversation
ai
Conversation
Auto-scrolling chat thread with empty state.
Bash
pnpm dlx jsn-ui add conversation
prompt-input
ai
Prompt Input
Auto-grow textarea with tool slots and submit.
Bash
pnpm dlx jsn-ui add prompt-input
reasoning
ai
Reasoning
Collapsible chain-of-thought trace.
Bash
pnpm dlx jsn-ui add reasoning
tool
ai
Tool
Tool-call display with collapsible output.
Bash
pnpm dlx jsn-ui add tool
sources
ai
Sources
Citation list with title, description, link.
Bash
pnpm dlx jsn-ui add sources
agent-card
ai
Agent Card
Status-coded agent tile (idle/running/done/error).
Bash
pnpm dlx jsn-ui add agent-card
code-block
ai
Code Block
Lightweight TS/JS/Python syntax highlighting.
Bash
pnpm dlx jsn-ui add code-block
artifact
ai
Artifact
Preview panel with header and close button.
Bash
pnpm dlx jsn-ui add artifact
loader
ai
Loader
Dots, spinner, and bars loaders.
Bash
pnpm dlx jsn-ui add loader
hero
block
Hero
Big headline, tagline, two CTAs, badge row.
Bash
pnpm dlx jsn-ui add hero
feature-grid
block
Feature Grid
3×2 grid of icon + title + description tiles.
Bash
pnpm dlx jsn-ui add feature-grid
bento
block
Bento Grid
Mixed-size bento grid for showcasing features.
Bash
pnpm dlx jsn-ui add bento
pricing
block
Pricing
3-tier pricing table with a highlighted middle tier.
Bash
pnpm dlx jsn-ui add pricing
stats
block
Stats
4-column animated stats strip.
Bash
pnpm dlx jsn-ui add stats
testimonials
block
Testimonials
3-column customer quote grid with avatar.
Bash
pnpm dlx jsn-ui add testimonials
logo-cloud
block
Logo Cloud
Strip of partner / customer logos.
Bash
pnpm dlx jsn-ui add logo-cloud
cta
block
Call to action
Bottom-of-page CTA section with two buttons.
Bash
pnpm dlx jsn-ui add cta
marquee
block
Marquee
Infinite horizontally scrolling strip with pause-on-hover.
Bash
pnpm dlx jsn-ui add marquee
dock
block
Dock
macOS-style floating dock with magnify-on-hover.
Bash
pnpm dlx jsn-ui add dock
timeline
block
Timeline
Vertical event list with connecting line and icons.
Bash
pnpm dlx jsn-ui add timeline
faq
block
FAQ
Accordion list using native <details> elements.
Bash
pnpm dlx jsn-ui add faq
comparison
block
Comparison table
Feature-vs-product table with boolean or string cells.
Bash
pnpm dlx jsn-ui add comparison
animated-tabs
block
Animated tabs
Tab strip with sliding CSS indicator.
Bash
pnpm dlx jsn-ui add animated-tabs
spotlight
block
Spotlight card
Card that follows the cursor with a soft radial highlight.
Bash
pnpm dlx jsn-ui add spotlight
gradient-text
block
Gradient text
Text with a gradient fill, optionally animated.
Bash
pnpm dlx jsn-ui add gradient-text
fade-in
block
FadeIn
Fade + slide-in on mount with direction/delay/distance.
Bash
pnpm dlx jsn-ui add fade-in
scroll-reveal
block
ScrollReveal
Fade + slide-in when scrolled into view via IntersectionObserver.
Bash
pnpm dlx jsn-ui add scroll-reveal
count-up
block
CountUp
Animates a number from 0 to value with ease-out cubic.
Bash
pnpm dlx jsn-ui add count-up
typewriter
block
Typewriter
Types out text character by character, optional phrase cycling.
Bash
pnpm dlx jsn-ui add typewriter
shimmer
block
Shimmer
Loading skeleton with animated gradient sweep.
Bash
pnpm dlx jsn-ui add shimmer
pulse
block
Pulse
Glowing radial pulse behind its children. Good for CTAs.
Bash
pnpm dlx jsn-ui add pulse
glow-card
block
GlowCard
Card that follows the cursor with a soft radial glow.
Bash
pnpm dlx jsn-ui add glow-card
tilt-3d
block
Tilt3D
3D tilt on hover following the cursor with perspective.
Bash
pnpm dlx jsn-ui add tilt-3d
magnetic
block
Magnetic
Pulls content toward the cursor like a magnet.
Bash
pnpm dlx jsn-ui add magnetic
gradient-border
block
GradientBorder
Animated conic gradient ring around children.
Bash
pnpm dlx jsn-ui add gradient-border
mcp-server
section
MCP server
Model Context Protocol server for icon search in Claude/Cursor/Continue.
Bash
pnpm add -g @jsn-ui/mcp
use-debounce
section
useDebounce
Debounce a fast-changing value to a stable one.
Bash
pnpm dlx jsn-ui add use-debounce
use-local-storage
section
useLocalStorage
Persistent state in localStorage with SSR safety.
Bash
pnpm dlx jsn-ui add use-local-storage
use-media-query
section
useMediaQuery
Reactive CSS media query match status.
Bash
pnpm dlx jsn-ui add use-media-query
use-click-outside
section
useClickOutside
Detect pointer events outside a ref (close popovers).
Bash
pnpm dlx jsn-ui add use-click-outside
use-intersection
section
useIntersection
IntersectionObserver as a hook, with freeze-once-visible.
Bash
pnpm dlx jsn-ui add use-intersection
use-copy-to-clipboard
section
useCopyToClipboard
navigator.clipboard wrapper with copied state and reset.
Bash
pnpm dlx jsn-ui add use-copy-to-clipboard
use-is-client
section
useIsClient
Returns true after the component mounts (SSR guard).
Bash
pnpm dlx jsn-ui add use-is-client
streaming-text
ai
StreamingText
Incremental text rendering with a blinking cursor.
Bash
pnpm dlx jsn-ui add streaming-text
token-counter
ai
TokenCounter
Live token usage display with a progress bar.
Bash
pnpm dlx jsn-ui add token-counter
model-selector
ai
ModelSelector
Grid of selectable model cards with vendor + cost tiers.
Bash
pnpm dlx jsn-ui add model-selector
citation
ai
Citation
Inline citation marker that expands on hover.
Bash
pnpm dlx jsn-ui add citation
confetti
block
Confetti
One-shot confetti burst, with reduced-motion opt-out.
Bash
pnpm dlx jsn-ui add confetti
scroll-progress
block
ScrollProgress
Reading-progress bar that fills as the user scrolls.
Bash
pnpm dlx jsn-ui add scroll-progress
parallax
block
Parallax
Subtle scroll-driven parallax transform.
Bash
pnpm dlx jsn-ui add parallax
animated-number
block
AnimatedNumber
Counter that eases to its value on mount or on view.
Bash
pnpm dlx jsn-ui add animated-number
sparkline
block
Sparkline
Tiny line chart with optional fill — fits inside cards.
Bash
pnpm dlx jsn-ui add sparkline
bar
block
Bar
Vertical bar chart with labels and values.
Bash
pnpm dlx jsn-ui add bar
donut
block
Donut
Donut chart with a center label and legend.
Bash
pnpm dlx jsn-ui add donut
mobile-drawer
ui
MobileDrawer
Slide-in side drawer for mobile nav (left/right/bottom).
Bash
pnpm dlx jsn-ui add mobile-drawer
bottom-sheet
ui
BottomSheet
Bottom-anchored sheet that drags to dismiss.
Bash
pnpm dlx jsn-ui add bottom-sheet
swipeable
ui
Swipeable
Swipe-to-dismiss / swipe-to-action list item.
Bash
pnpm dlx jsn-ui add swipeable
responsive-tabs
ui
ResponsiveTabs
Tabs that become a select on small viewports.
Bash
pnpm dlx jsn-ui add responsive-tabs
touch-target
ui
TouchTarget
Wraps any element to ensure 44×44 px touch target.
Bash
pnpm dlx jsn-ui add touch-target
json-ld
ui
JsonLd
Drop-in Google Rich Results JSON-LD script tag.
Bash
pnpm dlx jsn-ui add json-ld
docs-template
section
Docs Template
3-column docs page: nav, content, TOC.
Bash
pnpm dlx jsn-ui add docs-template
auth-template
section
Auth Template
Sign-in / sign-up card with social buttons.
Bash
pnpm dlx jsn-ui add auth-template
status-template
section
Status Template
Public status page: components + incident timeline.
Bash
pnpm dlx jsn-ui add status-template
parallax-mouse
section
ParallaxMouse
Damped mouse-parallax wrapper.
Bash
pnpm dlx jsn-ui add parallax-mouse
mask-reveal
section
MaskReveal
Clip-path mask reveal on viewport enter.
Bash
pnpm dlx jsn-ui add mask-reveal
stagger-children
section
StaggerChildren
Stagger entrance for a list of children.
Bash
pnpm dlx jsn-ui add stagger-children
number-flip
section
NumberFlip
Animated number counter for value changes.
Bash
pnpm dlx jsn-ui add number-flip
voice-input
ai
VoiceInput
Web Speech API mic button with transcript callback.
Bash
pnpm dlx jsn-ui add voice-input
multimodal-input
ai
MultimodalInput
Chat input with image attachments and previews.
Bash
pnpm dlx jsn-ui add multimodal-input
conversation-branch
ai
ConversationBranch
Tree of conversation branches with switch and fork.
Bash
pnpm dlx jsn-ui add conversation-branch
agent-trace
ai
AgentTrace
Recursive tree of agent execution steps with timing.
Bash
pnpm dlx jsn-ui add agent-trace
webhook-card
ai
WebhookCard
Display a webhook config, status, and recent payload.
Bash
pnpm dlx jsn-ui add webhook-card
system-prompt
ai
SystemPrompt
Tinted card to display the model's system prompt.
Bash
pnpm dlx jsn-ui add system-prompt
memory-viewer
ai
MemoryViewer
Long-term memory inspector for agents.
Bash
pnpm dlx jsn-ui add memory-viewer
prompt-template
ai
PromptTemplate
Searchable library of saved prompt templates with vars.
Bash
pnpm dlx jsn-ui add prompt-template
aurora
section
Aurora
Radial gradient mesh background that slowly drifts.
Bash
pnpm dlx jsn-ui add aurora
grid-pattern
section
GridPattern
Repeating SVG grid with edge-mask fade.
Bash
pnpm dlx jsn-ui add grid-pattern
dot-pattern
section
DotPattern
Repeating dot field background.
Bash
pnpm dlx jsn-ui add dot-pattern
noise
section
Noise
SVG turbulence film-grain overlay.
Bash
pnpm dlx jsn-ui add noise
beam
section
Beam
Border beam that sweeps around the perimeter.
Bash
pnpm dlx jsn-ui add beam
meteors
section
Meteors
N falling-meteors background.
Bash
pnpm dlx jsn-ui add meteors
ripple
section
Ripple
Click ripple wrapper for any element.
Bash
pnpm dlx jsn-ui add ripple
animated-gradient
section
AnimatedGradient
Continuously-panning gradient background.
Bash
pnpm dlx jsn-ui add animated-gradient
pro-header
block
Pro Header
Marketing header with mega-menu + mobile drawer.
Bash
pnpm dlx jsn-ui add pro-header
pro-hero
block
Pro Hero
Hero with aurora background + typewriter + mockup slot.
Bash
pnpm dlx jsn-ui add pro-hero
pro-pricing
block
Pro Pricing
3-tier pricing with monthly/yearly toggle.
Bash
pnpm dlx jsn-ui add pro-pricing
app-chat-pdf
section
Chat with PDF
Full app template: upload PDF + chat with it.
Bash
pnpm dlx jsn-ui add app-chat-pdf
app-chat-youtube
section
Chat with YouTube
Paste a YouTube URL, chat about the video.
Bash
pnpm dlx jsn-ui add app-chat-youtube
app-deepseek-chat
section
DeepSeek Chat
DeepSeek-style chat with model picker + history.
Bash
pnpm dlx jsn-ui add app-deepseek-chat
app-gemini-chat
section
Gemini Chat
Gemini-style branded chat.
Bash
pnpm dlx jsn-ui add app-gemini-chat
app-image-generation
section
AI Image Generation
Text-to-image playground.
Bash
pnpm dlx jsn-ui add app-image-generation
app-image-enhancer
section
Image Enhancer
Upscale + denoise photos.
Bash
pnpm dlx jsn-ui add app-image-enhancer
app-ghibli-image
section
Ghibli Image Generator
Style-transfer playground.
Bash
pnpm dlx jsn-ui add app-ghibli-image
app-headshot
section
Headshot Generator
Selfie → professional headshot.
Bash
pnpm dlx jsn-ui add app-headshot
app-interior-design
section
Interior Design Generator
Re-design your room in 4 styles.
Bash
pnpm dlx jsn-ui add app-interior-design
app-content-writer
section
Content Writer AI
Generate blog posts, emails, tweets.
Bash
pnpm dlx jsn-ui add app-content-writer
app-codeforge
section
Codeforge
AI build pipeline from prompt to production.
Bash
pnpm dlx jsn-ui add app-codeforge
app-changelog
section
Changelog
Reverse-chronological release notes.
Bash
pnpm dlx jsn-ui add app-changelog
app-saas-landing
section
SaaS Landing
Premium SaaS marketing page.
Bash
pnpm dlx jsn-ui add app-saas-landing
app-agent-roster
section
Agent Roster
Multi-agent AI team showcase.
Bash
pnpm dlx jsn-ui add app-agent-roster
app-blog
section
Blog
Editorial blog with featured + grid.
Bash
pnpm dlx jsn-ui add app-blog
app-portfolio
section
Portfolio
Personal portfolio with project grid.
Bash
pnpm dlx jsn-ui add app-portfolio
app-mobile-marketing
section
Mobile App Marketing
Phone-mockup marketing page.
Bash
pnpm dlx jsn-ui add app-mobile-marketing
app-startup
section
Startup Landing
Dillionverma-style startup landing.
Bash
pnpm dlx jsn-ui add app-startup
jsn-ui-cli
section
jsn-ui CLI
init / add / list / info / mcp commands — zero runtime deps.
Bash
npx jsn-ui <command>