@eduboxpro/studio

Modern Angular UI library for educational platforms with customizable design system.

Features

• 🎨 Customizable design tokens (colors, typography, spacing)
• 🌓 Dark/Light theme support
• 📦 Standalone components (no NgModules required)
• ⚡ Built with Angular Signals
• 🎯 TypeScript & type-safe
• ♿ Accessible (ARIA compliant)
• 🎭 Multiple variants and sizes
• 🧩 Composable components

Installation

npm install @eduboxpro/studio lucide-angular

Quick Start

1. Import Styles

Add to your src/styles.scss:

@use '@eduboxpro/studio/src/styles/studio';

Or in angular.json:

{
  "styles": [
    "node_modules/@eduboxpro/studio/src/styles/studio.scss",
    "src/styles.scss"
  ]
}

2. Provide Configuration (Optional)

In your app.config.ts:

import { provideStudioConfig } from '@eduboxpro/studio';

export const appConfig: ApplicationConfig = {
  providers: [
    provideStudioConfig({
      theme: {
        mode: 'light', // or 'dark'
        colors: {
          primary: '#3b82f6',
          // ... other color overrides
        }
      },
      components: {
        button: {
          variant: 'solid',
          size: 'md',
          radius: 'md'
        }
      }
    })
  ]
};

3. Use Components

Import components in your standalone component:

import { Component } from '@angular/core';
import { ButtonComponent, InputComponent, BadgeComponent } from '@eduboxpro/studio';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ButtonComponent, InputComponent, BadgeComponent],
  template: `
    <studio-button variant="solid" color="primary">
      Click me
    </studio-button>

    <studio-input
      [(ngModel)]="email"
      type="email"
      label="Email"
      placeholder="[email protected]"
    />

    <studio-badge variant="solid" color="success">
      Active
    </studio-badge>
  `
})
export class AppComponent {
  email = '';
}

Available Components

Primitives

• Button - Interactive button with multiple variants
• Badge - Status and label indicators
• Input - Text input with validation support
• Switch - Toggle switch control
• Icon - Icon component powered by Lucide

Composites

• ThemeSwitch - Dark/light theme toggle

Components API

Button

<studio-button
  variant="solid | outline | ghost"
  color="primary | secondary | success | error | warning"
  size="sm | md | lg"
  radius="none | sm | md | lg | xl | full"
  [disabled]="false"
  [loading]="false"
  icon="icon-name"
  iconPosition="left | right | only"
  (clicked)="onClick()"
>
  Button text
</studio-button>

Input

<studio-input
  [(ngModel)]="value"
  type="text | email | password | number | tel | url"
  variant="outline | filled | underline"
  size="sm | md | lg"
  radius="none | sm | md | lg | full"
  label="Label"
  placeholder="Placeholder"
  hint="Helper text"
  [error]="false"
  errorMessage="Error message"
  [required]="false"
  [disabled]="false"
  [readonly]="false"
  [loading]="false"
  [clearable]="false"
  [showPasswordToggle]="false"
  [floatingLabel]="false"
  [fullWidth]="false"
  prefixIcon="icon-name"
  suffixIcon="icon-name"
/>

Badge

<studio-badge
  variant="solid | outline | soft | dot"
  color="primary | secondary | success | error | warning | info | neutral"
  size="sm | md | lg"
  radius="sm | md | lg | full"
  [removable]="false"
  [interactive]="false"
  (clicked)="onClick()"
  (removed)="onRemove()"
>
  Badge text
</studio-badge>

Switch

<studio-switch
  [(ngModel)]="isEnabled"
  size="sm | md | lg"
  color="primary | secondary | success"
  label="Label"
  [disabled]="false"
  [loading]="false"
  (changed)="onChange($event)"
/>

Theming

Design Tokens

You can customize the design tokens through configuration:

provideStudioConfig({
  theme: {
    colors: {
      primary: { base: '#3b82f6', hover: '#2563eb', active: '#1d4ed8', bg: '#dbeafe' },
      success: '#10b981',
      error: '#ef4444',
      // ...
    },
    typography: {
      fontFamily: 'Inter, sans-serif',
      fontMono: 'JetBrains Mono, monospace',
      googleFonts: [
        { family: 'Inter', weights: [400, 500, 600, 700], display: 'swap' },
        { family: 'JetBrains Mono', weights: [400, 500, 600], display: 'swap' }
      ],
      fontSize: {
        sm: '0.875rem',
        base: '1rem',
        lg: '1.125rem'
      }
    },
    spacing: {
      sm: '0.5rem',
      md: '1rem',
      lg: '1.5rem'
    },
    borderRadius: {
      sm: '0.25rem',
      md: '0.5rem',
      lg: '1rem',
      full: '9999px'
    }
  }
})

Component Defaults

Set default props for all components:

provideStudioConfig({
  components: {
    button: {
      variant: 'solid',
      size: 'md',
      color: 'primary',
      radius: 'md'
    },
    input: {
      variant: 'outline',
      size: 'md',
      radius: 'md',
      clearable: true
    },
    badge: {
      variant: 'solid',
      size: 'md',
      radius: 'md'
    }
  }
})

Google Fonts Integration

The library supports automatic loading of Google Fonts. Simply configure the fonts you want to use in the googleFonts array:

provideStudioConfig({
  theme: {
    typography: {
      // Specify fonts to load from Google Fonts
      googleFonts: [
        {
          family: 'Poppins',
          weights: [400, 500, 600, 700],
          display: 'swap'
        },
        {
          family: 'Inter',
          weights: [400, 500, 600, 700],
          display: 'swap'
        },
        {
          family: 'JetBrains Mono',
          weights: [400, 500, 600],
          display: 'swap'
        }
      ],
      // Set the default font family
      fontFamily: 'Poppins, system-ui, -apple-system, sans-serif',
      fontMono: 'JetBrains Mono, monospace'
    }
  }
})

Parameters:

• family - Font family name from Google Fonts
• weights - Array of font weights to load (e.g., [400, 500, 600, 700])
• display - Font display strategy: 'swap' (recommended), 'auto', 'block', 'fallback', or 'optional'

Note: Fonts are loaded automatically when the app initializes. The library will:

1. Add preconnect links to Google Fonts CDN for better performance
2. Load the specified fonts with the chosen weights
3. Apply the fonts to all library components

You can dynamically change fonts at runtime by updating the CSS variable:

// Update font family programmatically
document.documentElement.style.setProperty(
  '--studio-font-family',
  'Inter, system-ui, sans-serif'
);

License

MIT © EduBoxPro Team