10 React Components You Can't Find in shadcn/ui (But Wish You Could)
shadcn/ui gives you the primitives. These 10 components fill the gaps — data visualization, animated auth flows, and UI interactions that ship-ready apps actually need.
shadcn/ui is exceptional at what it does. Buttons, dialogs, selects, tooltips, tables — the primitives that make up 80% of an application's UI surface are covered, accessible, and production-ready. What shadcn does not cover is the 20% that differentiates one application from another: the animated auth flows, the data visualization, the polished micro-interactions that users notice even when they cannot name them.
These are the components developers reach for next. None of them are in the shadcn catalog. All of them install the same way.
1. Animated OTP Input
What it does: Six-slot one-time password input with a sliding focus ring, per-digit fade-in animation, blinking caret, and auto-submit on fill.
Why you want it: Every authentication flow that sends codes by SMS or email needs this. The baseline approach — six separate <input> elements wired with onKeyDown handlers — is a maintenance burden and handles paste events poorly on mobile. input-otp solves the logic; tent ui adds the polish.
The difference: The focus ring slides between slots using Framer Motion shared layout animation instead of appearing and disappearing. Digits animate in with a spring scale. Auto-submit fires onComplete without an extra button press.
2. Password Input with Strength Meter
What it does: A password field with show/hide toggle, zxcvbn-based strength scoring, real-time Caps Lock detection, and an optional paste-disabled mode.
Why you want it: Password inputs ship in every auth flow, but the accessible, well-validated version is rarely trivial. Strength meters that use zxcvbn (the same library 1Password uses) give users meaningful feedback instead of arbitrary rules like "must contain a number."
The difference: Caps Lock detection uses the native KeyboardEvent.getModifierState("CapsLock") API — no polling, no timers. The strength bar animates with a CSS transition. The paste-disable prop is for security-sensitive contexts where users should type (not paste) their password.
See Password Input docs and demo →
3. Inline Edit
What it does: A composable row primitive that shows a read-only value with an edit icon on hover, transitions to an input on click, and reveals confirm/cancel controls.
Why you want it: Every settings page and data table needs inline editing — the alternative is a drawer or modal that interrupts the user's workflow for a single field. Inline edit keeps the user in context.
The difference: The transition between view and edit mode uses a spring animation so the input does not snap into place. The reveal of action buttons (confirm/cancel) uses AnimatePresence to avoid a layout jump. Keyboard navigation works: Enter to confirm, Escape to cancel.
See Inline Edit docs and demo →
4. Interactive Pie Chart
What it does: A pie chart built on Recharts with padded sectors, hover and click selection, an animated triangle pointer, a tick ring, and a customizable center detail panel.
Why you want it: Recharts is the standard charting library in the React ecosystem, and shadcn's chart components cover bar and line charts well. What is missing is a production-ready pie chart that matches shadcn's visual conventions — same border radius, same color tokens, same Tailwind-compatible theming.
The difference: The triangle pointer animates to the selected sector instead of snapping. The center detail panel shows contextual information for the selected slice. Hover states trigger on both the sector and the legend.
5. World Map
What it does: An interactive, zoomable SVG world map with country selection, hover tooltips, and data point overlay support.
Why you want it: Geographic data shows up in analytics dashboards, user distribution views, and marketing attribution reports. React Simple Maps and D3 are powerful but require significant setup to produce something that looks like it belongs in your application.
The difference: The component wraps react-simple-maps with shadcn-compatible styling. Countries highlight on hover, click to select, and emit structured data for use in side panels or tooltips. Zoom and pan work on both desktop (scroll wheel) and mobile (pinch).
6. Animated Save Button
What it does: A button that transitions through three states — idle, saving (spinner), and saved (checkmark) — with per-character label animations and spring physics.
Why you want it: Toast notifications are overused. An animated state on the button itself tells the user their action succeeded without a popup that covers content and demands attention. For forms that auto-save, this is even more important — the save confirmation should be subtle and stay in place.
The difference: The label characters animate individually using a stagger — "Saving..." appears letter by letter in ~120ms. The spinner and checkmark use AnimatePresence for mount/unmount so the transitions are smooth in both directions.
See Animated Save Button docs and demo →
7. Animated List/Grid View Toggle
What it does: A toggle that switches a collection between list and grid layouts, with each item animating to its new position using Framer Motion shared layout.
Why you want it: Product catalogs, file browsers, and dashboards frequently need view switching. Toggling between layouts by re-rendering the list with different CSS classes is jarring — items jump to their new positions. Layout animation makes the transition feel continuous.
The difference: Uses motion.div with layout prop so items animate to their new positions in the grid or list. The transition is a spring, not a tween, so it decelerates naturally. The component accepts any list of items and a render prop for the card format.
See Animated View docs and demo →
8. Copy Button
What it does: A minimal clipboard button where the copy icon morphs into a checkmark on success, then resets after a configurable delay.
Why you want it: Code blocks, API keys, referral links, and install commands all benefit from a copy button. The visual feedback — icon switching from copy to check — is the standard interaction pattern that users have learned to expect.
The difference: The icon transition uses Framer Motion's AnimatePresence so the copy icon exits while the check icon enters, creating a morph effect rather than a swap. The successDuration prop controls how long the check state persists before resetting.
See Copy Button docs and demo →
9. Animated 3D Folder
What it does: A decorative folder component where stacked file layers fan out in 3D on hover, using Framer Motion perspective transforms.
Why you want it: File browsers, document management UIs, and project dashboards benefit from a visual metaphor for grouped content. This component adds visual hierarchy to grouped items in a way that a flat card list does not.
The difference: Uses CSS perspective and rotateX/rotateY transforms to produce the 3D fan effect without Three.js. Pure Framer Motion — no canvas, no WebGL. Works on mobile with touch.
10. Animated Arrow
What it does: A small arrow that slides through its container on parent hover, commonly used on links and buttons to signal navigation.
Why you want it: Directional indicators on navigation links — "Read more →", "Get started →" — significantly improve click-through rates when they animate on hover. A static arrow is a punctuation mark; an animated arrow is a call to action.
The difference: The arrow exits the container to the right and re-enters from the left on hover, creating a loop effect that reads as "forward motion." Works by setting overflow: hidden on the parent and using x transforms. The group CSS class makes it composable with any parent element.
See Animated Arrow docs and demo →
Installing all 10
Every component above installs with npx shadcn@latest add and lands in your project as editable TypeScript source. No runtime dependency on this library — you own the files.
Browse the full catalog and interactive demos at ui.srb.codes/docs/components. If there is a component you wish were on this list, open an issue on GitHub — the registry is open to contributions.