@arxcess/ui

A shadcn-inspired Angular UI library with complete theme system, built with Tailwind CSS and Angular.

Features

• 🎨 shadcn-inspired components - Beautiful, accessible UI components
• 🌙 Dark/Light mode support - Complete theme system with CSS variables
• 🎯 TypeScript first - Full TypeScript support with proper types
• 🎨 Tailwind CSS - Utility-first styling with custom theme variables
• 📱 Responsive - Mobile-first responsive design
• ♿ Accessible - Built with accessibility in mind
• 🚀 Tree-shakable - Import only what you need

Installation

npm install @arxcess/ui

Peer Dependencies

Make sure you have these peer dependencies installed:

npm install @angular/common @angular/core @angular/cdk class-variance-authority clsx tailwind-merge

Quick Start

1. Install Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

2. Configure Tailwind

Update your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
    "./node_modules/@arxcess/ui/**/*.{html,ts}",
  ],
  darkMode: ["class"],
  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))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
    },
  },
  plugins: [],
}

3. Add Theme Variables

Add these CSS variables to your global styles:

:root {
  --radius: 0.5rem;
  --background: 0 0% 100%;
  --foreground: 0 0% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 3.9%;
  --primary: 0 0% 9%;
  --primary-foreground: 0 0% 98%;
  --secondary: 0 0% 96.1%;
  --secondary-foreground: 0 0% 9%;
  --muted: 0 0% 96.1%;
  --muted-foreground: 0 0% 45.1%;
  --accent: 0 0% 96.1%;
  --accent-foreground: 0 0% 9%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 89.8%;
  --input: 0 0% 89.8%;
  --ring: 0 0% 3.9%;
}

.dark {
  --background: 0 0% 3.9%;
  --foreground: 0 0% 98%;
  --card: 0 0% 3.9%;
  --card-foreground: 0 0% 98%;
  --popover: 0 0% 3.9%;
  --popover-foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 0 0% 9%;
  --secondary: 0 0% 14.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 0 0% 14.9%;
  --muted-foreground: 0 0% 63.9%;
  --accent: 0 0% 14.9%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 14.9%;
  --input: 0 0% 14.9%;
  --ring: 0 0% 83.1%;
}

4. Use Components

import { Component } from '@angular/core';
import { ButtonComponent, InputComponent, ModalComponent } from '@arxcess/ui';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [ButtonComponent, InputComponent, ModalComponent],
  template: `
    <div class="space-y-4">
      <ui-button variant="default">Default Button</ui-button>
      <ui-button variant="outline">Outline Button</ui-button>
      <ui-button variant="ghost">Ghost Button</ui-button>
      <ui-button variant="destructive">Destructive Button</ui-button>
      <ui-button variant="link">Link Button</ui-button>
      
      <ui-input placeholder="Enter text..." />
      
      <ui-modal title="Example Modal">
        <p>This is a modal content!</p>
      </ui-modal>
    </div>
  `
})
export class ExampleComponent {}

Components

Button

import { ButtonComponent } from '@arxcess/ui';

// Variants: default, outline, secondary, ghost, destructive, link
// Sizes: default, sm, lg, icon, icon-sm, icon-lg
<ui-button variant="outline" size="lg">Click me</ui-button>

Input

import { InputComponent } from '@arxcess/ui';

<ui-input placeholder="Enter text..." />

Modal

import { ModalComponent, ModalService } from '@arxcess/ui';

// In your component
constructor(private modalService: ModalService) {}

openModal() {
  this.modalService.open('modal-id');
}

Theming

The library uses CSS custom properties for theming. You can customize colors by overriding the CSS variables:

:root {
  --primary: 220 14.3% 95.9%; /* Custom primary color */
  --primary-foreground: 220.9 39.3% 11%;
}

Dark Mode

Add the dark class to your root element to enable dark mode:

// Toggle dark mode
document.documentElement.classList.toggle('dark');

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © Arxcess Team