@qdesignsystems/able-ui

Publishable UI primitives from Able Studio — the same components/ui sources used in /studio/preview/{clientId}.

Where this package lives

able-design-system/              ← git repo root (Studio app)
├── components/ui/               # source of truth — author here
├── packages/able-ui/            ← this package (@qdesignsystems/able-ui)
│   └── src/                     # generated by npm run able-ui:sync
└── scripts/sync-able-ui-package.ts

Studio remains where you author components. This package is the distribution artifact for Lovable and other React apps.

Sync from Studio

npm run able-ui:sync

Copies every path in lib/studio/able-ui-package-paths.ts into packages/able-ui/src/.

Install (Lovable / Vite / React)

npm install @qdesignsystems/[email protected]

Peer dependencies (@base-ui/react, clsx, tailwind-merge, etc.) must be installed in the consumer app. See package.json peerDependencies.

import { Button } from "@qdesignsystems/able-ui/button"
import { PromptBox } from "@qdesignsystems/able-ui/prompt-box"

Configure path alias in the consumer (Vite example):

resolve: {
  alias: { "@": path.resolve("node_modules/@qdesignsystems/able-ui/src") },
}

Or import subpaths directly without @/ if you copy components.json aliases.

Brand tokens

This package ships components only. Per-client colors, radius, and fonts come from:

• Able MCP get_brand_pack → tokens.css, or
• npm run brand:export -- --client <id>

Merge tokens.css onto :root and .dark in the consumer app. Use MCP for get_component_spec / get_pattern_spec when composing screens.

Publish

1. Change components in able-design-system/components/ui/
2. cd able-design-system && npm run able-ui:sync
3. Bump packages/able-ui/package.json version
4. npm publish from packages/able-ui (requires @qdesignsystems npm org access)

Rules for 1:1 Studio parity

• Do not hand-edit files under packages/able-ui/src/ — run sync instead.
• Do not use npx shadcn add in consumer apps.
• Do bump this package when Studio components change.
• Do use Able MCP to validate fullClasses and patterns.