Installation

Getting started with Emon Blocks is straightforward! Since our UI blocks are built with Shadcn UI and utilize the Shadcn Registry, the installation process closely follows their recommended setup.

Prerequisites

Before you begin, ensure you have the following installed:

Node.js: It's recommended to use the LTS version.
npm or Yarn: Node.js typically comes with npm. You can install Yarn globally if you prefer: npm install -g yarn.

1. Initialize your project

If you don't already have a project set up, you can start a new Next.js project (or your preferred React framework) using your package manager:

# Using npm
npx create-next-app my-emon-blocks-app

# Using yarn
yarn create next-app my-emon-blocks-app

Navigate into your new project directory:

cd my-emon-blocks-app

2. Install Shadcn UI

Emon Blocks are built on top of Shadcn UI. You'll need to set up Shadcn UI in your project first. This command will guide you through the configuration:

npx shadcn-ui@latest init

3. Add your first Emon Block

Once Shadcn UI is initialized, you can start adding Emon Blocks. While we don't have a dedicated emon-blocks add command (yet!), you'll typically copy the code for the block directly from our website. Each block on Emon Blocks will provide clear instructions and the necessary code snippets. Like:

npx shadcn-ui@latest add https://emonui.vercel.app/r/hero-1.json