Installation

This page covers one job: how to integrate @downcity/ui correctly into a React + Tailwind host app.

Install The Package

npm install @downcity/ui

Import The Styles

@import "tailwindcss";
@import "@downcity/ui/source.css";
@import "@downcity/ui/styles.css";

Recommended order:

1. tailwindcss
2. @downcity/ui/source.css
3. @downcity/ui/styles.css
4. your host app global CSS

Why Both Entry Points Exist

@downcity/ui/source.css

• Only declares the Tailwind scanning source
• Makes sure the host app includes utilities used inside UI SDK components
• Does not inject tokens or base styles

@downcity/ui/styles.css

• Owns theme variables and the base layer
• Defines semantic tokens such as background, foreground, popover, border, and ring
• Makes semantic utility classes work in the host app

Minimal Working Example

import { Button, Card, CardContent, CardHeader, CardTitle, Input, Label } from "@downcity/ui";

export function AgentSettingsCard() {
  return (
    <Card className="max-w-xl">
      <CardHeader>
        <CardTitle>Agent Settings</CardTitle>
      </CardHeader>
      <CardContent className="flex flex-col gap-4">
        <div className="flex flex-col gap-2">
          <Label htmlFor="agent-name">Agent Name</Label>
          <Input id="agent-name" placeholder="research-writer" />
        </div>
        <div className="flex justify-end">
          <Button size="sm">Save</Button>
        </div>
      </CardContent>
    </Card>
  );
}

Integration Rules

• Use className mainly for layout, width, spacing, and local page adjustments
• Prefer built-in variant, size, and composition patterns instead of rebuilding a second visual system
• For overlays, follow the primitive composition directly, such as Dialog + DialogContent + DialogHeader

Next Reading

• Components
• Modules
• Development