Introduction
Reusable Cal-aware UI — shared composites, feature controls, and app-local systems.
Product UI is the reusable interface Cal ships in product. It may live in @coss/ui/shared, a feature package, or an app-local system. This section is a discovery index — documenting a control does not mean relocating it.
Sidebar badges mark ownership (letter only; hover for the full label):
| Badge | Where | When |
|---|---|---|
| S | @coss/ui/shared | Stable across domains, no feature/app-only deps |
| F | packages/features/** | Domain data, localization, or feature contracts |
| A | apps/web/** | Web routing, contexts, or app orchestration |
Search order
- Shared —
@coss/ui/shared - Cross-domain feature UI —
packages/features/components - Domain-owned feature UI —
packages/features/<domain>/components - App-local systems —
apps/web
Use Guides for page-level compositions and Coss UI for primitive APIs.
Shared (@coss/ui/shared)
Import: @coss/ui/shared/<kebab-name>. Source: packages/coss-ui/src/shared.
The folder name shared is provisional. Browse the sidebar for each Shared page — every live demo matches a real product call site (copy may be paraphrased). Each page also lists Example URLs — not exhaustive — a few app paths you can open locally to see the control in product.
import { HorizontalTabs } from "@coss/ui/shared/horizontal-tabs";
import { SegmentedNav } from "@coss/ui/shared/segmented-nav";
import { SegmentedRadioGroup } from "@coss/ui/shared/segmented-radio-group";
import { UserAvatar } from "@coss/ui/shared/user-avatar";Feature-owned
These stay with their feature owner instead of moving into @coss/ui/shared. Browse F-badged pages in the sidebar for focused docs; remaining rows are inventory until their tickets land.
Documented
| Entry | Page | Import |
|---|---|---|
| AI agent UI | Agent UI | @calcom/ai/react/ui/* |
| AI image placeholder | AI image placeholder | @calcom/ai/react/ui/image-generation-placeholder |
| Color picker | Color Picker | @calcom/features/components/color-picker |
| Editor and variables | Editor | @calcom/features/components/editor |
| Event location select | Location Select | @calcom/features/form/components/location-select |
| Image and banner uploaders | Image & Banner Uploaders | @calcom/features/components/image-uploader |
| Maps address field | Maps Address Field | @calcom/features/form/components/google-maps-address-lazy |
| Schedule and date overrides | Schedule & Date Overrides | @calcom/features/schedules/components/* |
| Timezone combobox | Timezone Combobox | @calcom/features/timezone/components/timezone-combobox |
| Event registration section | Event Registration Section | @calcom/features/cal-events/components/event-page/sections/event-registration-section-parts |
| Seat confirmation roster | Seat Confirmation Roster | @calcom/features/bookings/components/seat-confirmation-roster |
Upcoming pages
| Entry | Import | Purpose | Representative call sites |
|---|---|---|---|
| Event-type settings toggle | @calcom/features/eventtypes/components/settings-toggle | Event-type setting row with lock/badge/children | packages/features/eventtypes/components/tabs/limits/EventLimitsTab.tsx |
App-local
These stay in apps/web. Browse A-badged pages in the sidebar for focused docs.
Documented
| Entry | Page | Import |
|---|---|---|
| Booker event information | Booker Event Information | ~/bookings/components/EventMeta |
| Booker calendar | Booker Calendar | ~/bookings/components/DatePicker |
| Booker time slots | Booker Time Slots | ~/bookings/components/AvailableTimeSlots |
| Data table and filters | Data Table Filters | ~/data-table/components/* |
| Shader backgrounds | Shader Backgrounds | @calcom/web/modules/shaders/shader-hero |
| Two-factor code field | Two-Factor Code Field | @components/auth/two-factor-code-field |
Chat UI family
Chat UI is a cohesive family of reusable chat components in packages/coss-ui/src/chat/. Import from @coss/ui/chat/<name> and @coss/ui/chat/hooks/<name>. It has working inline and drawer demos; message data, permissions, transport, and event policy belong to the consuming application.
Start with the minimal example, then follow the Cal implementation guide. The guide documents unresolved backend contracts and demo-only behavior. The family is being prepared for a Coss registry rebuild and has not been published. Its conversation-list anatomy and other explicitly marked explorations are not implemented components.
Placement rule
Move a composition into @coss/ui/shared only when its behavior is stable across domains and does not need feature or app dependencies. Otherwise, reuse it from the owning domain and document it here with a Feature or App badge.