Skip to content

Overview All components All effects All blocks

Consent, legal & email

Consent Legal Email templates

Components

Components

Accordion Avatar Badge Button Card Carousel Collapse Diff Drag & Drop List Group Remove Element Resizable Scroll Area Stack Swap

Feedback

Alert Empty Loading Progress Radial Progress Skeleton Toast (Sonner)

Overlays

Alert Dialog Context Menu Drawer (Bottom)Drawer (Offcanvas)Dropdown Hover Card Modal Popover Tooltip

Content

Aspect Ratio Blockquote Code Block Copy To Clipboard Direction Divider Keyboard Link List Mask Typography

Navigation

Breadcrumb Footer Menu Navbar Navigation Menu Pagination Scrollspy Sidebar Stepper / Form Wizard Tabs & Pills

Forms

Button Group (Join)Checkbox Field File Input Filter Input Input Group Label Native Select Radio Range Rating Select Switch Textarea Toggle Toggle Group

Advanced forms

Advanced Select (Tags)Calendar Combo Box Command (Search)Date Picker File Upload Form Validation Input Number Pin Input (OTP)Strong Password Toggle Count Toggle Password

Data display

Charts Indicator Item Stat Status Timeline Tree View

Tables

Datatable Table

Chat

Attachment Chat Bubble Marker Message Message Scroller

Mockups

Browser Mockup Code Mockup Phone Mockup Window Mockup

TPC

Account Menu App Switcher Empty State Theme Controller TPC Shell

Effects & Transitions

Text

Animated Gradient Text Aurora Text Highlighter Hyper Text Line Shadow Text Morphing Text Number Ticker Shiny Text Sparkles Text Spinning Text Text Animate Text Reveal Typing Animation Word Rotate

Backgrounds

Animated Grid Pattern Dot Pattern Flickering Grid Grid Pattern Hexagon Pattern Interactive Grid Light Rays Meteors Particles Progressive Blur Retro Grid Ripple Striped Pattern

Buttons

Animated Theme Toggler Confetti Cool Mode Interactive Hover Button Pulsating Button Rainbow Button Ripple Button Shimmer Button Shiny Button

Cards & borders

Bento Grid Border Beam Magic Card Neon Gradient Card Shine Border

Lists & layout

Animated Beam Animated List Avatar Circles Circular Progress Dock File Tree Marquee Orbiting Circles Scroll Progress

Enter & exit

Device frames

Android Frame Code Comparison iPhone Frame Safari Frame Terminal

Transitions

Drawer Transition Enter / Exit Hover & Press Layout Transition Modal Transition Scroll Reveal Skeleton Shimmer Stagger Toast Transition View Transitions

Blocks

Marketing

Hero Section Pricing Cards

Auth

Application

Stats Dashboard

Components / Advanced forms

Pin Input (OTP)

One-time-code input with slots.

shadcn/uiAdvanced forms

Install

npx shadcn@latest add @tpc/input-otp

Default

Controlled

Pattern

Separator

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Enter your one-time password.

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }