170+ Shadcn UI Blocks & Free Templates for React/Next.js – 7Ovr

7Ovr is a shadcn/ui block registry for React that adds marketing sections, application screens, and complete page layouts to an existing project through the shadcn CLI. Its 170 blocks cover 52 categories, including landing pages, dashboards, authentication flows, data tables, billing screens, calendars, and AI chat interfaces.

Each block installs as editable source code inside the project and uses Tailwind CSS v4, Base UI primitives, RemixIcon, and shared CSS variables. Install an individual section for an existing page, or start with one of the included SaaS landing, startup, and dashboard templates.

Features

• Install blocks individually through the shadcn CLI.
• Every block installs as plain React and TypeScript files.
• Built on Base UI for keyboard navigation, focus management, and ARIA attributes.
• RemixIcon included; swap to Lucide, Tabler, or Phosphor via find-and-replace.
• Theming through CSS variables: change a few tokens to restyle the entire library.
• Light and dark mode designed for every block.
• Marketing sections (heroes, pricing, FAQs, testimonials) and app interfaces (data tables, sidebars, auth, charts).

Available Blocks

Marketing Blocks

Application Blocks

Use Cases

• Assemble a SaaS homepage from header, hero, social proof, feature, pricing, FAQ, and footer sections. Every section remains available for local edits.
• Build a logged-in product area with an app shell, command palette, dashboard cards, charts, paginated tables, billing screens, and settings pages.
• Cover account setup from sign-in and onboarding through profile management, notifications, status displays, and empty states.
• Prepare editorial and company pages with article layouts, changelogs, roadmaps, careers sections, team grids, and timelines.
• Prototype an AI product interface with chat layouts, file upload controls, search, command navigation, and account billing screens.

How To Use 7Ovr

Initialize shadcn/ui

Run the shadcn initializer in an existing React project that does not yet have a components.json file:

pnpm dlx shadcn@latest init

Add the 7Ovr Registry

Merge the registries entry into components.json. Keep the existing style, aliases, Tailwind, and component path settings.

{
  "registries": {
    "@7ovr": "https://7ovr.com/r/{name}.json"
  }
}

Basic Usage: Install a Hero Block

Add a hero section with its registry name:

pnpm dlx shadcn@latest add @7ovr/hero-1

For this item, the CLI reports a generated components/hero-block.tsx file. Open the installed file to confirm its export name, imported shadcn components, icon package, and local text before adding it to a route.

Add a Complete Page Template

The full-page templates use the same registry workflow:

pnpm dlx shadcn@latest add @7ovr/saas-landing
pnpm dlx shadcn@latest add @7ovr/startup
pnpm dlx shadcn@latest add @7ovr/dashboard

Check the Next.js Client Boundary

Review each installed block before adding "use client". Static layout sections remain Server Components. State, event handlers, effects, custom client hooks, and browser APIs require a Client Component boundary in the App Router.

Configure MCP Access

The shadcn MCP server reads namespaced registries from components.json. Initialize it from the project directory:

pnpm dlx shadcn@latest mcp init

Select the editor or coding client during setup. The configured client then searches and installs registry items through the shadcn MCP tools.

Customization Notes

Edit the Installed Source

7Ovr does not wrap blocks in a separate runtime component package. Change the generated React structure, Tailwind classes, copy, data, and interaction code inside the project files. Keep local modifications under version control.

Update the Theme Tokens

The blocks resolve colors through the project’s CSS variables. Start with --primary, --secondary, --accent, --muted, and --brand, then inspect block-specific classes for gradients, borders, chart colors, or surface treatments.

Review Dependencies Per Block

Dependencies vary across the catalog. Hero blocks use shadcn components such as Badge, Button, Dialog, Input, Label, Separator, and Sonner, with @remixicon/react for icons. Interactive data table blocks add @tanstack/react-table. Check the item preview and generated imports before moving files between projects.

Replace the Icon Set Locally

RemixIcon ships with the blocks. Replace those imports and icon components with Lucide, Tabler, Phosphor, or the icon package already used by the application.

Alternatives and Related Resources

• 200+ Extended UI Components & Blocks for shadcn/ui – Shadcn Space
• Modern Accessible shadcn/ui Blocks for Next.js & React
• 200+ Free Copy-Paste UI Components – shadcn.io
• Copy-Paste UI Components with Theme Customization – shadcn/studio

FAQs

Q: Do I need shadcn/ui before installing a 7Ovr block?
A: Yes. Run pnpm dlx shadcn@latest init first when the project has no shadcn configuration. The CLI uses components.json to resolve aliases, styles, paths, and registry namespaces.

Q: Does 7Ovr work with the Next.js App Router?
A: The blocks install as React source and 7Ovr lists Next.js among the supported stacks. Keep static sections on the server. Place interactive blocks behind a Client Component boundary when they use state, event handlers, effects, or browser APIs.

Q: Why do generated imports point to the wrong folder?
A: Check the aliases and component paths in components.json. The shadcn CLI reads that file when it generates project-specific imports and file targets.

Q: Are 7Ovr blocks free for commercial projects?
A: Yes. The blocks use the MIT License and permit personal, commercial, and client work across unlimited projects.