coss Documentation

File: README.md Copy Chapter

coss.com/ui (formerly Origin UI)

About the Project Copy Chapter

coss.com/ui is the official Cal.com Design System.

Repository Overview Copy Chapter

This repository contains multiple products and applications that make up the coss.com ecosystem:

Apps and Packages Copy Section

• apps/www/ - Main coss.com website
• apps/ui/ - coss ui component library and documentation
• apps/origin/ - Legacy Origin UI components (pre-acquisition)
• packages/ui/ - Shared UI components package
• packages/typescript-config/ - TypeScript configurations
• biome.json - Shared Biome configuration for linting and formatting

Each package/app is 100% TypeScript.

Environment Variables Copy Section

This monorepo contains multiple Next.js applications that are designed to link to each other. For the navigation to work correctly, you must set up environment variables for both local development and production deployments.

Local Development

For local development, create a .env.local file in each of the app directories with the corresponding variables.

1. www app

   This app needs to know the URLs of the other apps. Create a file at apps/www/.env.local:

   sh Copy

   # apps/www/.env.local
   NEXT_PUBLIC_APP_URL=http://localhost:3000
   NEXT_PUBLIC_COSS_UI_URL=http://localhost:4000/ui

2. ui app

   This app needs to know the URLs of the other apps. Create a file at apps/ui/.env.local:

   sh Copy

   # apps/ui/.env.local
   NEXT_PUBLIC_APP_URL=http://localhost:4000/ui
   NEXT_PUBLIC_COSS_URL=http://localhost:3000
   NEXT_PUBLIC_ORIGIN_URL=http://localhost:4001

3. origin app

   This app needs to know the URLs of the other apps. Create a file at apps/origin/.env.local:

   sh Copy

   # apps/origin/.env.local
   NEXT_PUBLIC_APP_URL=http://localhost:4001/origin
   NEXT_PUBLIC_COSS_URL=http://localhost:3000
   NEXT_PUBLIC_COSS_UI_URL=http://localhost:4000/ui

[!NOTE]
Turborepo is configured to watch for changes in .env* files, so it will automatically invalidate the cache when these variables change.

Development Copy Section

This Turborepo has some additional tools already setup for you:

• TypeScript for static type checking
• Biome for linting and formatting

Build

To build all apps and packages:

bun run build

To build a specific app:

bun run build --filter=www
bun run build --filter=ui
bun run build --filter=origin

Develop

To develop all apps and packages:

bun run dev

To develop a specific app:

bun run dev --filter=www
bun run dev --filter=ui
bun run dev --filter=origin

coss ui Copy Chapter

coss ui is a collection of beautifully designed, accessible, and composable components for your React apps. Built on top of Base UI and styled with Tailwind CSS, it's designed for you to copy, paste, and own.

We think Base UI is the best foundation for modern web applications. We've taken its powerful, unstyled primitives and given them a design system that's ready to go, right out of the box.

This is the component library we'll be progressively adopting for cal.com. We're building it in the open for anyone who wants to create beautiful, reliable user interfaces.

Origin UI Acquisition Copy Section

This repository also includes the Origin UI components as a legacy snapshot. Origin UI was a pre-acquisition collection of Radix-based, shadcn-style components that remains available for use, but with limited support and maintenance. Active development now focuses on the new Particles components built on the coss ui primitives.

Contributing to coss ui Copy Section

We're always looking for contributors to help improve our UI components. Whether it's a bug report, a new feature, or a documentation update, we appreciate your help.

Please see our Contributing Guidelines for more information on how to get involved.

Licensing Copy Chapter

This repository uses a mixed licensing approach. The default license for this project is AGPLv3.0.

• MIT: The apps/origin/ and apps/ui/ directories are licensed under their original MIT license
• AGPLv3: All other directories are licensed under the GNU Affero General Public License v3.0

For detailed information, see our Licensing documentation.

Acknowledgements Copy Chapter

Special thanks to:

• Tailwind CSS - For the utility-first CSS framework that powers our design system
• Base UI - For providing the robust, accessible primitives that form the foundation of our components
• shadcn/ui - For inspiring our copy-paste approach and component philosophy
• Fumadocs - For providing the documentation framework that powers our component docs

File: apps/www/README.md Copy Chapter

This is a Next.js project bootstrapped with create-next-app.

Getting Started Copy Chapter

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun run dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More Copy Chapter

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel Copy Chapter

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

File: apps/ui/content/docs/components/accordion.mdx Copy Chapter

title: Accordion links: doc: https://base-ui.com/react/components/accordion#api-reference Copy Chapter

npx shadcn@latest add @coss/accordion

npm install @base-ui/react

import {
  Accordion,
  AccordionItem,
  AccordionPanel,
  AccordionTrigger,
} from "@/components/ui/accordion"

