Next.js

Install and configure Next.js

Create next.js

Run the command to create a new Next.js project:

npx create-next-app@latest

Configure project

You will be asked a few questions to configure project:

√ What is your project named? ... test
√ Would you like to use TypeScript? ... No / `Yes`
√ Would you like to use ESLint? ... No / `Yes`
√ Would you like to use Tailwind CSS? ... No / `Yes`       
√ Would you like your code inside a `src/` directory? ... No / `Yes`
√ Would you like to use App Router? (recommended) ... No / `Yes`
√ Would you like to use Turbopack for `next dev`? ... No / `Yes`
√ Would you like to customize the import alias (`@/*` by default)? ... `No` / Yes

Now run this cli

You can now start adding components to your project.

npx shadcn@latest add https://shadwui.com/button.json

Configure components.json

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

You need to create a components.json file to add components. Proceed? ... yes
Which color would you like to use as the base color? » Neutral
Writing components.json.

That's it

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

import { Button } from "@/components/shadwui/button"
 
export default function Home() {
  return (
    <div> 
      <Button>Click me <Button>
    </div>
  )
}

Now You can add the desired components

Auth

Blocks

Components