@ng-zinc/ui

A modern Angular UI component library built with Tailwind CSS.

This library provides a set of beautifully designed, accessible, and customizable components for Angular applications.

Installation

The easiest way to add @ng-zinc/ui to your Angular project is using the Angular CLI:

ng add @ng-zinc/ui

This command will automatically:

• Install required dependencies
• Configure Tailwind CSS
• Add base styles and theme variables

Manual Installation

If you prefer to install manually, follow these steps:

1. Install Dependencies

Install the library and its peer dependencies:

npm install @ng-zinc/ui @angular/cdk clsx tailwind-merge

Install Tailwind CSS and its peer dependencies if you haven't already:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

2. Configure Tailwind CSS

Update your tailwind.config.js to include the library's content and theme configuration:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
    "./node_modules/@ng-zinc/ui/**/*.{html,ts,js,mjs}", // Add this line
  ],
  theme: {
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
    },
  },
  plugins: [],
};

3. Add Global Styles

Add the following directives and CSS variables to your global styles file (e.g., src/styles.css):

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 221.2 83.2% 53.3%;
  --radius: 0.5rem;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;
  --primary: 217.2 91.2% 59.8%;
  --primary-foreground: 222.2 47.4% 11.2%;
  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 224.3 76.3% 48%;
}

Usage

Import the components you want to use in your component or module. All components are standalone.

import { Component } from '@angular/core';
import { ButtonComponent } from '@ng-zinc/ui';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ButtonComponent],
  template: `
    <ui-button variant="default">Click me</ui-button>
    <ui-button variant="destructive">Delete</ui-button>
    <ui-button variant="outline">Cancel</ui-button>
  `
})
export class AppComponent {}

Available Components

• Alert
• Avatar
• Badge
• Button
• Card
• Checkbox
• Color Picker
• Date Picker
• Dialog
• Dropdown Menu
• Input
• Input Group
• Multi Select
• Progress
• Radio Group
• Select
• Switch
• Tabs
• Textarea
• Tooltip

IDE Support

This library supports standard Angular Language Service features. If you are using VS Code with the Angular Language Service extension, you will get:

• Auto-import: Automatically imports components when you use them in templates.
• Type checking: Validates inputs and outputs.
• IntelliSense: Autocompletion for component properties and variants.