shadcn-ui-blocks
shadcnship.comFreemanifest served live
Pre-built Shadcn UI components and blocks. Ready to copy and paste.
Items
74
2026-08-03Every entry in its own registry.json, counted last night.Free to install
74
2026-08-03Item endpoints that returned source without credentials.Behind a key
0
2026-08-03Item endpoints that answered 401.Last push
9 days ago
10 stars. Both figures are GitHub's about this repository, not ones this index measured.Components
Search withinFreeits item endpoint answered without a keyPaidits item endpoint answered 401Unverifiedit serves no item endpoint we could ask
| Component | What the registry says it is | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Social Iconssocial-icons | Collection of SVG social media brand icons (GitHub, Google, Twitter/X, LinkedIn, and more) as composable React components. Use them in login forms, footers, navbars, or any UI that references external social platforms. | Components | Free | no deps |
Blocks
Search within| Component | What the registry says it is | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Square Grid Backgroundbackground-01 | Customizable 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. | Blocks | Free | no deps | |
| Dot Pattern Backgroundbackground-02 | Customizable 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. | Blocks | Free | no deps | |
| Diagonal Stripes Backgroundbackground-03 | Customizable 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. | Blocks | Free | no deps | |
| Vertical Lines Backgroundbackground-04 | Customizable 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. | Blocks | Free | no deps | |
| Interactive Grid Backgroundbackground-05 | Interactive 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. | Blocks | Free | no deps | |
| Banner 01banner-01 | Full-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. | Blocks | Free | 1 dep | |
| Blog 01blog-01 | Blog 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. | Blocks | Free | no deps | |
| Changelog 01changelog-01 | Timeline-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. | Blocks | Free | no deps | |
| Comparison 01comparison-01 | Product 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. | Blocks | Free | 1 dep | |
| Contact 01contact-01 | Contact 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. | Blocks | Free | 1 dep | |
| Contact 02contact-02 | A pro contact form with split layout, tour select, image slot, and contact info strip | Blocks | Free | 4 deps | |
| Cookie 01cookie-01 | A floating cookie consent card with accept button and learn more link | Blocks | Free | 1 dep | |
| CTA 01cta-01 | Horizontal 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. | Blocks | Free | 1 dep | |
| CTA 02cta-02 | CTA 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. | Blocks | Free | 1 dep | |
| CTA 03cta-03 | Newsletter 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. | Blocks | Free | 1 dep | |
| CTA 04cta-04 | Centered 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. | Blocks | Free | 1 dep | |
| CTA 05cta-05 | A centered CTA with a fanned stack of rotated photos, badge, contrast title, and pill button | Blocks | Free | 1 dep | |
| Dashboard 02dashboard-02 | Sales 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. | Blocks | Free | 2 deps · 8 files | |
| Supabase Data Tabledata-table-01 | Paginated 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. | Blocks | Free | 2 deps · 9 files | |
| FAQ 01faq-01 | Single-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. | Blocks | Free | 1 dep | |
| FAQ 02faq-02 | Two-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. | Blocks | Free | 1 dep | |
| Feature 01feature-01 | Three-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. | Blocks | Free | 1 dep | |
| Feature 03feature-03 | Two-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. | Blocks | Free | 1 dep | |
| Feature 04feature-04 | Three-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. | Blocks | Free | 1 dep | |
| Feature 05feature-05 | Interactive 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. | Blocks | Free | 1 dep | |
| Feature 06feature-06 | Four-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. | Blocks | Free | 1 dep | |
| Feature 07feature-07 | Full-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. | Blocks | Free | 1 dep | |
| Feature 08feature-08 | A bento-style feature grid with a large featured card and icon-based feature cards | Blocks | Free | 1 dep | |
| Feature 09feature-09 | An integrations grid with icon cards in a 3x2 layout and social proof ratings | Blocks | Free | 1 dep | |
| Feature 11feature-11 | A feature section with a split left-aligned header and two large image cards with text below | Blocks | Free | 1 dep | |
| Feature 12feature-12 | A feature section with a large clickable title list on the left and an image with description on the right that updates on selection | Blocks | Free | no deps | |
| Feature 13feature-13 | A how-it-works section with a 3-card carousel, progress tab bar, and active step details | Blocks | Free | 1 dep | |
| Feature 14feature-14 | A how-it-works section with centered header and a 2-column grid of image cards | Blocks | Free | no deps | |
| Feature 15feature-15 | A centered feature section with badge, phone mockup on a dot pattern background, and highlighted description | Blocks | Free | 1 dep | |
| Feature 16feature-16 | A two-column feature section with labels, titles, learn-more links, and visual cards below | Blocks | Free | 1 dep | |
| Feature 17feature-17 | An alternating 2-column feature grid with thin borders, text and illustration cells, and category tags | Blocks | Free | 1 dep | |
| Feature 18feature-18 | A dark case-studies section with gradient title, white cards with category labels and plus buttons, and a view-all link | Blocks | Free | 1 dep | |
| Feature 19feature-19 | An editorial split section with large title, two compared image panels, circular arrow button, and footer bar | Blocks | Free | 1 dep | |
| Feature 20feature-20 | A 3-card feature section with decorative UI mockups (form, call, pricing) and split header | Blocks | Free | 1 dep | |
| Footer 01footer-01 | Multi-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. | Blocks | Free | 1 dep | |
| Hero 01hero-01 | Two-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. | Blocks | Free | 1 dep | |
| Hero 02hero-02 | Centered 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. | Blocks | Free | 1 dep | |
| Hero 03hero-03 | Two-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. | Blocks | Free | 1 dep | |
| Hero 04hero-04 | A centered hero with multi-image cards below at varying heights | Blocks | Free | 1 dep | |
| Hero 05hero-05 | Minimal 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. | Blocks | Free | 1 dep | |
| Hero 06hero-06 | A full-screen centered hero with background image, announcement badge, and CTA buttons | Blocks | Free | 1 dep | |
| Image Compareimage-compare | A before/after image slider — drag the divider to compare both sides in real time | Blocks | Free | 1 dep | |
| Integration 01integration-01 | Dark-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. | Blocks | Free | no deps |
