@nx-extend/shadcn-ui

Nx plugin for working with shadcn/ui.

Features

• Add shadcn/ui components to your Nx workspace
• Automatic setup of UI library and utilities
• Tailwind CSS integration
• Theme customization support
• Add individual or all components at once

Setup

Install

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

Configure Tailwind

After installation, update your app's tailwind.config.ts to:

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

export default buildConfig(__dirname)

Remix Integration

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

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

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

Usage

Add Component

Add a single component to your UI library:

nx add-component <ui lib name> button

Add All Components

Add all available shadcn/ui 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

Available Components

shadcn/ui provides a wide range of beautifully designed components including:

• Buttons, inputs, and forms
• Cards, dialogs, and modals
• Dropdowns and menus
• Navigation components
• Data tables
• And many more

Visit https://ui.shadcn.com/docs/components for the full list of available components.