<Accordion>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionPanel>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionPanel>
  </AccordionItem>
</Accordion>

npx shadcn@latest add @coss/alert

@theme inline {
  --color-destructive-foreground: var(--destructive-foreground);
  --color-info: var(--info);
  --color-info-foreground: var(--info-foreground);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
}

:root {
  --destructive-foreground: var(--color-red-400);
  --info: var(--color-blue-500);
  --info-foreground: var(--color-blue-700);
  --success: var(--color-emerald-500);
  --success-foreground: var(--color-emerald-700);
  --warning: var(--color-amber-500);
  --warning-foreground: var(--color-amber-700);
}

.dark {
  --destructive-foreground: var(--color-red-400);
  --info: var(--color-blue-500);
  --info-foreground: var(--color-blue-400);
  --success: var(--color-emerald-500);
  --success-foreground: var(--color-emerald-400);
  --warning: var(--color-amber-500);
  --warning-foreground: var(--color-amber-400);
}

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>

npx shadcn@latest add @coss/alert-dialog

npm install @base-ui/react

import {
  AlertDialog,
  AlertDialogClose,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogPopup,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"

<AlertDialog>
  <AlertDialogTrigger>Delete Account</AlertDialogTrigger>
  <AlertDialogPopup>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogClose>Cancel</AlertDialogClose>
      <AlertDialogClose>Delete Account</AlertDialogClose>
    </AlertDialogFooter>
  </AlertDialogPopup>
</AlertDialog>

// Default variant (with border and background)
<AlertDialogFooter>
  <AlertDialogClose>Cancel</AlertDialogClose>
  <AlertDialogClose>Delete</AlertDialogClose>
</AlertDialogFooter>

// Bare variant (no border or background)
<AlertDialogFooter variant="bare">
  <AlertDialogClose>Cancel</AlertDialogClose>
  <AlertDialogClose>Delete</AlertDialogClose>
</AlertDialogFooter>

npx shadcn@latest add @coss/autocomplete

npm install @base-ui/react

import {
  Autocomplete,
  AutocompleteEmpty,
  AutocompleteInput,
  AutocompleteItem,
  AutocompleteList,
  AutocompletePopup,
} from "@/components/ui/autocomplete"

const items = [
  { value: "apple", label: "Apple" },
  { value: "banana", label: "Banana" },
  { value: "orange", label: "Orange" },
  { value: "grape", label: "Grape" },
]

<Autocomplete items={items}>
  <AutocompleteInput placeholder="Search..." />
  <AutocompletePopup>
    <AutocompleteEmpty>No results found.</AutocompleteEmpty>
    <AutocompleteList>
      {(item) => <AutocompleteItem key={item.value} value={item}>{item.label}</AutocompleteItem>}
    </AutocompleteList>
  </AutocompletePopup>
</Autocomplete>

npx shadcn@latest add @coss/avatar

npm install @base-ui/react

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

<Avatar>
  <AvatarImage src="/avatars/01.png" alt="User avatar" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

npx shadcn@latest add @coss/badge

npm install @base-ui/react

@theme inline {
  --color-destructive-foreground: var(--destructive-foreground);
  --color-info: var(--info);
  --color-info-foreground: var(--info-foreground);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
}

:root {
  --destructive-foreground: var(--color-red-700);
  --info: var(--color-blue-500);
  --info-foreground: var(--color-blue-700);
  --success: var(--color-emerald-500);
  --success-foreground: var(--color-emerald-700);
  --warning: var(--color-amber-500);
  --warning-foreground: var(--color-amber-700);
}

.dark {
  --destructive-foreground: var(--color-red-400);
  --info: var(--color-blue-500);
  --info-foreground: var(--color-blue-400);
  --success: var(--color-emerald-500);
  --success-foreground: var(--color-emerald-400);
  --warning: var(--color-amber-500);
  --warning-foreground: var(--color-amber-400);
}

import { Badge } from "@/components/ui/badge"

Badge

import Link from "next/link"

import { Badge } from "@/components/ui/badge"

export function LinkAsBadge() {
  return }>New
}

npx shadcn@latest add @coss/breadcrumb

import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"

Home
    
    
    
      
    
    
      Components
    
    
    
      Breadcrumb

npx shadcn@latest add @coss/button

npm install @base-ui/react

@theme inline {
  --color-destructive-foreground: var(--destructive-foreground);
}

:root {
  --destructive-foreground: var(--color-red-700);
}

.dark {
  --destructive-foreground: var(--color-red-400);
}

import { Button } from "@/components/ui/button"

Button

import Link from "next/link"

import { Button } from "@/components/ui/button"

export function LinkAsButton() {
  return }>Login
}