Installation Guide

Integrate ogBlocks directly into your project. Premium components require license key otherwise you can just copy-paste components from the website.

Prerequisites

ogBlocks animated components rely on motion and react-icons. Make sure you install the latest versions.

npm install motion react-icons

ogBlocks uses the shadcn registry to deliver components so you'll need to install it

npx shadcn@latest init

3. Add Registry Configuration

Update your components.json file to include the ogBlocks registry.

"registries": {
  "@ogblocks": {
    "url": "https://ogblocks.dev/api/r/{name}.json",
    "headers": {
      "Authorization": "Bearer ${OGBLOCKS_LICENSE_KEY}"
    }
  }
}

4. Install Components

Now you can now seamlessly add any premium component into your project

npx shadcn@latest add @ogblocks/your-component-name