Add a Block

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

We aim to build a collection of ready-to-use, beautifully animated, and well-styled components that developers can copy-paste seamlessly into their projects. Your contributions help make this project even better!

Setup your workspace

Fork the repository

git clone https://github.com/subhadeeproy3902/mvpblocks.git

Create a new branch

git checkout -b username/my-new-block

Install dependencies

npm install

Start the dev server

npm run 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

If you are creating a new block of a new category, create a new folder in components/mvpblocks with the name of your category. For example, mainsections.
If you are creating a new block in an existing category, create a new folder in components/mvpblocks/[category] with the name of your block. For example, hero-1.

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.

your-block.tsx

button.tsx

tabs.tsx

dialog.tsx

useYourHook.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.

registry/registry-blocks.tsx

export const blocks = [
  // ...
  {
    name: "hero-1",
    author: "subhadeeproy3902", // Your GitHub username
    type: "registry:block",
    dependencies: ["lucide-react"], // List of dependencies to install
    registryDependencies: [`${siteLink}/r/header.json`], // List of registry dependencies to make your block work
    files: [
      {
        path: "@/components/mvpblocks/mainsections/hero-1.tsx", // Path to your block file
        type: "registry:block",
      },
    ],
    component: React.lazy(
      () => import("../components/mvpblocks/mainsections/hero-1"), // Lazy path to your block component
    ),
  }
];

Note: If you are using ui or hooks or utils/lib, make sure to add them in registry-ui.ts or registry-hooks.ts or registry-lib.ts respectively. Main block path should be @/components/mvpblocks/[category]/[block].tsx.

Make sure you add a name, description, type, registryDependencies, dependencies, files correctly.

Run the build script

npm run build:registry

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:3000/docs/[blockpath] or a full screen preview at http://localhost:3000/preview/[blockname].

Build your block

You can now build your block by editing the files in the block folder and viewing the changes in the browser.

If you add more files, make sure to add them to the files array in the block definition.

Publish your block

Once you're ready to publish your block, you can submit a pull request to the main repository.

Run the build script

npm run build:registry

The following properties are required for the block definition: name, description, type, files.
Make sure to list all registry dependencies in registryDependencies. A registry dependency is the path of the component in the registry eg. https://blocks.mvp-subha.me/r/globe.json.
Make sure to list all dependencies in dependencies. A dependency is the name of the package in the registry eg. zod, sonner, etc.

Add a Block

Setup your workspace

Fork the repository

Create a new branch

Install dependencies

Start the dev server

Add a block

Create a new block

Add your block files

Add your block to the registry

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

Run the build script

View your block

Build your block

Publish your block

Run the build script

Capture a screenshot

Submit a pull request

Guidelines

On this page

Contribute