@lace-cloud/ui

Lace Cloud's design-system primitives. Consumed by @lace-cloud/canvas composites and by any other host-agnostic UI in the Lace product surface.

Install

npm install @lace-cloud/ui @lace-cloud/design-tokens

You also need @lace-cloud/design-tokens — primitives consume CSS variables defined there.

Usage

import { Button, IconButton, Panel, Modal, Input, Textarea, Badge, ModeToggle, CollapseToggle } from '@lace-cloud/ui';

function Example() {
  return (
    <Panel title="Settings" onClose={() => {}}>
      <Input value={value} onChange={(e) => setValue(e.target.value)} fullWidth />
      <Button variant="primary" onClick={save}>Save</Button>
    </Panel>
  );
}

Don't forget to import the design tokens once at the app entry:

import '@lace-cloud/design-tokens/tokens.css';

Components

Button, IconButton, Badge, Panel, Modal, Input, Textarea, ModeToggle, CollapseToggle. Each ships with Storybook coverage in lace's canvas-stories package — see lace's CLAUDE.md for the per-component coverage invariants.

License

Proprietary — see LICENSE.