shadcn/ui monorepo template

This is a template that uses Turbo Repo as a Mono Repo. Tailwind CSS v.4.0.1. Shadcn UI.

It also includes ESLint and Prettier configuration.

Package Manager

Package manager used for this template is PNPM.

You can use the following command to install the required dependencies:

pnpm install

Tasks

The following tasks are included with Turbo Repo, they can be used with the package manager PNPM.

clean

Cleans all the unnecessary folders that are not needed for pushing remote.

pnpm run clean

format

Uses Prettier to format all the files of the project following the rules from ./config/prettier/base.js and ignores files from ./.gitignore and ./.prettierignore

pnpm run format

lint

Uses ESLint to lint most of the files of the project following the rules from ./config/eslint/base.js.

pnpm run lint

build

Uses Next.js to build the client project.

pnpm run build

dev

Uses Next.js to run the development project.

pnpm run dev

Installing a component

You can install a component using Shadcn UI by following the next commands:

Enter ./packages/ui/ with the command.

cd ./packages/ui/

Install the package you desire from Shadcn UI:

npx shadcn@latest add component

Tailwind CSS

Tailwind CSS v.4.0.1 is in the latest version 4.0.1. You can find all the configuration in ./config/tailwind/.

The file globals.css is based on the file from this file.

Using components

To use the components in your app, import them from the ui package.

import Button from "@workspace/ui/components/ui/button";

You can also create your own component and later export it like the example of Basic Date Picker. Then import it in your application as normal page.tsx.

import DatePicker from "@workspace/ui/components/ui/basic-date-picker";