Components

130 components, grouped below. Each is installable with npx shadcn add and fully themeable through the Saasflare design tokens.

Brand & Auth

• App Icon — The raw Saasflare SVG mark as a standalone icon — sized via a single size prop (any CSS length), with full SVG prop pass-through for favicons, loaders, and nav rails.
• Logo — Saasflare brand mark + wordmark with six size presets (icon hides the wordmark) and an interactive mode that wraps the mark in a next/link with hover affordance.
• Social Auth Button — Provider-branded OAuth sign-in button for all 16 supported identity providers, with official brand logos, an opt-in colorful weight, and built-in loading state (wraps StatefulButton). Includes 16 pre-bound shortcuts (GoogleAuthButton, GitHubAuthButton, …).
• Theme Mode Multi Toggle — Three-segment light / dark / system segmented control (Sun / Moon / Monitor) built on ToggleGroup, with icon, icon-inherit, and button appearances.
• Theme Mode Toggle — Two-state light/dark toggle button (Sun/Moon) backed by next-themes, with an SSR seed prop to eliminate the first-paint flash.

Buttons & Actions

• Button — The core action element. Three orthogonal axes — variant × intent × size — plus loading and icon slots.
• Button Group — Visually connected strip of buttons with shared radii and separators. For segmented actions and toolbars.
• Moving Border — Continuously rotating conic-gradient border around an element. Eye-catching CTA wrapper.
• Scroll To Top Button — Floating button that appears past a scroll offset and smoothly returns to the top — supports window or a custom scroll container, flat or glass surface.
• Shimmer Button — CTA button with a looping diagonal light sweep. Draws the eye to your primary action.
• Social Button — 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.
• Stateful Button — Button with a built-in async loading state — disables, sets aria-busy, prepends a spinner, and optionally swaps its label for loadingText.

Forms & Inputs

• Calendar — Month-grid date calendar (react-day-picker) supporting single, multiple, or range selection.
• Checkbox — Accessible checkbox with indeterminate state, for forms and bulk-select rows.
• Combobox — Searchable select — a Popover wrapping a cmdk palette. Autocomplete with full keyboard navigation.
• Date Picker — Controlled/uncontrolled single-date input — Button + Popover + single-mode Calendar.
• Date Range Picker — Controlled/uncontrolled date-range input — Button + Popover + range-mode Calendar.
• Dropzone — Drag-and-drop file upload area with click-to-open fallback. Self-contained (no react-dropzone).
• Field — Form-field wrapper bundling label, control, description, and error message with correct a11y wiring.
• Form — react-hook-form integration layer — field context, labels, descriptions, and validation messages.
• Input — Single-line text field — the form workhorse — with intent states and full sizing support.
• Input Group — Wraps an input with addons, icons, and prefix/suffix elements into a single bordered unit.
• Input OTP — One-time-code input with per-digit slots, paste handling, and auto-advance.
• Label — Accessible form label wired to its control, with required and disabled styling.
• Multi Select — Searchable multi-select with chips, select-all, a max limit, and async option loading — built on Popover + cmdk, with a plain string[] value.
• Native Select — Lightweight native select with a chevron overlay — zero-JS dropdown for simple option lists.
• Number Input — Numeric input with ± stepper buttons, min/max clamping, configurable step + precision.
• Radio Group — Mutually exclusive option set with keyboard arrow navigation and accessible grouping.
• Rating — Star rating input with half-star precision, keyboard arrows, and read-only display mode.
• Search Field — Search input with built-in search icon, clear button, and optional loading spinner.
• Select — Dropdown select with option groups and a styled trigger. Radix-backed and fully accessible.
• Slider — Draggable value selector with single or range thumbs, steps, and keyboard control.
• Switch — On/off toggle for boolean settings, with size variants and accessible labeling.
• Tag Input — Input that converts entries into removable pill tags on Enter / comma. Controlled or uncontrolled.
• Textarea — Multi-line text field with intent states and auto-sizing support for comments and messages.
• Toggle — Two-state pressable button for toolbars (bold/italic), with outline and size variants.
• Toggle Group — Set of toggles for single- or multi-select segmented controls (alignment, view modes).

Data Display

