https://github.com/brunos3d/shadcn-ui-nx-next

This is a sample project that demonstrates how to use shadcn/ui with Nx and Next.js.
https://github.com/brunos3d/shadcn-ui-nx-next

css demo example fonts monorepo next nx react setup shadcn tailwind template ui

Last synced: 4 days ago
JSON representation

This is a sample project that demonstrates how to use shadcn/ui with Nx and Next.js.

• Host: GitHub
• URL: https://github.com/brunos3d/shadcn-ui-nx-next
• Owner: brunos3d
• Created: 2024-01-30T15:34:18.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-05-20T15:18:45.000Z (6 months ago)
• Last Synced: 2024-05-20T18:07:21.494Z (6 months ago)
• Topics: css, demo, example, fonts, monorepo, next, nx, react, setup, shadcn, tailwind, template, ui
• Language: TypeScript
• Homepage: https://shadcn-ui-nx-next.vercel.app/
• Size: 196 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# shadcn/ui + Nx + Next.js

This is a sample project that demonstrates how to use [shadcn/ui](https://ui.shadcn.com/) with [Nx](https://nx.dev/) and [Next.js](https://nextjs.org/).

# Running this project locally

```bash

npx nx serve next-app

```

# Manual setup steps

Commands to generate the project:

```bash

npx create-nx-workspace@latest workspacename

cd workspacename

npm i -D @nx/next @nx/react

nx g @nx/next:app next-app # use "tailwind" as style options

nx g @nx/react:library shadcn-ui # none for all options

nx g @nx/next:setup-tailwind --project=next-app

npm i tailwindcss-animate class-variance-authority clsx tailwind-merge

nx g @nx/next:setup-tailwind --project=next-app

npm i lucide-react

```

Copy the following files from this repo to your project:

- [`components.json`](https://github.com/brunos3d/shadcn-ui-nx-next/blob/main/components.json)

- [`tsconfig.json`](https://github.com/brunos3d/shadcn-ui-nx-next/blob/main/tsconfig.json)

- [`tsconfig.base.json`](https://github.com/brunos3d/shadcn-ui-nx-next/blob/main/tsconfig.base.json)

- [`apps/next-app/tailwind.config.js`](https://github.com/brunos3d/shadcn-ui-nx-next/blob/main/apps/next-app/tailwind.config.js)

# Installing new shadcn/ui components

After following the installation steps above, installing [shadcn/ui components](https://ui.shadcn.com/docs/components) is a simple task and requires the following steps

```bash

npx shadcn-ui@latest add  # e.g button

```

Add/Export the new component to `libs/shadcn-ui/src/index.ts`

```bash

export * from './components/ui/command';

```

Now, you're able to use your component on your Nx Project

```bash

import { Button } from '@libs/shadcn-ui';

```