A
arnaudvolp/shadcn-ui-blocks
Square Grid Backgroundbackground-01Customizable square grid background component with adjustable line color, grid size, and opacity props. Use it as a decorative backdrop for hero sections, cards, or any area that benefits from a subtle geometric texture.
Dot Pattern Backgroundbackground-02Customizable dot pattern background with adjustable dot color, size, spacing, and opacity. Use it behind hero sections or feature areas to add visual depth without distracting from your main content.
Diagonal Stripes Backgroundbackground-03Customizable diagonal stripes background with adjustable line color, width, spacing, and opacity. Use it to add a subtle textile-like pattern to sections, cards, or full-page backgrounds.
Vertical Lines Backgroundbackground-04Customizable vertical lines background with adjustable line count, width, color, and opacity. Use it behind hero or pricing sections to create a structured, architectural visual backdrop.
Interactive Grid Backgroundbackground-05Interactive grid background where individual cells highlight on hover with a configurable glow color. Use it behind hero sections or interactive showcases to add a playful, dynamic feel to an otherwise static layout.
Banner 01banner-01Full-width announcement banner with a short message, an arrow link, and a dismiss button. Use it at the top of any page to surface time-sensitive promotions, feature launches, or important product updates.
Blog 01blog-01Blog section with post cards featuring cover images, category badges, titles, excerpts, and author info. Use it on content sites or product blogs to display articles in a clean, scannable grid layout.
Changelog 01changelog-01Timeline-style changelog listing product updates with version numbers, release dates, and descriptions. Use it on product or documentation sites to communicate release history and build trust with power users.
Comparison 01comparison-01Product comparison table with images, specification rows, and checkmark/cross value indicators. Use it on product or pricing pages to help users make confident purchase decisions by clearly highlighting key differences.
Contact 01contact-01Contact section with a card-wrapped form (name, email, message) alongside company contact information. Use it on contact or about pages to give visitors a direct, professional way to reach your team.
CTA 01cta-01Horizontal call-to-action section with a heading, description, and primary/secondary CTA buttons. Use it at the end of landing page sections to nudge visitors toward sign-up or purchase at the right moment.
CTA 02cta-02CTA card with an app or device mockup image, headline, and action button. Use it to close a landing page with a visually driven conversion prompt that showcases your product in context.
CTA 03cta-03Newsletter subscription CTA with an email input and a submit button. Use it to capture leads directly within your content by embedding a low-friction email signup anywhere on the page.
CTA 04cta-04Centered CTA card with a subtle grid background, bold headline, description, and action button. Use it as a section-closing block that re-engages visitors who scrolled past earlier conversion points.
Dashboard 02dashboard-02Sales analytics dashboard with revenue KPI cards, interactive bar charts, and a recent orders table. Use it as a starting point for admin panels, analytics views, or any SaaS backend interface.
Data Table 01data-table-01Paginated data table with global search and sortable columns. Two modes: pass a data array for client-side rendering, or a Supabase table name for server-side pagination. Supports text, date, badge, tags, and status cell types.
FAQ 01faq-01Single-column accordion FAQ section with expandable question and answer items. Use it on landing pages, pricing pages, or support sections to address common objections and reduce incoming support requests.
FAQ 02faq-02Two-column accordion FAQ grid for displaying a larger set of questions side by side. Use it when you have ten or more questions and want to keep the FAQ section compact and well-organized.
Feature 01feature-01Three-column feature grid displaying product benefits as icon cards with titles and descriptions. Use it to quickly communicate your product's key capabilities anywhere on a SaaS or marketing landing page.
Feature 03feature-03Two-column image grid showcasing product features with visual screenshots and short descriptions. Use it to let your interface speak for itself while giving context for each feature shown.
Feature 04feature-04Three-column icon card grid for listing product features with icons, titles, and short descriptions. Use it as a lightweight, fast-loading feature showcase section that stays scannable on any screen size.
Feature 05feature-05Interactive accordion feature section where clicking each item reveals a corresponding product screenshot. Use it to keep the section compact while letting users explore features at their own pace.
Feature 06feature-06Four-step process section with numbered badges, step titles, descriptions, and an optional screenshot. Use it to explain how your product works, step by step, on landing and onboarding pages.
Feature 07feature-07Full-width video player section with a poster image and an animated play button overlay. Use it on landing pages to embed a product demo or explainer video where showing beats telling.
Feature 08feature-08A bento-style feature grid with a large featured card and icon-based feature cards
Feature 09feature-09An integrations grid with icon cards in a 3x2 layout and social proof ratings
Footer 01footer-01Multi-column footer with company branding, grouped navigation links, and social media icons. Use it on every page of your site to provide consistent navigation, important links, and legal information at the bottom.
Hero 01hero-01Two-column hero section with an announcement badge, headline, subtitle, and primary/secondary CTA buttons. Place it as the first section of your landing page to immediately communicate your product value and drive sign-ups.
Hero 02hero-02Centered hero section with a grid background, headline, CTA buttons, and a featured product screenshot. Use it above the fold on app or SaaS landing pages to visually showcase your product and guide visitors toward action.
Hero 03hero-03Two-column hero with star rating social proof, key statistics card, and call-to-action buttons. Use it when you need to build immediate trust and highlight traction metrics on SaaS or agency landing pages.
Hero 05hero-05Minimal full-screen centered hero with headline, subtitle, and CTA buttons on a clean background. Use it as a distraction-free entry point for products that rely on strong copy rather than visuals.
Integration 01integration-01Dark-themed integration showcase with a curved connection path drawn between tool logos. Use it on landing pages to visually communicate how your product fits into your users' existing toolchain.
Login 01login-01Split-screen login page with a gradient background on one side and an email/password form with OAuth buttons on the other. Use it as a drop-in authentication page when you need a polished login experience fast.
Login Supabaselogin-02Full-stack split-screen auth page with Supabase email/password login and OAuth provider support. Use it as a complete, ready-to-ship login page when your backend is powered by Supabase Auth.
Logo 01logo-01Logo cloud section with two infinite scrolling marquee rows showcasing partner or customer logos. Use it immediately after your hero section to build trust through brand association with recognized names.
Logo 02logo-02Client logo grid with clickable industry and technology category filters and featured logo cards. Use it on portfolio or case study pages to showcase logos while allowing visitors to filter by what matters to them.
Navbar 01navbar-01Responsive navbar with dropdown navigation menus on desktop and an accordion-based mobile menu. Use it as your site-wide header to provide clear, accessible navigation across all screen sizes and devices.
Pricing 01pricing-01Three-column pricing table with a monthly/yearly billing toggle, a highlighted recommended plan, and feature lists. Use it on dedicated pricing pages to help users choose the right plan and increase conversion.
Pricing 02pricing-02Side-by-side pricing comparison table with feature rows and checkmark/cross indicators. Use it when your plans share many features and you want to make the differences crystal clear for potential buyers.
Pricing 03pricing-03Three-column pricing section with a tabbed billing toggle, feature lists with separators, and CTA buttons. Use it as an alternative pricing layout when you want to visually emphasize the most popular plan.
Register 01register-01Centered registration card with full name, email, and password fields, including client-side validation. Use it as a clean sign-up page for any web application that requires user account creation.
Stat 01stat-01Stats section displaying key product or business metrics in individual icon cards with labels. Use it to quantify your impact on landing pages and give visitors concrete, trust-building numbers.
Stat 02stat-02Horizontal stats section with large numbers and labels separated by dividers. Use it as a compact, eye-catching metrics strip that fits naturally between any two sections on a landing page.
Team 01team-01Team section displaying members in cards with profile photos, names, job roles, and social links. Use it on about pages to humanize your brand and help visitors connect with the people behind your product.
Testimonial 01testimonial-01Scrolling testimonial section with two animated marquee rows of customer review cards. Use it as a social proof belt on landing pages to continuously surface customer validation without requiring any user interaction.
Testimonial 02testimonial-02Masonry grid wall-of-love section displaying multiple customer reviews in a varied layout. Use it on marketing sites where you have rich social proof and want to display it in a visually engaging way.
Waitlist 01waitlist-01Waitlist signup section with an email capture form and social proof avatars showing subscriber count. Use it on coming-soon pages to build an audience before your product launches and validate demand early.
Waitlist 02waitlist-02Waitlist section with a Supabase-connected email form that stores submissions directly to your database. Use it when your backend is Supabase and you want a zero-config waitlist with persistent storage out of the box.