Registry items
27
Docs
Install any item with one command
27 registry items — blocks, components & animations — installable via the shadcn CLI.
Components
12
Animations
12
Blocks
2
Platforms
2
Step 01
Initialize shadcn/ui
npx shadcn@latest initStep 02
Configure registry namespace
// components.json
{
"registries": {
"@native-bits": "http://localhost:3000/r/{name}.json"
}
}Step 03
Install any component or animation
npx shadcn@latest add @native-bits/animated-buttonInteractive Sandbox
Build, customize & export components with the live code editor
Full registry
blockdashboardanalytics
Mobile Analytics Dashboard
Animated dashboard shell with KPI cards, tabs, and progress bars built for shadcn/ui.
npx shadcn@latest add @native-bits/dashboardcomponentanalyticscounter
Motion KPI Counter
Animated KPI card with spring-driven count-up values and subtle gradient surfaces.
npx shadcn@latest add @native-bits/motion-kpiblockpaymentspricing
Stripe Pricing Block
Pricing cards with monthly and lifetime plans plus a Stripe Checkout API route.
npx shadcn@latest add @native-bits/stripe-pricingcomponentactionscta
Animated Button
Pressable button with spring scaling and optional gradient skin.
npx shadcn@latest add @native-bits/animated-buttoncomponentsurfacescard
Glass Card
Blurred frosted card surface for profile and billing modules.
npx shadcn@latest add @native-bits/glass-cardcomponentformsinput
Input Field
Input field with floating label and animated focus state.
npx shadcn@latest add @native-bits/input-fieldcomponentcontrolssettings
Toggle Switch
Compact switch with smooth thumb motion and custom colors.
npx shadcn@latest add @native-bits/toggle-switchcomponentfeedbacktoast
Notification Toast
Slide toast with status presets and swipe dismissal.
npx shadcn@latest add @native-bits/notification-toastcomponentactionsnavigation
Floating Action Button
Floating button with spring interactions and gradient fill.
npx shadcn@latest add @native-bits/floating-action-buttoncomponentdata-displaychart
Progress Ring
Circular progress with animated gradient arc and center label.
npx shadcn@latest add @native-bits/progress-ringcomponentfeedbackloading
Skeleton Loader
Shimmer placeholder block for loading states.
npx shadcn@latest add @native-bits/skeleton-loadercomponentformsauth
OTP Input
Verification input with one-cell-per-digit focus flow.
npx shadcn@latest add @native-bits/otp-inputcomponentcontrolsnavigation
Segmented Control
Sliding segmented tabs for view or filter selection.
npx shadcn@latest add @native-bits/segmented-controlcomponentdata-displaymessaging
Chat Bubble
Chat message bubble with sender variants and timestamp.
npx shadcn@latest add @native-bits/chat-bubblecomponentsurfacesgesture
Bottom Sheet Handle
Handle bar and snap utility for bottom-sheet surfaces.
npx shadcn@latest add @native-bits/bottom-sheet-handlecomponentanimationentrance
Fade In Up
Reveal children by fading and translating up.
npx shadcn@latest add @native-bits/fade-in-upcomponentanimationentrance
Scale Pop
Elastic pop-in animation for icons and badges.
npx shadcn@latest add @native-bits/scale-popcomponentanimationentrance
Rotate In
Rotating entrance with scale-up for playful UI accents.
npx shadcn@latest add @native-bits/rotate-incomponentanimationentrance
Slide In Right
Move in from the right edge for panel transitions.
npx shadcn@latest add @native-bits/slide-in-rightcomponentanimationloop
Bounce
Looping vertical bounce useful for hint indicators.
npx shadcn@latest add @native-bits/bouncecomponentanimationtransition
Flip
3D horizontal or vertical flip transition.
npx shadcn@latest add @native-bits/flipcomponentanimationloop
Shimmer
Horizontal light sweep for skeleton placeholders.
npx shadcn@latest add @native-bits/shimmercomponentanimationsequence
Stagger List
Applies staggered reveal to list children.
npx shadcn@latest add @native-bits/stagger-listcomponentanimationinteractive
Parallax Tilt
Interactive tilt effect for cards and media previews.
npx shadcn@latest add @native-bits/parallax-tiltcomponentanimationentrance
Spring Reveal
Spring-based reveal from x or y axis.
npx shadcn@latest add @native-bits/spring-revealcomponentanimationgesture
Swipe Dismiss
Swipe-to-dismiss wrapper with threshold callback.
npx shadcn@latest add @native-bits/swipe-dismisscomponentanimationdata
Number Counter
Animated numeric transitions for KPI values.
npx shadcn@latest add @native-bits/number-counterComponents
Animated Button
Pressable button with spring scaling and optional gradient skin.
Glass Card
Blurred frosted card surface for profile and billing modules.
Input Field
Input field with floating label and animated focus state.
Toggle Switch
Compact switch with smooth thumb motion and custom colors.
Notification Toast
Slide toast with status presets and swipe dismissal.
Floating Action Button
Floating button with spring interactions and gradient fill.
Progress Ring
Circular progress with animated gradient arc and center label.
Skeleton Loader
Shimmer placeholder block for loading states.
OTP Input
Verification input with one-cell-per-digit focus flow.
Segmented Control
Sliding segmented tabs for view or filter selection.
Chat Bubble
Chat message bubble with sender variants and timestamp.
Bottom Sheet Handle
Handle bar and snap utility for bottom-sheet surfaces.
Animations
Fade In Up
Reveal children by fading and translating up.
Scale Pop
Elastic pop-in animation for icons and badges.
Rotate In
Rotating entrance with scale-up for playful UI accents.
Slide In Right
Move in from the right edge for panel transitions.
Bounce
Looping vertical bounce useful for hint indicators.
Flip
3D horizontal or vertical flip transition.
Shimmer
Horizontal light sweep for skeleton placeholders.
Stagger List
Applies staggered reveal to list children.
Parallax Tilt
Interactive tilt effect for cards and media previews.
Spring Reveal
Spring-based reveal from x or y axis.
Swipe Dismiss
Swipe-to-dismiss wrapper with threshold callback.
Number Counter
Animated numeric transitions for KPI values.