Docs

Getting started

The first thing you need to do is download the UI Kits, which you can find on the block’s page. Inside the UI Kits, you’ll find a variety of components to help you build your application, including fonts, CSS, hooks, and more.

Required packages

The UI Kits are built with React Aria components, so you’ll need to install them first. Additional packages may be required depending on the components you use:

• tailwindcss (Guide on official documentation)
• react-aria-components (required)
• tailwindcss-react-aria-components (required)
• tw-animate-css (required)
• tw-merge (required)
• sonner (only for toast components)
• embla-carousel-react (for carousel components)
• embla-carousel-autoplay (for autoplay if you need autoplay carousel)
• motion (only if motion effects are used)
• recharts (for charts)
• marked (for AI section)

You can install these packages using npm or yarn.

shadcn CLI

Copying files manually works, but it quickly becomes repetitive. Thanks to shadcn, the CLI makes it easy to install and manage components efficiently.

Get your token

Before you can use the CLI, you’ll need an access token. This token authenticates your access to the registry.

You can create and manage tokens in your account settings. If you don’t have an account, you can sign up here. The token menu is available only to Pro accounts. If you haven’t upgraded yet, you can purchase access here.

To create a token, enter a name (for example, Project A) and click Create. A modal will appear with your new token.

.env

Once you have your token, add it to your .env file. This keeps the token secure and ensures it isn’t exposed in your codebase.

components.json

Next, register your namespace in components.json.

For a full configuration, you can start with this template and adjust it to your project’s needs:

Start adding

You can add almost anything such as libraries, hooks, components, or blocks. Just make sure you understand how to properly add what you need.

For example, if you want to add a dashboard block like Dashboard 01, run this command:

Once everything is set up, it will be added to your project.

To add just a component, run:

To add just a hook, run:

To add just a library, run:

To add all components, run:

Icons

For the icons used in all components, I'm using Heroicons. I didn’t use Intent UI Icons because I wanted something new. I've used them for over 7 years, even before Intent UI existed.

You might ask, can i still use intent ui icons? yes, you can. but you'll need to replace all icons in the ui kits with intent ui icons manually, which can be a bit of a hassle.

Starter kit

To be honest, you can use anything as long as it's based on TypeScript, React, and Tailwind CSS.

I’ve created a starter kit that you can use to get started quickly. It includes all the necessary dependencies and configurations, so you can simply copy the UI Kits you downloaded into the project.

Getting started

Open your terminal and run:

Add your first block

Before continuing, make sure you’ve set up the .env file. This prevents issues when adding blocks.

After that, start the development server:

Finally, open http://localhost:3000/single-page/01 in your browser to see the result. This path is only an example, it will change depending on the block you added.

use client

You might notice that some components have "use client" at the top, while others don’t. That’s simply because I sometimes forget to include it, since I’m using Vite as the build tool, which doesn’t require "use client". But if you’re using Next.js, you’ll need to add "use client" to any file that uses hooks or other client-side features.

But for the UI kits, I'm sure that everything works perfectly fine with Next.js.

You're ready to go!

Now that you have the UI Kits and the starter kit, you can start building your application. The UI Kits give you a solid foundation, and the starter kit gives you a head start. Thanks for purchasing, and I hope you find it useful.