Every component is typed, accessible, dark-mode ready, and built to drop straight into your Next.js project.
Showing all 50 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 where no more than one 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 via next-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 tooltipLanding page sections: heroes, pricing, testimonials, CTAs, and everything for the public-facing site.
Sticky top-of-page banner with optional link and dismiss for product announcements.
npx bouncekit add announcementbarBlog post preview card with category badge, title, excerpt, author, and reading time.
npx bouncekit add blogpostcardContact form with name, email, subject, and message fields plus an optional info sidebar.
npx bouncekit add contactsectionFull-width call-to-action with flowing Threads WebGL background and staggered reveal.
npx bouncekit add ctaAccordion-based FAQ section with staggered entrance animations.
npx bouncekit add faqsectionBento-style feature grid with icons, annotations, and hover effects.
npx bouncekit add featuregridMinimal footer with branding and navigation links.
npx bouncekit add footerFull-width animated hero with scroll parallax, floating depth layers, wireframe mockup, and entrance animations.
npx bouncekit add hero-section"Trusted by" logo cloud with optional marquee animation for social proof.
npx bouncekit add logocloudFull-screen mobile navigation overlay with slide-in animation.
npx bouncekit add mobilenavTransparent navbar with backdrop blur and mobile hamburger menu.
npx bouncekit add navbarFilm-grain noise texture overlay using an SVG feTurbulence filter with direct DOM animation.
npx bouncekit add noiseoverlayResponsive pricing table with plan cards, feature lists, and tooltips.
npx bouncekit add pricingtableInteractive browser frame with tab switcher showcasing live component previews.
npx bouncekit add showcasesectionHorizontal row of key metrics with animated counters.
npx bouncekit add statsstripAnimated tech stack marquee showing framework logos and labels.
npx bouncekit add techstripInfinite scrolling marquee of testimonials with star ratings, avatars, and hover pause.
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 socialauthbuttons