# saasflare-ui

> Production-ready React UI library for Next.js + Tailwind v4. 100+ components, 20 palettes, copy-paste registry, 3-axis variant system (variant × intent × size), animated by default via Framer Motion.

Two installation paths: install the npm package once for the runtime (`pnpm add @saasflare/ui`), then optionally pull individual component source code into your project via the shadcn-compatible registry — so AI codegen tools (v0, Lovable, Bolt, Cursor, Claude) can read and rewrite the source.

## Docs

- [README](https://ui.saasflare.io): library overview, installation, theming primer
- [llms-full.txt](https://ui.saasflare.io/llms-full.txt): every registry component expanded with props, types, and an example
- [Registry index](https://ui.saasflare.io/registry.json): JSON manifest of every component available via `npx shadcn add`
- [MCP endpoint](https://ui.saasflare.io/api/mcp): remote MCP server — wire into Claude Code / Cursor / Claude Desktop to query the catalog live

## Components (registry)

- [Accordion](https://ui.saasflare.io/r/accordion.json): Vertically stacked, collapsible sections for FAQs and disclosure lists. One or many panels open at a time.
- [Alert](https://ui.saasflare.io/r/alert.json): Inline status banner (info/success/warning/danger) with icon, title, and description for non-blocking messages.
- [Alert Dialog](https://ui.saasflare.io/r/alert-dialog.json): Modal confirmation for destructive or irreversible actions, with required acknowledge and cancel actions.
- [Aspect Ratio](https://ui.saasflare.io/r/aspect-ratio.json): Locks content to a fixed width:height ratio — responsive images, video embeds, and media cards.
- [Audio Player](https://ui.saasflare.io/r/audio-player.json): Self-contained audio player UI over the native HTML5 element — play/pause, scrubbing, and volume.
- [Aurora Background](https://ui.saasflare.io/r/aurora-background.json): Animated aurora backdrop — soft blurred color blobs drifting behind hero content.
- [Avatar](https://ui.saasflare.io/r/avatar.json): User or brand avatar with image, automatic initials fallback, and size variants.
- [Badge](https://ui.saasflare.io/r/badge.json): Compact label for statuses, counts, and tags, with semantic intent colors and subtle/solid styles.
- [Bar List](https://ui.saasflare.io/r/bar-list.json): Horizontal 'top N' ranking list with proportional bar fills. Dashboard staple.
- [Bento Grid](https://ui.saasflare.io/r/bento-grid.json): Bento-style grid layout for feature galleries with mixed sizes.
- [Blur Fade](https://ui.saasflare.io/r/blur-fade.json): Entrance animation combining blur, fade, and offset — for elegant on-mount and on-scroll reveals.
- [Border Beam](https://ui.saasflare.io/r/border-beam.json): A glowing gradient beam that travels around an element's border. Premium accent for cards and CTAs.
- [Breadcrumb](https://ui.saasflare.io/r/breadcrumb.json): Hierarchical navigation trail showing the user's location, with truncation and custom separators.
- [Button](https://ui.saasflare.io/r/button.json): The core action element. Three orthogonal axes — variant × intent × size — plus loading and icon slots.
- [Button Group](https://ui.saasflare.io/r/button-group.json): Visually connected strip of buttons with shared radii and separators. For segmented actions and toolbars.
- [Calendar](https://ui.saasflare.io/r/calendar.json): Month-grid date calendar (react-day-picker) supporting single, multiple, or range selection.
- [Callout](https://ui.saasflare.io/r/callout.json): Emphasized inline message box (info/warning/success/danger). Lives between Alert and Dialog.
- [Card](https://ui.saasflare.io/r/card.json): The base surface primitive — header, content, and footer slots — that most composed cards build on.
- [Carousel](https://ui.saasflare.io/r/carousel.json): Touch/swipe carousel (Embla) with autoplay, looping, and custom controls for galleries and sliders.
- [Category Bar](https://ui.saasflare.io/r/category-bar.json): Segmented progress bar with per-segment colors and optional labels. Useful for resource breakdowns.
- [Chart](https://ui.saasflare.io/r/chart.json): Composable Recharts wrapper with themed tooltips, legends, and design-system color tokens.
- [Checkbox](https://ui.saasflare.io/r/checkbox.json): Accessible checkbox with indeterminate state, for forms and bulk-select rows.
- [Code Block](https://ui.saasflare.io/r/code-block.json): Code-block chrome: filename header, language badge, copy button, optional line numbers. BYO highlighter.
- [Collapsible](https://ui.saasflare.io/r/collapsible.json): Single show/hide region with animated open/close. The building block under accordions and disclosures.
- [Combobox](https://ui.saasflare.io/r/combobox.json): Searchable select — a Popover wrapping a cmdk palette. Autocomplete with full keyboard navigation.
- [Command](https://ui.saasflare.io/r/command.json): ⌘K command palette with fuzzy search, groups, and keyboard navigation (cmdk).
- [Compare](https://ui.saasflare.io/r/compare.json): Before/after image slider with a draggable divider, for comparisons and product demos.
- [Confetti](https://ui.saasflare.io/r/confetti.json): CSS-only confetti burst with randomized colors and trajectories — celebrate conversions and milestones.
- [Context Menu](https://ui.saasflare.io/r/context-menu.json): Right-click menu with items, submenus, checkboxes, and keyboard shortcuts.
- [Countdown](https://ui.saasflare.io/r/countdown.json): Presentational countdown display (days/hours/minutes/seconds) — pair with the useCountdown hook.
- [Data Pagination](https://ui.saasflare.io/r/data-pagination.json): Total-driven pagination control — prev/next, numbered pages with ellipsis, an optional page-size selector and an 'X–Y of N' summary. One component wires a whole table footer.
- [Data Table](https://ui.saasflare.io/r/data-table.json): Dependency-free data grid built on the Table primitives — typed columns, client-side sort, row selection, and pagination out of the box, with a server-side/TanStack escape hatch.
- [Data Toolbar](https://ui.saasflare.io/r/data-toolbar.json): Toolbar layout for tables and data grids — search, filters, and actions in a single bar.
- [Date Picker](https://ui.saasflare.io/r/date-picker.json): Controlled/uncontrolled single-date input — Button + Popover + single-mode Calendar.
- [Date Range Picker](https://ui.saasflare.io/r/date-range-picker.json): Controlled/uncontrolled date-range input — Button + Popover + range-mode Calendar.
- [Device Mock](https://ui.saasflare.io/r/device-mock.json): CSS-only phone, laptop, and browser frames for wrapping product screenshots and demos.
- [Dialog](https://ui.saasflare.io/r/dialog.json): Modal overlay for focused tasks and forms, with animated enter/exit and focus trapping.
- [Dock](https://ui.saasflare.io/r/dock.json): macOS-style dock bar where icons magnify on cursor proximity. Playful navigation accent.
- [Drawer](https://ui.saasflare.io/r/drawer.json): Mobile-first bottom drawer with drag-to-dismiss physics (Vaul). The touch-friendly Sheet.
- [Dropdown Menu](https://ui.saasflare.io/r/dropdown-menu.json): Click-triggered action menu with items, submenus, checkboxes, radio groups, and shortcuts.
- [Dropzone](https://ui.saasflare.io/r/dropzone.json): Drag-and-drop file upload area with click-to-open fallback. Self-contained (no react-dropzone).
- [Empty](https://ui.saasflare.io/r/empty.json): Empty-state primitive — centered icon, title, description, and action slots for zero-data views.
- [Empty State](https://ui.saasflare.io/r/empty-state.json): Polished zero-data view — icon or illustration, title, description, and a call-to-action button.
- [Feature Card](https://ui.saasflare.io/r/feature-card.json): Feature card with icon, title, and description. The most reused card pattern on any SaaS landing page.
- [Field](https://ui.saasflare.io/r/field.json): Form-field wrapper bundling label, control, description, and error message with correct a11y wiring.
- [Flip Words](https://ui.saasflare.io/r/flip-words.json): Cycles through a list of words with a vertical flip animation — for dynamic hero headlines.
- [Form](https://ui.saasflare.io/r/form.json): react-hook-form integration layer — field context, labels, descriptions, and validation messages.
- [Gallery Lightbox](https://ui.saasflare.io/r/gallery-lightbox.json): Click-to-expand image gallery with a fullscreen overlay, prev/next, and keyboard navigation.
- [Glowing Effect](https://ui.saasflare.io/r/glowing-effect.json): Mouse-tracking glow that follows the cursor around a container's edges. Interactive card highlight.
- [Gradient Text](https://ui.saasflare.io/r/gradient-text.json): Animated linear-gradient text fill via background-clip — for headlines and brand accents.
- [Hero Video Dialog](https://ui.saasflare.io/r/hero-video-dialog.json): Poster image with a play button that opens an embedded video in a modal. Landing-page hero staple.
- [Hotspot](https://ui.saasflare.io/r/hotspot.json): Pulsing marker dots at absolute positions with hover tooltips — annotate screenshots and demos.
- [Hover Card](https://ui.saasflare.io/r/hover-card.json): Rich preview popover that opens on hover — user cards, link previews, and definitions.
- [Image Swap Hover](https://ui.saasflare.io/r/image-swap-hover.json): Crossfades between a primary and alternate image on hover. Product and team-photo flourish.
- [Input](https://ui.saasflare.io/r/input.json): Single-line text field — the form workhorse — with intent states and full sizing support.
- [Input Group](https://ui.saasflare.io/r/input-group.json): Wraps an input with addons, icons, and prefix/suffix elements into a single bordered unit.
- [Input OTP](https://ui.saasflare.io/r/input-otp.json): One-time-code input with per-digit slots, paste handling, and auto-advance.
- [Item](https://ui.saasflare.io/r/item.json): Generic list/row primitive with leading media, title, description, and trailing action slots.
- [Kbd](https://ui.saasflare.io/r/kbd.json): Inline keyboard-key styling for documenting shortcuts (⌘K, Ctrl+C).
- [Label](https://ui.saasflare.io/r/label.json): Accessible form label wired to its control, with required and disabled styling.
- [Marquee](https://ui.saasflare.io/r/marquee.json): Infinite-scrolling row of content (logos, testimonials) — pure CSS, no animation frames.
- [Menubar](https://ui.saasflare.io/r/menubar.json): Desktop-style horizontal menu bar (File / Edit / View) with dropdowns and keyboard navigation.
- [Metric Card](https://ui.saasflare.io/r/metric-card.json): Dashboard metric card with sparkline support and trend indicator.
- [Multi Select](https://ui.saasflare.io/r/multi-select.json): Searchable multi-select with chips, select-all, a max limit, and async option loading — built on Popover + cmdk, with a plain string[] value.
- [Mouse Gradient Blob](https://ui.saasflare.io/r/mouse-gradient-blob.json): Large blurred gradient blob that trails the cursor with spring physics. Ambient hero background.
- [Moving Border](https://ui.saasflare.io/r/moving-border.json): Continuously rotating conic-gradient border around an element. Eye-catching CTA wrapper.
- [Native Select](https://ui.saasflare.io/r/native-select.json): Lightweight native select with a chevron overlay — zero-JS dropdown for simple option lists.
- [Navigation Menu](https://ui.saasflare.io/r/navigation-menu.json): Top-level site navigation with animated mega-menu dropdowns and active-link states.
- [Notification Center](https://ui.saasflare.io/r/notification-center.json): Bell-icon trigger + dropdown inbox with per-item read/dismiss controls. Composes Button + Popover + Badge.
- [Number Input](https://ui.saasflare.io/r/number-input.json): Numeric input with ± stepper buttons, min/max clamping, configurable step + precision.
- [Page Header](https://ui.saasflare.io/r/page-header.json): Page header block with breadcrumbs, title, description, and an action slot for primary buttons.
- [Page Transition](https://ui.saasflare.io/r/page-transition.json): Wraps route content with enter/exit animations for smooth client-side page transitions.
- [Pagination](https://ui.saasflare.io/r/pagination.json): Page navigation with previous/next, page numbers, and ellipsis truncation for long ranges.
- [Parallax Section](https://ui.saasflare.io/r/parallax-section.json): Scroll-driven parallax where children move at a different rate than the page, adding depth.
- [Particles Background](https://ui.saasflare.io/r/particles-background.json): Floating particle field that drifts with subtle parallax. Ambient backdrop for heroes and sections.
- [Popover](https://ui.saasflare.io/r/popover.json): Floating panel anchored to a trigger — for pickers, menus, and contextual forms.
- [Pricing Card](https://ui.saasflare.io/r/pricing-card.json): Pricing plan card with title, price, feature list, CTA, and an optional 'Popular' pill.
- [Progress](https://ui.saasflare.io/r/progress.json): Linear determinate progress bar for uploads, completion meters, and loading states.
- [Progress Circle](https://ui.saasflare.io/r/progress-circle.json): Circular progress indicator. Radial counterpart to Progress, common for KPI rings.
- [Radio Group](https://ui.saasflare.io/r/radio-group.json): Mutually exclusive option set with keyboard arrow navigation and accessible grouping.
- [Rating](https://ui.saasflare.io/r/rating.json): Star rating input with half-star precision, keyboard arrows, and read-only display mode.
- [Resizable](https://ui.saasflare.io/r/resizable.json): Draggable split panes with persistent sizes for dashboards and editor layouts.
- [Retro Grid](https://ui.saasflare.io/r/retro-grid.json): CSS-only perspective grid receding to the horizon — a synthwave landing-page backdrop.
- [Reveal On Scroll](https://ui.saasflare.io/r/reveal-on-scroll.json): Animates elements into view as they enter the viewport (Intersection Observer + Motion).
- [Scroll Area](https://ui.saasflare.io/r/scroll-area.json): Cross-browser custom scrollbars for overflow regions, keeping native scroll performance.
- [Search Field](https://ui.saasflare.io/r/search-field.json): Search input with built-in search icon, clear button, and optional loading spinner.
- [Section Card](https://ui.saasflare.io/r/section-card.json): Composable section/landing card with header, content, and footer slots.
- [Select](https://ui.saasflare.io/r/select.json): Dropdown select with option groups and a styled trigger. Radix-backed and fully accessible.
- [Separator](https://ui.saasflare.io/r/separator.json): Thin horizontal or vertical divider for grouping content and menu sections.
- [Settings Section](https://ui.saasflare.io/r/settings-section.json): Settings row layout — label and description on the left, control on the right. For preference screens.
- [Sheet](https://ui.saasflare.io/r/sheet.json): Edge-anchored slide-in panel (top/right/bottom/left) for filters, details, and side forms.
- [Shimmer Button](https://ui.saasflare.io/r/shimmer-button.json): CTA button with a looping diagonal light sweep. Draws the eye to your primary action.
- [Skeleton](https://ui.saasflare.io/r/skeleton.json): Animated placeholder block for loading states — mirror your content's shape to avoid layout shift.
- [Slider](https://ui.saasflare.io/r/slider.json): Draggable value selector with single or range thumbs, steps, and keyboard control.
- [Social Button](https://ui.saasflare.io/r/social-button.json): Compact branded sign-in button for five core providers (Google, Apple, GitHub, Microsoft, Twitter) with official logos and brand colors. For the full 16-provider OAuth set, see Social Auth Button.
- [Toaster](https://ui.saasflare.io/r/sonner.json): Toast notifications — themed, stacked, and promise-aware (Sonner) with Phosphor icons and dark-mode support.
- [Spark Chart](https://ui.saasflare.io/r/spark-chart.json): Inline mini line/area/bar chart. Pure SVG, no recharts. Tucks inside metric cards.
- [Spinner](https://ui.saasflare.io/r/spinner.json): Indeterminate loading spinner (Phosphor CircleNotch) for buttons and async regions.
- [Spotlight Card](https://ui.saasflare.io/r/spotlight-card.json): Card with a cursor-following spotlight gradient effect on hover.
- [Stat Card](https://ui.saasflare.io/r/stat-card.json): KPI / metric card with icon, large value, label, and optional delta indicator.
- [Steps](https://ui.saasflare.io/r/steps.json): Horizontal or vertical step indicator showing progress through a multi-stage flow or wizard.
- [Stepper](https://ui.saasflare.io/r/stepper.json): Controlled multi-step wizard — a useStepper hook plus Stepper / StepperNav / StepperPanel with linear or non-linear flow, optional steps, and async validation gating.
- [Sticky Scroll Reveal](https://ui.saasflare.io/r/sticky-scroll-reveal.json): Split layout where the left column pins while the right scrolls through synced content steps.
- [Switch](https://ui.saasflare.io/r/switch.json): On/off toggle for boolean settings, with size variants and accessible labeling.
- [Table](https://ui.saasflare.io/r/table.json): Composable data table with header, body, row, cell, and caption sub-components.
- [Tabs](https://ui.saasflare.io/r/tabs.json): Switch between panels of related content with keyboard navigation and an animated active indicator.
- [Tag Input](https://ui.saasflare.io/r/tag-input.json): Input that converts entries into removable pill tags on Enter / comma. Controlled or uncontrolled.
- [Team Card](https://ui.saasflare.io/r/team-card.json): Team member card with photo, name, role, bio, and social links.
- [Testimonial Card](https://ui.saasflare.io/r/testimonial-card.json): Customer testimonial card with quote, author name, role, and optional avatar.
- [Text Generate Effect](https://ui.saasflare.io/r/text-generate-effect.json): Reveals text word-by-word for a typing/AI-generation feel. For hero copy and intros.
- [Textarea](https://ui.saasflare.io/r/textarea.json): Multi-line text field with intent states and auto-sizing support for comments and messages.
- [Timeline](https://ui.saasflare.io/r/timeline.json): Vertical scroll-driven timeline whose beam fills as the reader progresses. For changelogs and stories.
- [Toggle](https://ui.saasflare.io/r/toggle.json): Two-state pressable button for toolbars (bold/italic), with outline and size variants.
- [Toggle Group](https://ui.saasflare.io/r/toggle-group.json): Set of toggles for single- or multi-select segmented controls (alignment, view modes).
- [Tooltip](https://ui.saasflare.io/r/tooltip.json): Hover/focus hint label anchored to any element, with configurable delay and side positioning.
- [Tracing Beam](https://ui.saasflare.io/r/tracing-beam.json): Animated vertical line that traces the reader's scroll progress alongside long-form content.
- [Tracker](https://ui.saasflare.io/r/tracker.json): Uptime/status segment grid. Each block is one period (day/hour) colored by status.
- [Tree View](https://ui.saasflare.io/r/tree-view.json): Recursive expand/collapse tree with keyboard navigation, controlled/uncontrolled expansion + selection.
- [Typewriter Text](https://ui.saasflare.io/r/typewriter-text.json): Types out text character-by-character with a blinking cursor. Classic hero headline effect.

## Theming

- [Palettes](https://ui.saasflare.io/docs/theming/palettes): 20 presets switched via `<html data-palette="…">`. Includes a special `colorful` palette with a pastel-gradient hover identity.
- [Surfaces](https://ui.saasflare.io/docs/theming/surfaces): `flat` and `glass` material variants, switched via `<html data-style="…">`.
- [Custom palette runtime API](https://ui.saasflare.io/docs/theming/custom): pass a hex/OKLCH primary to `<SaasflareProvider palette={{ name, primary }} />` and the whole token chain rederives.

## Install per component

```bash
# Install the runtime (providers, context, motion bundle) once:
pnpm add @saasflare/ui

# Then pull source into your project per component:
npx shadcn add https://ui.saasflare.io/r/feature-card.json
npx shadcn add https://ui.saasflare.io/r/pricing-card.json
```