UI
Usage
How to set up and use @workspace/ui in your app or package.
Setup
1. Import global styles
In your app's main CSS file, import the ui globals first:
/* apps/app/src/index.css */
@import "@workspace/ui/globals.css";
/* your app-specific styles below */This provides all CSS variables, base styles, and Tailwind configuration.
2. Monorepo packages using ui components
If a monorepo package (e.g., @workspace/bridge-react) uses ui components, it needs a styles.css that declares @source directives so Tailwind can scan its files:
/* packages/bridge-react/src/styles.css */
@source "./**/*.{ts,tsx}";
/* package-specific CSS variables */
:root {
--my-custom-var: #000;
}Then import this stylesheet after the base ui import in the consuming app:
/* apps/app/src/index.css */
@import "@workspace/ui/globals.css";
@import "@workspace/bridge-react/styles.css";3. Import chain
The CSS import order matters:
@workspace/ui/globals.css— base variables, Tailwind, reset- Package stylesheets — additional
@sourcedirectives and custom variables - App-specific styles — overrides and local customization
4. Use components
import { Button } from "@workspace/ui/components/button";
import { Input } from "@workspace/ui/components/input";
import { cn } from "@workspace/ui/lib/utils";
function MyForm() {
return (
<form className={cn("flex gap-2")}>
<Input placeholder="Enter value" />
<Button type="submit">Submit</Button>
</form>
);
}