shadcncraft blocksfor shadcn/ui.

309 blocks · 6 free · 303 paid · updated 20 Oct 2026

A starter collection of polished shadcn/ui components and blocks built to production standards. Part of a larger Figma + React system designed to scale with your product.

Browse all 309 blocks Visit shadcncraft

New from shadcncraft

Newest first

Benefits 14 – Hero media with supporting icon row

Benefits 15 – Side-by-side media with icon list

Benefits 16 – Lead text with media and supporting row

Benefits 17 – Section header with stacked cards

Benefits 18 – Centered media with divider and summary row

Benefits 19 – Text list with vertical accent and side media

Benefits 20 – Wide media showcase with side panel

Benefits 21 – Card grid with equal emphasis

Benefits 22 – Split content with feature list and image

Metrics 10 – Expanded circular metrics row

Metrics 11 – Lead-in explanation with supporting stats

Metrics 8 – Multi-row metrics grid

Metrics 9 – Circular progress metrics

Pricing 10 – Free vs paid contrast layout

Pricing 8 – Split layout with featured plan emphasis

Pricing 9 – Unified card group with equal plan weight

Testimonial 12 – Featured quote with supporting cards

Testimonial 13 – Single featured testimonial with inline pagination

Testimonial 14 – Dual quote carousel with ratings

Testimonial 15 – Image-led quote cards

Testimonial 16 – Single hero testimonial

Testimonial 17 – Testimonial with supporting metrics

Testimonial 18 – Multi-quote card carousel

Testimonial 19 – Image carousel with quote overlays

shadcncraft hero blocks

10 blocks

See all

Hero 9 – Page header with supporting visual

Hero 2 – Full-bleed background with centered content

Hero 4 – Soft gradient hero with dual CTAs and rating

Hero 3 – Light background with centered content

Hero 8 – Minimal page header

Hero 1 – Centered headline with media hero

Hero 5 – Split layout with waitlist capture

Hero 10 – Full-bleed image hero

Hero 6 – Feature-led split hero

Hero 7 – Editorial story hero

shadcncraft pricing blocks

10 blocks

See all

Pricing 7 – Feature-comparison table pricing

Pricing 5 – Side-by-side plans with duplicated emphasis

Pricing 6 – Single-plan focused pricing

Pricing 3 – Single plan spotlight

Pricing 4 – Three-plan comparison with highlighted default

Pricing 1 – Three-tier card pricing grid

Pricing 2 – Focused two-plan comparison

Pricing 10 – Free vs paid contrast layout

Pricing 9 – Unified card group with equal plan weight

Pricing 8 – Split layout with featured plan emphasis

shadcncraft navbar blocks

6 blocks

See all

Header 1 – Page header with actions and search

Header 2 – Page header with cover image

Header 3 – Page header with tabs

Header 4 – Page header with cover image and tabs

Header 5 – Profile header with identity and actions

Header 6 – Page header with supporting description

shadcncraft dashboard HR blocks

47 blocks

See all

Job Timeline 1 – Role, team and contract history

Kudos 1 – Recognition feed with a compose box

Headcount by Department 1 – Sortable department table with hub map

Team Pulse 1 – Engagement heatmap with insight and action plan

Benefit Plans 1 – Plan cards with price, features and an action

Timesheet 1 – Week of clock-ins with a day timeline and approvals

Performance Reviews Table 1 – Review cycle data table

Projects Table 1 – Project portfolio data table

Team Absences 1 – Monthly leave timeline per person

Org Chart 1 – Reporting lines across three levels

New Hires Table 1 – Joiners with onboarding progress

Employee Spotlight 1 – Featured person with a nomination quote

Leave Requests Table 1 – Leave history data table

Current Project 1 – Project summary with milestones and task stats

Coverage Planner 1 – Weekly staffing against daily demand

Benefits Table 1 – Enrolled benefits data table

Day-one Setup 1 – Workflow run with a blocked step

Course Progress 1 – Completion ring with next lesson

Employee Rating 1 – Peer rating ring with verdict

Leave Balances 1 – Days left per leave type

Time Off Summary 1 – Allowance meter with recent requests

HR Dashboard 1 – Complete HR app with 14 screens

Calendar 1 – Week, day and month calendar with event details

People Directory 1 – Profile cards with team and location

About shadcncraft

309 blocks · 6 free · 303 paid · updated 20 Oct 2026

shadcncraft.com

shadcncraft is a shadcn/ui design system sold in two matched halves, Figma UI kits and a React registry, kept one-to-one so a Figma layer name matches the data-slot value in code. It's made by Hamish O'Neill, who built design systems for large product teams before starting it. The blocks cover marketing sections (heroes, benefits, metrics, testimonials, pricing, banners), application screens (app shells, sidebars, tables, calendars, kanban, and finance, HR and sales dashboards), ecommerce pages from product lists to checkout, and a few AI layouts.

Every item comes in Radix UI and Base UI builds across all eight shadcn styles, with color themes and five icon libraries to swap between. Agent skills, a Figma plugin and MCP support connect it to Claude Code, Cursor and Codex. A small free tier installs without a key, and the Pro tiers are one-time purchases licensed per seat.