https://github.com/patrickvaler/nx-next-shadcn-ui-starter

Starter repository for integrating shadcn/ui with Next.js in an Nx monorepo
https://github.com/patrickvaler/nx-next-shadcn-ui-starter

Last synced: 17 days ago
JSON representation

Starter repository for integrating shadcn/ui with Next.js in an Nx monorepo

• Host: GitHub
• URL: https://github.com/patrickvaler/nx-next-shadcn-ui-starter
• Owner: patrickvaler
• Created: 2023-11-14T22:31:39.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-06-06T07:55:11.000Z (5 months ago)
• Last Synced: 2024-10-10T06:43:55.443Z (28 days ago)
• Language: TypeScript
• Homepage: https://blog.patrickvaler.ch/how-to-get-started-with-shadcn-ui-and-next-js-within-a-nx-monorepo-57908f48b4ef
• Size: 618 KB
• Stars: 19
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# nx-next-shadcn-ui-starter

This is a starter repository for integrating [shadcn/ui](https://github.com/shadcn/ui) with [Next.js](https://nextjs.org/) in an [Nx](https://nx.dev/) monorepo.

Detailed instructions for configuring and setting up this repository can be found in a tutorial on [Medium.com](https://medium.com/@patrickvaler/how-to-get-started-with-shadcn-ui-and-next-js-within-a-nx-monorepo-57908f48b4ef). Explore the tutorial for comprehensive insights into the repository's setup, ensuring a smooth and informed integration process.

## Features

- Shared library based on `shadcn/ui` components integrated in Next.js app

- Monorepo structure using Nx for better organization and scalability

## Getting Started

### Prerequisites

Make sure you have Node.js and npm installed on your machine.

### Installation

1. Clone this repository:

   ```bash

   git clone https://github.com/patrickvaler/nx-next-shadcn-ui-starter.git

   ```

2. Install npm dependencies

   ```bash

   npm install

   ```

### Run application

```bash

npm start

```

## Add shadcn/ui components

`shadcn/ui` offers a cli to generate ui components.

Use the `add` command to add components and dependencies to your project:

```bash

npx shadcn-ui@latest add [component]

```

You will be presented with a list of components to choose from:

```bash

Which components would you like to add? › Space to select. A to toggle all.

Enter to submit.

◯  accordion

◯  alert

◯  alert-dialog

◯  aspect-ratio

◯  avatar

◯  badge

◯  button

◯  calendar

◯  card

◯  checkbox

```

Check the `shadcn/ui` [cli docs](https://ui.shadcn.com/docs/cli) for further information.