Angular

Docs

Angular

Install and configure Angular.

Create project

Start by creating a new App using the Angular CLI.

ng new my-app

Add Tailwind and its configuration

Install tailwindcss and its peer dependencies, then generate your tailwind.config.js file:

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init

Edit tsconfig.json file

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/*": ["./src/*"]
        }
    }
}

Run the CLI

Run the shadcn-ng init command to setup your project:

npx shadcn-ng@latest init

Configure components.json

You will be asked a few questions to configure components.json:

Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › src/style.css
Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils

That’s it

You can now start adding components to your project.

npx shadcn-ui@latest add button

The command above will add the Button component to your project. You can then import it like this:

import { Component } from "@angular/core";
import { UbButtonDirective } from "@/components/ui/button.directive";

@Component({
    standalone: true,
    imports: [UbButtonDirective],
    template: `<button ubButton>Button</button>`,
})
export class ButtonDemoComponent {}

Typography Accordion