@nx-extend/shadcn-ui

Nx plugin for working with shadcn/ui.

Setup

Install

npm install -D @nx-extend/shadcn-ui
nx g @nx-extend/shadcn-ui:init

After installation update your APPs tailwind.config.ts to this:

import { buildConfig } from '../libs/<lib directory>/src/tailwind.config'

export default buildConfig(__dirname)

If you are using Remix you can import global.css directly like:

import stylesheet from '@<scope>/<utils lib name>/global.css'

export const links: LinksFunction = () => [
  { rel: 'stylesheet', href: stylesheet }
]

Usage

Add

nx add-component <ui lib name> button

All all components

nx add-component <ui lib name>

Updating the theme

The generated global.css uses the default shadcn/ui theme. Using the shadcn/ui theme editor, you can effortlessly apply a different theme. Explore available themes here: https://ui.shadcn.com/themes