lib
Browse blocks
@lib

Installation

Set up the registry once. After that, every block and component installs with one command, with the files it needs.

Get started

What your project needs

React 19, Tailwind CSS v4 and shadcn/ui on Radix. That covers Next.js, Vite, React Router, TanStack Start, Astro with the React integration (add client:load to interactive blocks) and Laravel with the React starter kit. Projects still on React 18, such as Remix v2 or Gatsby, are not supported.

  1. 1

    Set up shadcn/ui

    Skip this if your project already has a components.json file.

    Terminal
    npx shadcn@latest init
  2. 2

    Add the registry

    This tells the CLI where to find @lib items, including the ones that blocks depend on.

    Terminal
    npx shadcn@latest registry add @lib=https://shadcn.srv1505958.hstgr.cloud/r/{name}.json

    Or add it to the file yourself:

    components.json
    {
  "registries": {
    "@lib": "https://shadcn.srv1505958.hstgr.cloud/r/{name}.json"
  }
}
  3. 3

    Add components and blocks

    The CLI copies the files into your project and installs what they need.

    Terminal
    npx shadcn@latest add @lib/stat-card

Pro blocksPro

Pro is a one-time payment: your key never expires and keeps unlocking every update and new block. Pro items are served only with a license key linked to your account: sign in and copy it from your account page. Put the key in your project's .env.local, then send it from components.json. The CLI reads the variable when it installs a block, so the key never lands in your code.

.env.local
LIB_LICENSE_KEY=your-license-key
components.json
{
  "registries": {
    "@lib": {
      "url": "https://shadcn.srv1505958.hstgr.cloud/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${LIB_LICENSE_KEY}"
      }
    }
  }
}

Use this entry in place of the one from step 2: it installs free and Pro items alike. Projects without a key keep the entry from step 2, which installs free items only.

Use it from your AI assistant

Connect the MCP server and ask for what you need, like “add a pricing section with a yearly toggle”. Your assistant searches the blocks and components, reads their code and installs them with the CLI. Add your license key to the connection to include Pro items; your account page shows the same setup with your key filled in.

Terminal
claude mcp add --transport http lib https://shadcn.srv1505958.hstgr.cloud/mcp --header "Authorization: Bearer your-license-key"

Leave the header out to browse and install free items only.

ToolWhat your assistant gets
search_itemsFind blocks and components by words, category, type or tier.
get_itemAn item's code, version, dependencies, recent changes and install command.
check_updatesWhich of your installed items have a newer version, and what changed since yours.
get_changelogRecent releases: new, updated, fixed and removed items with their versions.
list_categoriesEvery block category with its number of blocks.
get_accessWhether your connection unlocks Pro blocks, and what Pro costs.
get_setupThe components.json entry for free and Pro items.

Keep your blocks up to date

Every block and component has a version, and every change is in the changelog. The first line of each installed file says what you have:

components/pricing-01.tsx
// @lib/pricing-01@1.2.0 · changes: https://shadcn.srv1505958.hstgr.cloud/changelog
import { Check } from "lucide-react"

With the MCP connected, ask your assistant to “check my @lib blocks for updates”. It reads those lines, calls check_updates and tells you which items are behind, what changed in each version, and how to update. Updating replaces the file, so it carries your own edits over after reading the changes.