Loading...
Loading...
Loading...
Every component is typed, accessible, dark-mode ready, and built to drop straight into your Next.js project.
Showing all 108 components
Low-level building blocks built on Radix UI. Fully accessible, dark-mode ready, and composable.
A vertically stacked set of interactive headings that each reveal a section of content.
npx bouncekit add accordionConfirmation dialog requiring explicit user action.
npx bouncekit add alertdialogUser avatar with image, fallback initials, and optional status ring.
npx bouncekit add avatarSmall status label with color-coded variants.
npx bouncekit add badgeAccessible button with multiple visual variants and sizes.
npx bouncekit add buttonSurface container with header, content, and footer slots.
npx bouncekit add cardA control that allows the user to toggle between checked and not checked.
npx bouncekit add checkboxModal dialog built on Radix Dialog with overlay and close button.
npx bouncekit add dialogContext or action menu built on Radix DropdownMenu.
npx bouncekit add dropdownmenuReact Hook Form integration with Radix Label, Slot, and accessible error messages.
npx bouncekit add formStyled text input extending native <input> attributes.
npx bouncekit add inputAccessible form label built on Radix Label.
npx bouncekit add labelCanvas-based glitch text effect with configurable speed, colors, and smooth transitions.
npx bouncekit add letterglitchDisplays rich content in a portal, triggered by a button.
npx bouncekit add popoverDisplays an indicator showing the completion progress of a task.
npx bouncekit add progressA set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time.
npx bouncekit add radiogroupDropdown select menu built on Radix Select with keyboard navigation.
npx bouncekit add selectHorizontal or vertical divider built on Radix Separator.
npx bouncekit add separatorSlide-out panel from any edge. Built on Radix Dialog.
npx bouncekit add sheetAnimated placeholder for loading states.
npx bouncekit add skeletonToggle switch built on Radix Switch.
npx bouncekit add switchSemantic HTML table with styled header, body, and row components.
npx bouncekit add tableTabbed content built on Radix Tabs.
npx bouncekit add tabsStyled multiline text input extending native <textarea>.
npx bouncekit add textareaIcon button that toggles between light and dark themes.
npx bouncekit add themetoggleWebGL flowing threads animation rendered on a full-size canvas.
npx bouncekit add threadsHoverable tooltip built on Radix Tooltip.
npx bouncekit add tooltipApp-shell widgets: sidebar, topbar, stats, charts, data table, command palette, and more.
Chronological event list with icons, timestamps, and empty state.
npx bouncekit add activityfeedRenders a list of dashboard activity feed items (comments, file uploads) with avatars.
npx bouncekit add activityitemsMobile slide-out sheet for viewing activity feed below xl breakpoint.
npx bouncekit add activitysheetCard wrapper for chart visualizations with title, description, and legend.
npx bouncekit add chartcard⌘K command palette with grouped search results and keyboard navigation.
npx bouncekit add commandmenuClient-side shell managing command menu and notification panel state.
npx bouncekit add dashboardshellPre-wired topbar with search, notifications, theme toggle, and user dropdown.
npx bouncekit add dashboardtopbaractionsSortable, selectable data table with column definitions and row actions.
npx bouncekit add datatablePlaceholder for empty lists with icon, title, description, and CTA.
npx bouncekit add emptystateSlide-out notification panel with item list and read state.
npx bouncekit add notificationpanelSVG area chart comparing two time series with gradient fills and glow effects.
npx bouncekit add performancechartCollapsible sidebar with grouped navigation, tooltips, and a footer slot.
npx bouncekit add sidebarMetric card with label, value, and optional trend badge.
npx bouncekit add statcardTop navigation bar with mobile menu toggle, search trigger, and action slots.
npx bouncekit add topbarUser menu with avatar, sign-out, and configurable action items.
npx bouncekit add userdropdownLanding page sections: hero, features, pricing, testimonials, and three CTA variants.
Asymmetric bento grid with spotlight cards and stagger animations.
npx bouncekit add bentofeaturesInteractive bento-grid testimonial layout with hover animations.
npx bouncekit add bentotestimonialsDefault CTA wrapper — renders the CtaThreads variant.
npx bouncekit add ctaInteractive 3D keycard CTA with tilt effect.
npx bouncekit add ctakeycardTerminal-style CTA with blinking cursor.
npx bouncekit add ctaterminalFull-width CTA with flowing WebGL Threads background.
npx bouncekit add ctathreadsFalling meteor streaks and tilt card effects for hero/CTA background decoration.
npx bouncekit add effectplaceholdersAccordion-based FAQ section with staggered entrance animations.
npx bouncekit add faqsectionBento-style feature grid with icons, annotations, and hover effects.
npx bouncekit add featuregridAlternative features grid layout with icon cards and scroll-triggered entrance.
npx bouncekit add featuressectionMinimal footer with branding and navigation links.
npx bouncekit add footerAnimated dot-grid background with radial gradient mask.
npx bouncekit add gridbackgroundFull-width animated hero with scroll parallax, floating depth layers, wireframe mockup, and dramatic entrance animations.
npx bouncekit add herosectionFull-width hero with glitch headline, meteors, floating code, and magnetic CTAs.
npx bouncekit add herosectionv2Forces dark theme on marketing pages. Restores previous theme on unmount.
npx bouncekit add marketingthemeforceTwo opposing infinite-scroll rows creating a wall-of-love effect.
npx bouncekit add marqueetestimonialsContainer with an animated gradient border that orbits the element.
npx bouncekit add movingborderTransparent navbar with backdrop blur and mobile hamburger menu.
npx bouncekit add navbarResponsive pricing table with plan cards, feature lists, and tooltips.
npx bouncekit add pricingtableConstrained-width section wrapper with optional anchor id.
npx bouncekit add sectionText with an animated shimmer gradient sweep effect.
npx bouncekit add shimmertextInteractive browser frame with tab switcher showcasing live component previews.
npx bouncekit add showcasesectionCard with a radial spotlight glow that follows the cursor.
npx bouncekit add spotlightcardHorizontal row of key metrics with animated counters.
npx bouncekit add statsstripAnimated tech stack marquee showing framework logos and labels.
npx bouncekit add techstripGrid testimonial section with oversized quote marks and avatar cards.
npx bouncekit add testimonialsDark section with scroll-driven wireframe assembly animation.
npx bouncekit add wireframebuilderPresentational auth forms — wire to any provider (Clerk, NextAuth, Supabase).
Split-screen auth layout with a branded left panel and form content on the right.
npx bouncekit add authlayoutEmail-only form for password reset requests.
npx bouncekit add forgotpasswordformEmail + password login form with social OAuth slot.
npx bouncekit add loginformName + email + password signup form with terms acceptance.
npx bouncekit add signupformGoogle and GitHub OAuth buttons as demo placeholders.
npx bouncekit add socialauthbuttonsFlat, card-free settings pages with section components and danger zone.
API key management table with create/revoke actions.
npx bouncekit add apikeystableBilling plan, payment method, and invoice display.
npx bouncekit add billingcardDestructive actions (delete account, export data) with confirmation dialogs.
npx bouncekit add dangerzoneName + email profile editing form.
npx bouncekit add profileformSidebar navigation + content area for settings sub-routes.
npx bouncekit add settingslayoutFlat section with title, description, optional action, and a top divider.
npx bouncekit add settingssectionClient-side shell owning the nav config so the route layout stays a server component.
npx bouncekit add settingsshell3-step animated wizard: welcome screen → setup checklist → step wizard → dashboard.
Multi-step wizard with animated progress connectors and content transitions.
npx bouncekit add onboardingstepsInteractive checklist with animated check icons and completion state.
npx bouncekit add setupchecklistFull-screen welcome with feature grid and animated stagger entrance.
npx bouncekit add welcomescreenToasts, banners, and loading states for user feedback.
Full-width banner for system messages with four visual variants and optional dismiss.
npx bouncekit add alertbannerCentered loading state with animated spinner and optional description.
npx bouncekit add loadingscreenAnimated Pong-style loading indicator with bouncing ball and paddles.
npx bouncekit add pongloaderContext-based toast system. Wrap your app and use useToast() to show toasts.
npx bouncekit add toastproviderCross-cutting components used across marketing, dashboard, and auth.
Brand logo rendered as text with optional icon.
npx bouncekit add logoFull-screen mobile navigation overlay with slide-in animation.
npx bouncekit add mobilenavFadeIn, SlideUp, and ScaleIn wrappers providing common Framer Motion entrance animations with reduced-motion support.
npx bouncekit add motionprimitivesFilm-grain noise texture overlay using an SVG feTurbulence filter with direct DOM animation.
npx bouncekit add noiseoverlayPage title with optional description and trailing action buttons.
npx bouncekit add pageheaderWraps the app in next-themes with class-based dark mode.
npx bouncekit add themeproviderUser avatar with image support, fallback initials, and size variants.
npx bouncekit add useravatarReusable React hooks for common SaaS patterns — debouncing, clipboard, storage, and SSR safety.
Copy text to the clipboard with a temporary success flag that auto-resets.
npx bouncekit add usecopytoclipboardDebounce a value by a given delay. Useful for search inputs and API calls.
npx bouncekit add usedebounceSSR-safe useLayoutEffect — uses useEffect on the server, useLayoutEffect on the client.
npx bouncekit add useisomorphiclayouteffectPersist state in localStorage with JSON serialization and cross-tab sync.
npx bouncekit add uselocalstorageSubscribe to a CSS media query. Returns false during SSR to avoid hydration mismatches.
npx bouncekit add usemediaqueryReturns true after the component has mounted. Use to guard browser-only rendering.
npx bouncekit add usemountedRun a callback when a click or touch occurs outside the referenced element.
npx bouncekit add useonclickoutsideCore utility functions, constants, validation schemas, and mock data.
Shared Framer Motion easing curves, durations, and physics constants.
npx bouncekit add animationsMock data fetching layer demonstrating the expected response shape.
npx bouncekit add apiApplication-wide constants like ROUTES, POST_STATUS, and PLAN_LIMITS.
npx bouncekit add constantsRealistic mock data for populating lists, tables, and settings.
npx bouncekit add mockdataCore utilities like Tailwind class merging (cn), formatDate, and formatPrice.
npx bouncekit add utilsZod schemas for both client-side form validation and server-side action validation.
npx bouncekit add validationsGet the complete registry — dashboard, auth, settings, marketing, onboarding, feedback, hooks, and utilities. One-time purchase, lifetime updates, full source code.