@techfever/astral-ui NPM

🪐 AstralUI

A kit of web components, for Material Design lovers

Following Material Design 3 specs

NPM Version NPM Downloads

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();
});