Blocks

Contribute components to the blocks library.

We are inviting the community to contribute to the blocks library. Share your components and blocks with other developers and help build a library of high-quality, reusable components.

We'd love to see all types of blocks: applications, marketing, products, and more.

Setup your workspace

Fork the repository

git clone https://github.com/shadcn-ui/ui.git

Create a new branch

git checkout -b username/my-new-block

Install dependencies

pnpm install

Start the dev server

pnpm www:dev

Add a block

A block can be a single component (eg. a variation of a ui component) or a complex component (eg. a dashboard) with multiple components, hooks, and utils.

Create a new block

Create a new folder in the apps/www/registry/new-york/blocks directory. Make sure the folder is named in kebab-case and under new-york.

apps
└── www
    └── registry
        └── new-york
            └── blocks
                └── dashboard-01

Note: The build script will take care of building the block for the default style.

Add your block files

Add your files to the block folder. Here is an example of a block with a page, components, hooks, and utils.

dashboard-01
└── page.tsx
└── components
    └── hello-world.tsx
    └── example-card.tsx
└── hooks
    └── use-hello-world.ts
└── lib
    └── format-date.ts

Note: You can start with one file and add more files later.

Add your block to the registry

Add your block definition to `registry-blocks.tsx`

To add your block to the registry, you need to add your block definition to registry-blocks.ts.

This follows the registry schema at https://ui.shadcn.com/schema/registry-item.json.

apps/www/registry/registry-blocks.tsx

export const blocks = [
  // ...
  {
    name: "dashboard-01",
    author: "shadcn (https://ui.shadcn.com)",
    title: "Dashboard",
    description: "A simple dashboard with a hello world component.",
    type: "registry:block",
    registryDependencies: ["input", "button", "card"],
    dependencies: ["zod"],
    files: [
      {
        path: "blocks/dashboard-01/page.tsx",
        type: "registry:page",
        target: "app/dashboard/page.tsx",
      },
      {
        path: "blocks/dashboard-01/components/hello-world.tsx",
        type: "registry:component",
      },
      {
        path: "blocks/dashboard-01/components/example-card.tsx",
        type: "registry:component",
      },
      {
        path: "blocks/dashboard-01/hooks/use-hello-world.ts",
        type: "registry:hook",
      },
      {
        path: "blocks/dashboard-01/lib/format-date.ts",
        type: "registry:lib",
      },
    ],
    categories: ["dashboard"],
  },
]

Make sure you add a name, description, type, registryDependencies, dependencies, files, and categories. We'll go over each of these in more detail in the schema docs (coming soon).

Run the build script

pnpm registry:build

Note: you do not need to run this script for every change. You only need to run it when you update the block definition.

View your block

Once the build script is finished, you can view your block at http://localhost:3333/blocks/[CATEGORY] or a full screen preview at http://localhost:3333/view/styles/new-york/dashboard-01.