Installation

Works in Angular 22+ apps and Next.js App Router apps (React 19+). The CLI detects which one you have.

1. Set up

npx nuecrea-ui init

• Installs @nuecrea/core (tokens and styles), plus @nuecrea/angular-primitives and @angular/cdk for Angular, or @base-ui/react for Next.js. Uses your package manager; skips what you already have.
• Installs Tailwind CSS v4 if the app has no Tailwind yet. An existing setup is left alone.
• Adds @import '@nuecrea/core/tokens.css'; after the Tailwind import in your global stylesheet.
• Writes nuecrea.json: components go to src/app/ui (Angular) or components/ui (Next.js). Edit it to change the folder.

2. Add components

npx nuecrea-ui add dialog

Copies the component into your app, with anything it needs (Angular's Dialog brings Button). The files are yours to edit; running add again keeps your changes unless you pass --overwrite.

3. Use them

Next.js

import { Button } from '@/components/ui/button';
import * as Dialog from '@/components/ui/dialog';

<Dialog.Root>
  <Dialog.Trigger render={<Button />}>Open</Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Backdrop />
    <Dialog.Viewport>
      <Dialog.Popup>
        <Dialog.Title>Title</Dialog.Title>
        <Dialog.Close render={<Button variant="outline" />}>Close</Dialog.Close>
      </Dialog.Popup>
    </Dialog.Viewport>
  </Dialog.Portal>
</Dialog.Root>

Angular

import { Dialog } from './ui/dialog';

@Component({
  imports: [Dialog],
  template: `
    <ng-container libDialogRoot>
      <button libButton libDialogTrigger>Open</button>
      <ng-template libDialogPortal>
        <div libDialogBackdrop></div>
        <div libDialogViewport>
          <div libDialogPopup>
            <h2 libDialogTitle>Title</h2>
            <button libButton variant="outline" libDialogClose>Close</button>
          </div>
        </div>
      </ng-template>
    </ng-container>
  `,
})

CLI reference