🪐 AstralUI

A kit of web components, for Material Design lovers

Following Material Design 3 specs

Universal (web components support any framework)
Responsive (adapts to different screen sizes)
Fully customizable (change colors, sizes, and other properties)
Extensible (easily add new features and components)
Supports dark/light mode (switch between themes seamlessly)

CODESANDBOX (Angular)

DEMO & DOCUMENTATION

CHANGELOG.md

Components

Buttons
Panes
Accordions
Breadcrumbs
Checkboxes
Modals
More components coming soon...

See ROADMAP.md for more components

Installation

npm install @techfever/astral-ui

Usage

Define custom elements in your main class :

import { defineCustomElements } from '@techfever/astral-ui/loader';

class MyClass {
  constructor() {
    defineCustomElements(window);
  }
}

NOTE: For Angular users, put in your schemas : CUSTOM_ELEMENTS_SCHEMA

Use the CSS variables to customize your theme :

// Use the Astral UI SCSS functions to set your own color variables
@use "../node_modules/@techfever/astral-ui/dist/astralui/scss/functions/rgb.scss"
  as *;

// Import the Web Components CSS for Ripples
@import "../node_modules/@techfever/astral-ui/dist/astralui/assets/material-components-web.min.css";


:root {
  --astral-primary-font: "K2D", sans-serif;
  --astral-secondary-font: "Merriweather", serif;

  // NOTE: Define your own palette
  @include set-color-variable("#6200ea", --astral-primary-color);
  @include set-color-variable("#ffffff", --astral-primary-contrast-color);
  @include set-color-variable("#03dac6", --astral-secondary-color);
  @include set-color-variable("#212121", --astral-secondary-contrast-color);
  @include set-color-variable("#00c853", --astral-success-color);
  @include set-color-variable("#ffffff", --astral-success-contrast-color);
  @include set-color-variable("#ff4141", --astral-warning-color);
  @include set-color-variable("#ffffff", --astral-warning-contrast-color);

  @include set-color-variable("#212121", --astral-text-color-light);
  @include set-color-variable("#efefef", --astral-background-color-light);
  @include set-color-variable("#ffffff", --astral-text-color-dark);
  @include set-color-variable("#212121", --astral-background-color-dark);

  // NOTE: For supporting dark/light mode you need to bind variables
  &[data-theme="dark"] {
    --astral-text-color: rgba(var(--astral-text-color-dark));
    --astral-background-color: rgba(var(--astral-background-color-dark));
  }

  &[data-theme="light"] {
    --astral-text-color: rgba(var(--astral-text-color-light));
    --astral-background-color: rgba(var(--astral-background-color-light));
  }
}

// NOTE: Use directly the variables of Astral UI in your theme

body {
  background: var(--astral-background-color);
  color: var(--astral-text-color);
}

// ... Your own CSS rules here ...

Use it directly in your template :

<astral-button color="primary" stroked>Click me!</astral-button>

Dynamic dark / light mode

AstralUI supports dark and light modes. You can put the attribute data-theme to "dark" or "light" in the root html tag (document.documentElement).

You can define the initial theme based on the system's preference:

if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.documentElement.setAttribute('data-theme', 'dark');
} else {
  document.documentElement.setAttribute('data-theme', 'light');
}

You can toggle between these modes using JavaScript. Here's an example :

const toggleThemeButton = document.querySelector('#toggle-theme-button');
const icon = toggleThemeButton.querySelector('i');
const buttonText = toggleThemeButton.querySelector('#toggle-theme-button-text');

const isDarkTheme = () => document.documentElement.getAttribute('data-theme') === 'dark';

const updateThemeUI = () => {
  if (isDarkTheme()) {
    icon.innerText = 'light_mode';
    buttonText.innerText = 'Toggle light mode';
  } else {
    icon.innerText = 'dark_mode';
    buttonText.innerText = 'Toggle dark mode';
  }
};

updateThemeUI();

toggleThemeButton.addEventListener('click', () => {
  if (isDarkTheme()) {
    document.documentElement.setAttribute('data-theme', 'light');
  } else {
    document.documentElement.setAttribute('data-theme', 'dark');
  }
  updateThemeUI();
});