@aspekt/ui
v0.3.9
Published
CLI for adding Aspekt UI source components to React and Tailwind projects.
Readme
Aspekt CLI
Add Aspekt UI source components to TypeScript React and Tailwind CSS v4 projects.
npx @aspekt/ui init --preset square
npx @aspekt/ui add button
npx @aspekt/ui preset round
npx @aspekt/ui updateThe CLI copies component source into your project so you can edit the
components directly. It reads shadcn-style components.json when present,
defaults to src/components/aspekt for src-first React apps, uses
app/components/aspekt for Remix/React Router-style app folders, uses
web/src/components/aspekt for Redwood-style apps, and falls back to
components/aspekt otherwise. The init, add, and update commands also
keep your Aspekt CSS theme block wired to the copied component directory for
Tailwind. Installed component template hashes are recorded in
.aspekt/components.json, which lets the CLI detect outdated components later.
Commands
npx @aspekt/ui list
npx @aspekt/ui init --preset round
npx @aspekt/ui add aspect-ratio button input dialog
npx @aspekt/ui preset square
npx @aspekt/ui update
npx @aspekt/ui update button --dry-runUse --force to overwrite existing files, --dry-run to preview writes, and
--no-install to skip package installation. Use --preset square or
--preset round during init to choose the generated default shape, and
preset square|round later to update the generated Aspekt config without
rewriting installed components. Use --path to override the detected component
directory, and --yes to apply detected updates without an interactive
confirmation prompt.
Aspekt's theme uses Tailwind CSS v4 features like @theme, @utility, and
@source, so the CLI fails early in Tailwind v3 or non-Tailwind projects. If
the CLI has to create a new CSS file, it prints a reminder to import that file
from your app entry or layout. The full Aspekt theme is installed into your
global CSS file, after top-level imports/plugins and before app styles. When
init sees an existing CSS design foundation with custom tokens, @theme,
@layer base, or conflicting Aspekt tokens, it warns and asks before replacing
that foundation. Pass --yes or --force to confirm the replacement in
non-interactive runs.
