HomeGetting Started

Getting Started

Install production-ready UI blocks into your React project using the shadcn CLI.

Project Setup

Choose your framework and follow the setup steps.

Create a Next.js project

bunx create-next-app@latest my-app --typescript --tailwind --eslint --app --src-dir

Skip this if you already have a project.

Initialize shadcn/ui

cd my-app && bunx shadcn@latest init

Add the @jmcodes registry to components.json

{
  "registries": {
    "@jmcodes": {
      "url": "https://blocks.jmcodes.tech/api/registry/{name}"
    }
  }
}

Add path aliases to tsconfig.json

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
      "@jmcodes/*": ["./lib/jmcodes/*"],
      "@jmcodes/data/*": ["./lib/jmcodes/data/*"]
    }
  }
}

Installation

Each block page shows an install command. Copy it and run in your project directory.

Install command

bunx shadcn add @jmcodes/blocks/admin/dashboard

Project Structure

Blocks are installed to lib/jmcodes/ and use the @jmcodes alias.

@jmcodes/blocks/*Block files (lib/jmcodes/blocks/)

@jmcodes/components/*Shared components (lib/jmcodes/components/)

@jmcodes/data/*Data/queries (lib/jmcodes/data/)

@/components/ui/*shadcn primitives (Button, Card, etc.)

@/lib/*Utilities (cn, etc.)

Missing shadcn primitives are installed automatically by the CLI.

Quick Start

Browse the blocks

Use the sidebar to explore available blocks. Each block has a live preview and the full source code.

Copy the install command

Each block page shows the CLI command at the top. Click to copy.

Run in your project

The CLI installs the block and all dependencies. Import and use immediately.

Next Steps

Theme Builder

Create a custom theme with perceptually balanced colors

Enter License Key

Unlock full source code access

Get Complete Platform

Every bundle, every block