# @colineapp/ui

The Coline design system for tier-2 (React) Coline Apps — the same components
the Coline platform itself uses, themed live by the host workspace. Your app
automatically matches the user's theme, including dark mode and brand
accents, with no theme code of your own.

```tsx
import {
  Button,
  Card,
  ColineAppProvider,
  Input,
  useColine,
  useColineQuery,
} from "@colineapp/ui";
import "@colineapp/ui/styles.css";

function NotesList() {
  const coline = useColine();
  const notes = useColineQuery(
    (c) => c.files.list({ typeKey: "notes.note" }),
    [],
  );

  return (
    <Card>
      {notes.data?.files.map((file) => (
        <Button key={file.fileId} variant="ghost">
          {file.name}
        </Button>
      ))}
    </Card>
  );
}

export default function App() {
  return (
    <ColineAppProvider>
      <NotesList />
    </ColineAppProvider>
  );
}
```

## What's inside

- 21 components: Button, Card, Dialog, Input, Select, Checkbox, Switch,
  Tabs, Table, Badge, Tooltip, DropdownMenu, and more — Radix-based,
  accessible, keyboard-friendly.
- `ColineAppProvider` — connects the sandbox bridge and provides context.
- Hooks: `useColine` (the capability API), `useColineContext` (workspace /
  surface / file context), `useColineQuery` (data fetching with
  loading/error state), `useColorScheme`.
- `styles.css` — the compiled stylesheet; theme tokens are overridden at
  runtime by the host, so one CSS file serves every workspace theme.

Used inside a Coline App's react-tier surface (`{ tier: "react", entry:
"main.tsx" }` in the manifest). Scaffold a working app with
`npx create-coline-app my-app`.

## Docs

Full guides at [coline.app/developers/docs](https://coline.app/developers/docs).

MIT © Coline