@anjunar/ui
v1.0.1
Published
CSS-first design foundation for Anjunar projects.
Readme
@anjunar/ui
CSS-first design foundation for Anjunar projects.
@anjunar/ui has no dependency on consuming libraries or applications. Consumers may depend on this package, but this package must never depend on, import, or name its consumers.
Layers
theme.cssdefines the Tailwind theme and runtime CSS variables.base.cssdefines global document defaults.utilities.cssdefines low-level reusable visual utilities.components.cssdefines genericaj-*primitives.index.cssimports all Anjunar UI layers.
Usage
@import "tailwindcss";
@import "@anjunar/ui";Set the active theme on the document root:
<html data-theme="light">or:
<html data-theme="dark">Language
Use Tailwind for composition and aj-* classes for repeated Anjunar primitives:
<section class="aj-card-glass aj-stack">
<p class="aj-label">Context</p>
<h1 class="aj-heading">A clear surface</h1>
<p class="aj-copy">Project-specific layout can stay local while shared structure remains reusable.</p>
</section>Core primitives:
aj-glass,aj-glass-soft,aj-glass-dense,aj-card-glassaj-card,aj-card-quiet,aj-panel,aj-panel-mutedaj-toolbar,aj-floating,aj-menu,aj-menu-itemaj-tabs,aj-tab,aj-tab-activeaj-button,aj-button-primary,aj-button-quiet,aj-button-ghostaj-input,aj-chip,aj-badge,aj-empty,aj-table-shell
Page primitives:
aj-page,aj-page-layout,aj-page-shellaj-page-hero,aj-page-panel,aj-page-panel-shellaj-kicker,aj-page-title,aj-page-copyaj-action-pill,aj-action-pill-primary,aj-action-pill-ghostaj-icon-badge,aj-quick-row,aj-quick-icon,aj-quick-copy
Shared recipe tokens:
--aj-floating-*for menus, popovers, dropdowns, and small detached controls.--aj-overlay-*for larger elevated surfaces, notifications, dialogs, and transient panels.--aj-chrome-*for bars, headers, footers, and application frame seams.--aj-control-*for compact interactive controls and active/hover states.
Boundary
This package is the visual root. It may expose generic names like aj-panel, aj-button, and aj-shell. It must not expose consumer-specific names.
