@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.

Docs · Source · npm

npm install @colineapp/ui

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>
  );
}

On a Coline Site

Sites are public websites with no Coline host around them. Use ColineSiteProvider instead of ColineAppProvider: it follows the visitor's light or dark preference. Give the site's Tailwind the same token names with theme.css.

// site/main.tsx
import { Button, Card, ColineSiteProvider } from "@colineapp/ui";
import "@colineapp/ui/styles.css";
import "./app.css"; // @import "tailwindcss"; @import "@colineapp/ui/theme.css";

createRoot(root).render(
  <ColineSiteProvider>
    <App />
  </ColineSiteProvider>,
);

A site looks like Coline. Use the components as they ship (className only for layout), with no custom fonts, no palette of your own and Tabs or SegmentedControl for navigation. The one choice a site makes is an accent color: <ColineSiteProvider accent="#0f766e"> recolors selection, radio choices, the selected date, steps, info badges and the first chart series in light and dark (checkboxes, switches and buttons stay Coline's neutral), and bg-action / text-action use it in your own layout. coline-app check warns about anything else.

Every component works on a site except the ones that need a workspace: FilePreview, FileDropzone, SaveAsButton, useFilePicker, , , , , and . Read data with the site hooks from instead.

ui

ui

@colineapp/ui

On a Coline Site

What's inside

Docs

Workflow

Live data

Screen patterns

Shared controls and motion

Tokens and components

Development

Source

License