# The barrels > The eighteen sub-barrels of the design system, what is in each, and the four rules that keep a vendored copy working. Page: https://sdk.chatfuel.com/docs/reference/ui Markdown: https://sdk.chatfuel.com/docs/reference/ui.md Every name in the design system reaches you through `~ui`, which resolves to `packages/ui/src` in this repository and to `src/vendor/ui` in a scaffolded app — the same import either way, for the reason [vendoring](/docs/concepts/vendoring) explains. ## The eighteen barrels [#the-eighteen-barrels] | Barrel | What is in it | Some of what it exports | | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `primitives` | The small pieces every screen is built from. | `Button`, `Input`, `Avatar`, `Card`, `Alert`, `Badge`, `Tag`, `Kbd`, `Progress`, `Skeleton`, `EmptyState`, `Markdown`, `CodeBlock` | | `shell` | App chrome: the frame a standalone app draws around a module. | `AppShell`, `Topbar`, `NavRail`, `SideNav`, `UserMenu` | | `layout` | The house layouts a module composes inside that frame. | `ModuleRoot`, `useBand`, `PageHeader`, `PageBody`, `Toolbar`, `SplitPane`, `InspectorHost`, `Island`, `FloatingDock`, `AuthLayout` | | `chat` | A thread and the things in it, plus the assistant half — what a model is doing, as opposed to what it said. | `MessageList`, `MessageBubble`, `Composer`, `ConversationListItem`, `ThreadHeader`, `AttachmentGallery`, `RunStep`, `RunGroup`, `StreamingText`, `VoiceRecorder`, `TestChat` | | `forms` | Controls and their labelling. | `Field`, `FormField`, `Select`, `Combobox`, `Checkbox`, `Switch`, `RadioGroup`, `SegmentedControl`, `Textarea`, `PasswordInput`, `DateField`, `TimeInput`, `DurationInput`, `TimezoneSelect`, `ChipInput`, `FileDrop`, `CopyField`, `FilterRow` | | `data` | Rows, cells and the numbers over them. | `DataTable`, `DataTableColumn`, `DataTableEdit`, `DataCards`, `StatTile`, `StackedMeter`, `JsonView`, `MediaGrid` | | `feedback` | What the app says back. | `ToastProvider`, `useToast`, `ActionBar`, `BulkProgress` | | `overlay` | Surfaces that cover the page. | `Dialog`, `Drawer`, `Overlay`, `Portal` | | `nav` | Moving inside a module. | `Tabs`, `Breadcrumbs`, `Pagination`, `Stepper`, `Collapsible` | | `dnd` | Pointer-events drag with a keyboard twin and announcements. | `useDragSession`, `useGridDragSession`, `DragLayer` | | `lib` | The headless layer: pure functions grouped by domain — geometry, time, chat, data, interaction, app, markdown. A lib module absent from the barrel is package-internal on purpose. | `bandFor`, `bandAtLeast`, `filterItems`, `nextSortState`, `parseMarkdown`, `packLanes`, `parseHotkey`, `csvText`, `screenToWorld` | | `canvas` | A pannable, zoomable scene and the things that float over it. | `Canvas`, `CanvasNode`, `CanvasHandle`, `CanvasEdges`, `CanvasToolbar`, `CanvasMinimap`, `CanvasPalette`, `useCanvas`, `useCanvasSelection` | | `calendar` | Time as a grid, and the shapes on it. | `TimeGrid`, `MonthGrid`, `MiniCalendar`, `AgendaList`, `EventChip`, `WeekHoursEditor`, `ResourceHeader` | | `floating` | Anything anchored to a trigger: the positioning, focus and dismissal engine. | `FloatingSurface`, `Popover`, `DropdownMenu`, `MenuButton`, `ContextMenu`, `Tooltip`, `Command` | | `hooks` | Behaviour without markup, so a module can compose its own. | `useContainerBand`, `useAnchoredPosition`, `useDismiss`, `useFocusTrap`, `useHotkeys`, `useRovingFocus`, `usePresence`, `useCopyToClipboard`, `useStoredList`, `useGates`, `useTestChat` | | `theme` | Light, dark, and following the system. | `ThemeToggle`, `useTheme` | | `icons` | One export per glyph, grouped by file: arrows, actions, objects, communication, channels, status. | `IconProps`, `IconSearch`, `IconChevronDown`, `IconSparkles`, `IconWhatsApp`, `IconCheck` | | `app` | Whole dialogs an app needs once. | `ShortcutsDialog`, `ConfirmDialog` | ## The vendoring contract [#the-vendoring-contract] The wizard copies the whole `src/` tree onto your disk, so the tree has to survive the move byte-for-byte. Four rules make that true, and each of them is a rule because breaking it breaks the copy rather than this repository. A copied tree keeps no aliases and no package name. `../icons` still resolves under `src/vendor/ui`; `@chatfuel/ui/icons` resolves to nothing, because a scaffolded app never depends on this package through `node_modules` at all. Every bare import in the vendored source becomes a dependency the scaffolded app has to declare and keep upgraded. React and React DOM are already there; a fifth library would be a line in somebody else's `package.json` that they did not choose and cannot remove. `bg-surface`, `text-text-muted`, `rounded-card`, `z-popover`. No component carries a `dark:` variant and none hardcodes a colour, which is what keeps theming — dark mode included — a tokens-only edit to one file. Validate pass 11(b) fails on a raw colour literal anywhere in `packages/ui/src` outside `icons/`, where the match would be SVG path data. An export this repository's own modules never call is still public surface: a scaffolded app owns the vendored source and may call anything the barrels name. "Unused here" and "unused" are not the same fact, and only one of them is knowable from inside this tree. Each directory keeps its own barrel, so the export list for a component lives beside the component, and the root `src/index.ts` only stitches the barrels together. Validate pass 11(d) walks that chain in both directions — every component file is named in its directory's barrel, and every directory barrel is re-exported from the root — because a component nobody can import type-checks, renders in the gallery through a deep import, and is invisible to every consumer of `~ui`. Anything genuinely internal opts out by living under `internal/`. The gallery is `apps/design-system`: every exported component in its states, and the tokens rendered from the live CSS custom properties. It is where you look at a change before a module uses it — and the tokens it renders are [the ones listed here](/docs/reference/ui/tokens).