• Avatar — User or brand avatar with image, automatic initials fallback, and size variants.
• Badge — Compact label for statuses, counts, and tags, with semantic intent colors and subtle/solid styles.
• Bento Grid — Bento-style grid layout for feature galleries with mixed sizes.
• Card — The base surface primitive — header, content, and footer slots — that most composed cards build on.
• Code Block — Code-block chrome: filename header, language badge, copy button, optional line numbers. BYO highlighter.
• Data Table — 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 — Toolbar layout for tables and data grids — search, filters, and actions in a single bar.
• Empty — Empty-state primitive — centered icon, title, description, and action slots for zero-data views.
• Empty State — Polished zero-data view — icon or illustration, title, description, and a call-to-action button.
• Feature Card — Feature card with icon, title, and description. The most reused card pattern on any SaaS landing page.
• Item — Generic list/row primitive with leading media, title, description, and trailing action slots.
• Kbd — Inline keyboard-key styling for documenting shortcuts (⌘K, Ctrl+C).
• Metric Card — Dashboard metric card with sparkline support and trend indicator.
• Page Header — Page header block with breadcrumbs, title, description, and an action slot for primary buttons.
• Pricing Card — Pricing plan card with title, price, feature list, CTA, and an optional 'Popular' pill.
• Section Card — Composable section/landing card with header, content, and footer slots.
• Settings Section — Settings row layout — label and description on the left, control on the right. For preference screens.
• Spotlight Card — Card with a cursor-following spotlight gradient effect on hover.
• Stat Card — KPI / metric card with icon, large value, label, and optional delta indicator.
• Table — Composable data table with header, body, row, cell, and caption sub-components.
• Team Card — Team member card with photo, name, role, bio, and social links.
• Testimonial Card — Customer testimonial card with quote, author name, role, and optional avatar.
• Tree View — Recursive expand/collapse tree with keyboard navigation, controlled/uncontrolled expansion + selection.
• User Avatar — Avatar with image, automatic initials fallback, three size variants, and an optional click handler. The opinionated wrapper most apps reach for.

Data Visualization

• Bar List — Horizontal 'top N' ranking list with proportional bar fills. Dashboard staple.
• Category Bar — Segmented progress bar with per-segment colors and optional labels. Useful for resource breakdowns.
• Chart — Composable Recharts wrapper with themed tooltips, legends, and design-system color tokens.
• Countdown — Presentational countdown display (days/hours/minutes/seconds) — pair with the useCountdown hook.
• Progress — Linear determinate progress bar for uploads, completion meters, and loading states.
• Progress Circle — Circular progress indicator. Radial counterpart to Progress, common for KPI rings.
• Spark Chart — Inline mini line/area/bar chart. Pure SVG, no recharts. Tucks inside metric cards.
• Tracker — Uptime/status segment grid. Each block is one period (day/hour) colored by status.

Feedback

• Alert — Inline status banner (info/success/warning/danger) with icon, title, and description for non-blocking messages.
• Alert Dialog — Modal confirmation for destructive or irreversible actions, with required acknowledge and cancel actions.
• Animated Tooltip — Row of circular avatars that reveal a spring-tilted, mouse-tracking tooltip on hover — for team rows and contributor stacks.
• Callout — Emphasized inline message box (info/warning/success/danger). Lives between Alert and Dialog.
• Dialog — Modal overlay for focused tasks and forms, with animated enter/exit and focus trapping.
• Drawer — Mobile-first bottom drawer with drag-to-dismiss physics (Vaul). The touch-friendly Sheet.
• Hover Card — Rich preview popover that opens on hover — user cards, link previews, and definitions.
• Notification Center — Bell-icon trigger + dropdown inbox with per-item read/dismiss controls. Composes Button + Popover + Badge.
• Popover — Floating panel anchored to a trigger — for pickers, menus, and contextual forms.
• Sheet — Edge-anchored slide-in panel (top/right/bottom/left) for filters, details, and side forms.
• Skeleton — Animated placeholder block for loading states — mirror your content's shape to avoid layout shift.
• Toaster — Toast notifications — themed, stacked, and promise-aware (Sonner) with Phosphor icons and dark-mode support.
• Spinner — Indeterminate loading spinner (Phosphor CircleNotch) for buttons and async regions.
• Tooltip — Hover/focus hint label anchored to any element, with configurable delay and side positioning.
• Top Loading Bar — Slim top-of-page progress bar for Next.js App Router route transitions — self-trickling when animated, a flat aria-live bar when reduced-motion.

Navigation

