7Ovr

Install shadcn/ui blocks.

Pick the Free or Pro guide. Start with Free if you are not sure yet.

Before you start

Your project needs React, Tailwind CSS v4 and shadcn/ui on Base UI. Blocks use Base UI APIs such as render, so a Radix-based project has to migrate its components first; editing components.json alone is not enough.

Run commands from the folder that contains components.json (in a monorepo, the app's folder). If shadcn/ui is not set up yet, initialize it and pick a Base UI style:

Terminal

pnpm dlx shadcn@latest init

Free blocks

Use Free for personal, commercial and client projects. If it covers what you need, there is no reason to buy Pro.

Most projects only need the CLI steps below. Using MCP with a coding agent? See Use with a coding agent.

1. Install a block

Copy the command from any Free block preview, or try this one. No registry setup is needed: the CLI finds @7ovr through the shadcn registry directory⁠ (opens in a new tab):

Terminal

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

The CLI installs the dependencies and writes the source to components/blocks/hero-1.tsx.

2. Render the block

Import it into a page. In the Next.js App Router with the default aliases:

app/page.tsx (example)

import HeroBlock from "@/components/blocks/hero-1"

export default function Page() {
  return <HeroBlock />
}

Adjust the import to your paths, then start your dev server and open the page. Installing only copies the source; it does not add the block to a page for you.

3. Install a page (optional)

A template is a complete page rather than one section. It installs the page and every section it uses as source in your repo:

Terminal

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

The page goes to components/saas-landing/page.tsx, with each section beside it. In Next.js, React Router and Laravel projects the CLI also adds a route (app/saas-landing/page.tsx in the App Router); in Vite or another React app, render the page from your router. Everything is a copy you own.

4. Next steps

Browse the blocks catalog. To match your theme, fonts, radius and icon library, build a preset in the Customize panel and apply it with shadcn apply --preset.

Free blocks are MIT-0: use them in personal, commercial and client work with no attribution. Check each block's dependencies and adapt anything framework-specific.

Check your setup

This reads a Free registry item without writing any files:

Terminal

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

Use with a coding agent (optional)

Skip this if you install with the CLI. These let your coding agent find and install Free blocks for you.

Configure MCP

So MCP can find the Free registry, add this entry to your components.json, keeping your other settings:

components.json

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

For Pro, follow the Pro blocks guide and let your agent run the CLI; Pro is not searchable over MCP.

Connect the MCP server

Pick your coding agent and run its setup command from the same folder. Your agent can then find Free blocks and get their install commands.

Terminal

pnpm dlx shadcn@latest mcp init --client claude

Writes the server config to .mcp.json. Restart the agent, then describe the block you want.

Add the shadcn skill

Gives your coding agent guidance on your shadcn setup and Base UI. Install it and pick your agent when asked:

Terminal

pnpm dlx skills add shadcn/ui

It needs no MCP and does not unlock Pro. For Pro, set up your license key first, then let the agent run the CLI from that folder; keep the key out of prompts and logs. See the skill documentation⁠ (opens in a new tab).

Search from the CLI

You or your agent can search Free items and read their descriptions, dependencies and source:

Terminal

pnpm dlx shadcn@latest search @7ovr -q "pricing"
pnpm dlx shadcn@latest view @7ovr/pricing-1