47 open-source React and Tailwind components. Preview them live, read the full source, and install with one command: npx shadcn@latest add https://www.saasuji.com/r/<name>.json. Everything is MIT-licensed and free.
Button
Eight variants and twelve sizes with loading, disabled, and icon states, built on class-variance-authority and Radix Slot.
Badge
Six badge variants — default, secondary, destructive, outline, ghost, and link — with optional leading or trailing icons, built on class-variance-authority and Radix Slot.
Button Group
A horizontal or vertical group of buttons with shared edges, plus separator and text primitives for toolbar-style and segmented layouts.
Morph Button
Six single-purpose morphing buttons — submit, recommend, subscribe, settings, delete, and share — each animating its icon on hover with framer-motion.
Shimmer Button
A button with an animated conic-gradient shimmer sweeping across its surface, with configurable shimmer color, size, speed, radius, and background.
Input
A single-line text input with a focus ring, placeholder styling, and disabled state, forwarding every native input attribute.
Textarea
A multi-line text input with a minimum height, focus ring, and disabled state, forwarding every native textarea attribute.
Label
An accessible form label built on Radix Label, rendering a native <label> with disabled and peer-state styling.
Switch
A controlled toggle built on Radix Switch with keyboard support, checked/unchecked styling, and a disabled state.
Checkbox
A Radix checkbox with checked, unchecked, and indeterminate states, a check indicator, and a disabled state.
Select
An accessible select menu built on Radix Select with grouped items, scroll buttons, separators, and item-aligned or popper positioning.
Form
react-hook-form bindings for accessible form fields: FormField, FormItem, FormLabel, FormControl, FormDescription, and FormMessage with automatic error wiring.
Field
Composable form field layout primitives — FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldTitle, FieldDescription, FieldError, FieldSeparator, and FieldContent — with vertical, horizontal, and responsive orientations.
Attachment
File attachment chips with media, title, description, and action slots, plus idle, uploading, processing, error, and done states, three sizes, and horizontal or vertical orientation.
Separator
A horizontal or vertical divider built on Radix Separator, rendered as decorative or semantic for accessibility.
Card
A surface container with header, title, description, content, and footer sections for grouping related information.
Avatar
Circular profile images built on Radix Avatar with an automatic initials fallback, plus overlapping AvatarGroup and count primitives.
Progress
A determinate or indeterminate progress bar built on Base UI Progress, with label, value, track, and indicator primitives.
Chart
Recharts chart primitives with theme-aware color tokens, a responsive container, and styled tooltip and legend content.
Number Ticker
An animated number that springs from a start value to its target when it scrolls into view, with configurable direction, delay, and decimal places.
Marquee
A CSS-driven infinite scroller that repeats its children horizontally or vertically, with optional reverse direction and pause on hover.
Empty
Composable empty-state primitives — Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, and EmptyContent — with a bordered icon media variant.
Empty State
A ready-made empty state built on the Empty primitives with a dot-pattern backdrop, optional illustration icon, and action slot.
Skeleton
Shimmering or pulsing placeholder blocks with three preset compositions for product cards, product lists, and category grids.
Product Logo
A product logo image with automatic fallbacks: falls back to the site favicon when the logo fails, then to uppercase initials when no image loads.
Bento Grid
A three-column asymmetric feature grid with BentoGrid and BentoCard, including background, icon, description, and call-to-action slots that reveal on hover.
Dot Pattern
An SVG dot-pattern background that fills its container and automatically redraws on resize, with an optional glowing animation per dot.
Accordion
Vertically stacked collapsible sections built on Radix Accordion, with single or multiple open items, keyboard navigation, and animated expand and collapse.
Alert
A callout for important messages with default and destructive variants plus title, description, and action primitives for inline feedback.
Alert Dialog
A modal confirmation dialog built on Radix AlertDialog that interrupts the user with a title, description, media slot, and cancel/confirm actions.
Carousel
A touch-friendly slide carousel built on Embla with keyboard support, previous/next controls, and horizontal or vertical orientation.
Command
A command palette and searchable list built on cmdk, with filtering, groups, keyboard navigation, shortcuts, and an optional dialog wrapper.
Dialog
An accessible modal window built on Radix Dialog, with overlay, header, footer, title, description, and an optional corner close button.
Drawer
A swipeable sheet built on Base UI Drawer that slides in from any edge, with snap points, a drag handle, and accessible title and description primitives.
Dropdown Menu
A menu of actions built on Base UI Menu with groups, labels, separators, shortcuts, checkboxes, radio items, and nested submenus.
Popover
A floating panel anchored to a trigger, built on Radix Popover, with header, title, and description primitives plus configurable side, alignment, offset, and collision handling.
Scroll Area
A custom-scrollbar container built on Radix Scroll Area that keeps native scrolling and keyboard behaviour while theming the track and thumb.
Sheet
A panel that slides in from any edge, built on the Radix Dialog primitive with overlay, header, footer, title, description, and a corner close button.
Tabs
Accessible tabbed panels built on Radix Tabs with roving-focus keyboard navigation, horizontal or vertical orientation, and automatic or manual activation.
Toggle
A two-state button built on Radix Toggle with default and outline variants, three sizes, controlled or uncontrolled pressed state, and a disabled state.
Toggle Group
A set of related toggles built on Radix Toggle Group, supporting single or multiple selection, keyboard roving focus, shared variant and size, and configurable item spacing.
Tooltip
A hover and focus label built on Radix Tooltip, with a provider for shared open and close delays, configurable placement, collision handling, and an offset.
Animated List
A vertical list that reveals items one by one on a timer, animating scale and opacity with Motion and stacking the newest item on top.
Border Beam
A traveling beam of light that traces the border of any rounded container, with configurable size, speed, delay, colors, direction, and border width.
Magic Card
A card surface that reveals a pointer-following gradient border and halo on hover, plus an orb mode that renders a soft moving glow inside the card.
Shine Border
An animated border highlight that sweeps around a rounded container, accepting a single shine color or a multi-color gradient.
Page Transition
A Next.js App Router wrapper that plays a fade-and-slide entrance whenever the pathname changes, holding the previous content until the new route is ready.