Next.js Installation

Install and configure Next.js.

Create Project

Run the init command to create a new Next.js project or to setup an existing one:


pnpm dlx radianui@latest init --next

Configure components.json

You will be asked a few questions to configure components.json:

Terminal

√ No package.json found at C:\\Users\\RadianOS\\Projects. Create a new project? ... yes
√ What would you like to name your project? ... my-app
√ Would you like to use /src directory? ... yes
√ Which color would you like to use as your brand color? » Dark Orchid
√ Which font would you like to use for your project? » Inter - Inter Display (Default)
✔ Creating a new Next.js project. This might take some time.
✔ Writing components.json file
✔ Setting up project configuration
✔ Installing dependencies
✔ Updating global CSS variables
 
Success! Project initialization completed. You may now add components.

Add Components

You can now start adding components to your project.


pnpm dlx radianui@latest add button

The command above will add the Button component to your project. You can then include it like this:

app.tsx

import { Button } from "@/components/ui/Button"
 
export default function App() {
  return (
    <div>
        <Button variant="strong"/>
            Button
        </Button>
    </div>
  )
}