Base UI — Premium Angular Component Library

A comprehensive Tailwind component ecosystem built for modern Angular with 75+ components, 250+ icons, 10 layout pages, and production-ready building blocks.

📚 Documentation & Previews: Check out base-ui.net for full documentation, interactive previews, and to explore all components!

🚀 Quick Start (Free Tier)

Base UI provides a generous Free Tier of over 30+ essential components (like buttons, cards, dialogs, inputs, etc.) and 10+ blocks forms that you can use immediately without any account or license!

1. Initialize the CLI

Run the init command to configure your project for Base UI components:

npx base-ui init

2. Add Components

Use the CLI to add specific free components directly into your project:

npx base-ui add button
npx base-ui add card
npx base-ui add dialog

5. Import in Your Angular App

All components are standalone, so you import each component/directive directly from your local components folder (e.g., src/app/components/ui/...):

// app.component.ts (standalone)
import { ButtonGroupComponent, GroupButtonComponent } from './components/ui/button-group';
import { BaseButtonDirective } from './components/ui/button';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ButtonGroupComponent, GroupButtonComponent, BaseButtonDirective],
  template: `...`,
})
export class AppComponent {}

Or in an NgModule-based app:

// app.module.ts
import { ButtonGroupComponent, GroupButtonComponent } from './components/ui/button-group';

@NgModule({
  imports: [ButtonGroupComponent, GroupButtonComponent],
})
export class AppModule {}

Note: npx base-ui init automatically configures your angular.json to include our Icon SVG Sprite and adds @import '@lussos/base-ui/styles/base.css'; to your global stylesheet.

3. Configure Tailwind CSS

Base UI works with standard Tailwind CSS 4 — no custom theme file required.

1. Install Tailwind CSS 4 and PostCSS (installation guide).
2. Create src/tailwind.css, register it in angular.json before global SCSS, and point @source at your templates:

@import "tailwindcss";

@source "./src/**/*.{html,ts}";

Components use standard Tailwind CSS spacing (e.g., p-4) and standard colors (blue-500 for color="primary").

Optional — custom brand color: override Tailwind's blue scale in :root:

:root {
  --color-blue-500: rgb(139 92 246); /* e.g. violet instead of blue */
}

Use the demo app's theme customizer to export a full 50–950 scale.

💎 Base-UI Premium Package

If you have purchased the Premium Package, you unlock access to the full source code, 350+ premium blocks, complex layouts, and pro components.

1. Accept the GitHub Invitation

Check your email for a repository invitation from lussos/base-theme and accept it.

2. Authenticate with GitHub Packages

Since the premium registry is hosted on GitHub, you must authenticate your local npm client with GitHub.

Create a Personal Access Token (PAT)

1. Go to GitHub → Settings → Developer Settings → Personal Access Tokens → Tokens (classic)
2. Generate a token with the read:packages scope.

Login to npm Run the following command in your terminal:

npm login --scope=@lussos --registry=https://npm.pkg.github.com

When prompted, use your GitHub username, the Personal Access Token as the password, and your GitHub email.

(Alternatively, you can add an .npmrc file to the root of your project with @lussos:registry=https://npm.pkg.github.com and //npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}, then set the GITHUB_TOKEN environment variable on your machine. Do NOT commit your plain-text token.)

3. Add Premium Components

Once authenticated, you can use the CLI to install any premium component or block!

npx base-ui add form-checkout-summary

📦 What's Included

| Category | Count | Description | | ----------------- | ------ | ------------------------------------------------ | | UI Components | 75+ | Buttons, inputs, modals, tabs, badges, cards, etc | | Directives | 27+ | Tooltips, click-outside, resize, etc | | Icons | 250+ | Stroke-based SVG icon sprite | | Layouts | 10 | Magazine, E-commerce, Portfolio, Kanban, etc | | Blocks | 350+ | Pre-built sections for rapid page assembly |

🏗️ Premium Source Code Access

With the Premium Package, you get complete access to:

• projects/base/ — The library source code
• src/app/components/ — All demo pages, blocks, and layouts
• src/assets/icons.svg — Complete icon sprite

You can fork, modify, and extend everything to fit your project.

🔧 Development

# Clone the repo
git clone https://github.com/lussos/base-theme.git
cd base-theme

# Install dependencies
npm install

# Start dev server
ng serve

# Build the library
npx ng build Base

# The built library is in dist/base/

📋 Requirements

• Node.js 20+
• Angular 21+
• Tailwind CSS 4.x

🤖 AI / LLM Reference

For AI agents and LLM-assisted development, a complete component catalog is available:

📄 docs/ai/components.md — All 84 components, 24 directives, pipes, services, and animations with selectors, inputs, outputs, and descriptions in a single file.

📄 License

This is a commercial product. The license grants you:

• ✅ Use in unlimited personal and commercial projects
• ✅ Premium source code access
• ✅ Lifetime updates
• ✅ Lifetime support
• ❌ Redistribution or resale of the source code is not permitted

🆘 Support

Need help? Open an issue in this repository or email [email protected].