Back to all projects
Active Design System CSS Astro npm

Kedhar UI

Shared design system for all my projects — CSS tokens, components, themes, and reusable Astro components. Published on npm.

Live Demo Source Code

A shared design system powering visual consistency across all my sites. Single source of truth for CSS tokens (spacing, typography, shadows, transitions), base styles, and reusable components.

What’s included

  • Design tokens — spacing scale, border radius, typography, shadows, transitions, z-index
  • Base reset — box-sizing, body defaults, link/button styling, focus-visible, selection
  • Component styles — CSS-only ripple effect (.ks-ripple), scroll-to-top button (.ks-scroll-top), animated theme toggle (.ks-theme-toggle), cards, badges, section containers
  • Per-site themes — Indigo (portfolio), Amber (projects), Emerald (blog), Slate (mssql-scripts)
  • Astro components — ThemeToggle.astro and ScrollToTop.astro importable from npm
  • dist bundles for plain HTML sites via unpkg CDN

Design decisions

  • Zero runtime dependencies — pure CSS + Astro components, no framework lock-in
  • Plain CSS, not Tailwind — the package uses CSS custom properties; sites keep their own Tailwind setup
  • CSS-only ripple — .ks-ripple uses :active pseudo-element with no JavaScript
  • Each site has its own theme — only the structural CSS is shared, colors are per-site

Status

Actively used across all 4 Astro sites. Published on npm for easy versioned updates.