Components

coss ui

We use coss ui, a component library built on Base UI (not Radix) and styled with Tailwind CSS v4.

Installation

Components are installed via the shadcn CLI:

bunx shadcn@latest add @coss/ui @coss/colors-neutral -y --overwrite

Adding a Component

# Add a specific component
bunx shadcn@latest add @coss/button

# List available components
bunx shadcn@latest add --list

Components are installed into src/components/ui/.

Registry Configuration

The components.json file configures the coss registry:

{
  "registries": {
    "@coss": "https://coss.com/ui/r/{name}.json"
  }
}

Base UI Isolation

The root layout must include a Base UI isolation wrapper required for portaled components (dialogs, tooltips, popovers):

<div className="isolate relative flex min-h-svh flex-col">
  {children}
</div>

Without this wrapper, portaled elements may have z-index or stacking context issues.

Component Structure

Follow this pattern for all custom components:

// 1. Imports
import { useState } from "react";

// 2. Types
interface ThreatCardProps {
  threat: ThreatEvent;
  onSelect?: (id: string) => void;
}

// 3. Named export
export function ThreatCard({ threat, onSelect }: ThreatCardProps) {
  return <div>{/* ... */}</div>;
}

File Naming

Components: kebab-case.tsx (e.g., threat-card.tsx)
Hooks: use-<name>.ts (e.g., use-threats.ts)
Stores: <name>-store.ts (e.g., threat-store.ts)

Linting

bun run check       # Biome lint check
bun run check:fix   # Auto-fix
bun run format      # Format

Components

On this page