• Breadcrumb — Hierarchical navigation trail showing the user's location, with truncation and custom separators.
• Command — ⌘K command palette with fuzzy search, groups, and keyboard navigation (cmdk).
• Context Menu — Right-click menu with items, submenus, checkboxes, and keyboard shortcuts.
• Data Pagination — 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.
• Dock — macOS-style dock bar where icons magnify on cursor proximity. Playful navigation accent.
• Dropdown Menu — Click-triggered action menu with items, submenus, checkboxes, radio groups, and shortcuts.
• Menubar — Desktop-style horizontal menu bar (File / Edit / View) with dropdowns and keyboard navigation.
• Navigation Menu — Top-level site navigation with animated mega-menu dropdowns and active-link states.
• Pagination — Page navigation with previous/next, page numbers, and ellipsis truncation for long ranges.
• Sidebar — Collapsible application sidebar system — provider, rail, header/footer, groups, and a full menu (button, action, badge, sub-menu, skeleton) with cookie-persisted open state and a ⌘B keyboard shortcut.
• Stepper — Controlled multi-step wizard — a useStepper hook plus Stepper / StepperNav / StepperPanel with linear or non-linear flow, optional steps, and async validation gating.
• Steps — Horizontal or vertical step indicator showing progress through a multi-stage flow or wizard.
• Tabs — Switch between panels of related content with keyboard navigation and an animated active indicator.

Layout

• Accordion — Vertically stacked, collapsible sections for FAQs and disclosure lists. One or many panels open at a time.
• Aspect Ratio — Locks content to a fixed width:height ratio — responsive images, video embeds, and media cards.
• Carousel — Touch/swipe carousel (Embla) with autoplay, looping, and custom controls for galleries and sliders.
• Collapsible — Single show/hide region with animated open/close. The building block under accordions and disclosures.
• Resizable — Draggable split panes with persistent sizes for dashboards and editor layouts.
• Scroll Area — Cross-browser custom scrollbars for overflow regions, keeping native scroll performance.
• Separator — Thin horizontal or vertical divider for grouping content and menu sections.

Media

• Audio Player — Self-contained audio player UI over the native HTML5 element — play/pause, scrubbing, and volume.
• Compare — Before/after image slider with a draggable divider, for comparisons and product demos.
• Device Mock — CSS-only phone, laptop, and browser frames for wrapping product screenshots and demos.
• Gallery Lightbox — Click-to-expand image gallery with a fullscreen overlay, prev/next, and keyboard navigation.
• Hero Video Dialog — Poster image with a play button that opens an embedded video in a modal. Landing-page hero staple.
• Hotspot — Pulsing marker dots at absolute positions with hover tooltips — annotate screenshots and demos.
• Image Swap Hover — Crossfades between a primary and alternate image on hover. Product and team-photo flourish.

Effects & Motion

• Aurora Background — Animated aurora backdrop — soft blurred color blobs drifting behind hero content.
• Blur Fade — Entrance animation combining blur, fade, and offset — for elegant on-mount and on-scroll reveals.
• Border Beam — A glowing gradient beam that travels around an element's border. Premium accent for cards and CTAs.
• Confetti — CSS-only confetti burst with randomized colors and trajectories — celebrate conversions and milestones.
• Flip Words — Cycles through a list of words with a vertical flip animation — for dynamic hero headlines.
• Glowing Effect — Mouse-tracking glow that follows the cursor around a container's edges. Interactive card highlight.
• Gradient Text — Animated linear-gradient text fill via background-clip — for headlines and brand accents.
• Marquee — Infinite-scrolling row of content (logos, testimonials) — pure CSS, no animation frames.
• Mouse Gradient Blob — Large blurred gradient blob that trails the cursor with spring physics. Ambient hero background.
• Page Transition — Wraps route content with enter/exit animations for smooth client-side page transitions.
• Parallax Section — Scroll-driven parallax where children move at a different rate than the page, adding depth.
• Particles Background — Floating particle field that drifts with subtle parallax. Ambient backdrop for heroes and sections.
• Retro Grid — CSS-only perspective grid receding to the horizon — a synthwave landing-page backdrop.
• Reveal On Scroll — Animates elements into view as they enter the viewport (Intersection Observer + Motion).
• Sticky Scroll Reveal — Split layout where the left column pins while the right scrolls through synced content steps.
• Text Generate Effect — Reveals text word-by-word for a typing/AI-generation feel. For hero copy and intros.
• Timeline — Vertical scroll-driven timeline whose beam fills as the reader progresses. For changelogs and stories.
• Tracing Beam — Animated vertical line that traces the reader's scroll progress alongside long-form content.
• Typewriter Text — Types out text character-by-character with a blinking cursor. Classic hero headline effect.