# Central Design System (CDS 4)

> Version: 4.0.0-alpha.13. A modular Vue 3 UI component library, `@central-design-system/components`.
> This file is an index for AI agents building product UI with CDS.
> Generated automatically (`bun run generate:meta` → `bun run generate:llms`). Do not edit manually.

## Documentation sets

- [llms-full.txt](https://cds-preview-docs.vercel.app/llms-full.txt): the full documentation in one file: guides, tokens, components, migration
- [llms-components.txt](https://cds-preview-docs.vercel.app/llms-components.txt): components only: purpose, examples, and the API contract
- [llms-tokens.txt](https://cds-preview-docs.vercel.app/llms-tokens.txt): tokens and themes only
- [llms-guides.txt](https://cds-preview-docs.vercel.app/llms-guides.txt): guides only: setup, conventions, forms, theming, Tailwind, tree-shaking
- [llms-migration.txt](https://cds-preview-docs.vercel.app/llms-migration.txt): CDS 3 → CDS 4 migration only

Take a narrow slice when context is limited: components, tokens, guides, and
migration are split apart; the full catalog is rarely needed.

For Claude Code and compatible agents there are Agent Skills — more precise than
the flat catalog: https://cds-preview-docs.vercel.app/guide/ai/skills

## Setup

```ts
import { createApp } from 'vue';
import '@central-design-system/components/styles';
import { createCds, components, directives } from '@central-design-system/components';
import App from './App.vue';

const cds = createCds({ components, directives });
createApp(App).use(cds).mount('#app');
```

Usage: `<CdsButton appearance="primary">Click me</CdsButton>`.

This is full registration: the `components` namespace import and the `styles`
aggregate keep the entire library in the bundle. It suits places where the set of
components is not known upfront (admin panels, sandboxes, documentation). In product
applications register components individually — `createCds({ components: { CdsButton } })`
plus the base style layer `@central-design-system/components/styles/common.css`;
see the "Tree-shaking" guide for details.

## Conventions

- **Uniform props.** `size`, `color` / `bgColor`, `appearance`, `disabled`, `loading`,
  `width` / `height` behave the same across all components (shared composable factories).
- **Tokens, not raw values.** Colors are set via the `color` prop, not arbitrary CSS.
- **Atomic Design.** Complex UI is assembled from atoms (e.g. a form:
  `CdsField` + `CdsLabel` + `CdsDescription` + `CdsMessages` + `CdsInput`).
- The full CDS 3 → CDS 4 migration guide lives in `MIGRATION.md`.

## Components (79)

Below is the purpose of every component. The full contract (props / events /
slots / exposed) and examples are in llms-components.txt.

### Atoms (15)

- **CdsCounter** — The counter shows how many characters are already typed and how many are allowed: `42 / 100`.
- **CdsDescription** — A description is muted text under the label of a field.
- **CdsDivider** — A divider is a thin line between the meaningful parts of an interface: the sections of a form, the rows of a list, the blocks of a card.
- **CdsField** — The frame of an input: the background, the border, the focus and error states, the inner icons, the clear button and the loading indicator.
- **CdsFunctionalButton** — A functional button is a utility action next to the content: download a file in a row of a list, reveal a password in a field, collapse a block, open the menu of a record.
- **CdsHighlight** — Highlighting explains why a row made it into the results: the component finds the matches with the query (`query`) or with ready ranges (`matches`) in the text and wraps them into `mark`.
- **CdsInput** — The wrapper of an input: the label, the description, the outer icons, the block of messages and the validation by rules.
- **CdsLabel** — A label names a field — it says what is expected from the user.
- **CdsMessages** — The block of messages under an input: a hint, an explanation or a validation error.
- **CdsResponsive** — A frame with constant proportions.
- **CdsSelectionControl** — The base of the selection controls: a native `input` with state icons, a label and a description.
- **CdsSelectionControlGroup** — A container for a set of selection controls: it holds the shared value, hands the nested CdsSelectionControl the type, the icons, the colors and the states, and ties them together with a single `name` attribute.
- **CdsSlideGroup** — A slide group lays a set of elements out in a single scrollable line: when the elements do not fit, the strip is paged with arrows.
- **CdsSlideView** — A slide view shows one slide out of a set and switches them with a shift animation: arrows, swipes and `v-model` page forward and backward.
- **CdsSurface** — A surface is a container with a background from the tokens, sizes, positioning and a theme of its own.

### Content (19)

- **CdsAvatar** — An avatar shows a person, a team or a company: a photo, initials or an icon inside a round container.
- **CdsButton** — A button is the primary way to trigger an action: submit a form, open a modal, confirm a choice.
- **CdsButtonGroup** — A button group joins several CdsButton into one block: the buttons sit flush against each other, only the outer corners stay rounded, and shared props are set once on the group.
- **CdsButtonToggle** — A toggle group turns CdsButton into a switch: the pressed button stays selected, and the choice is available through `v-model`.
- **CdsCard** — A card gathers related content — a title, text, an image, actions — into one bordered block.
- **CdsCarousel** — A carousel shows images or arbitrary content slide by slide: promo banners, photo galleries, onboarding steps.
- **CdsExpandablePanel** — An expandable panel hides the details behind a title: you see the list of topics and open only the one you need.
- **CdsIcon** — An icon is a short visual mark next to the text: the status of a record, the type of a file, the direction of a transition.
- **CdsImage** — An image that knows how to wait.
- **CdsList** — A list shows a set of records of the same kind — menu sections, documents, employees, settings — so that the one you need is easy to find and pick.
- **CdsMenu** — A menu pops up next to an activator element and shows a list of actions or sections: the "more" button in a table row, the user menu in the header, a context menu on right click.
- **CdsModal** — A modal opens on top of the page and keeps the focus on a single task: confirm an action, fill in a short form, look at the details — without taking you away from the current screen.
- **CdsOverlay** — An overlay shows content on top of the page: it dims the page with a scrim, computes the position relative to an activator and manages the stacking order of the open layers.
- **CdsTable** — A table shows large sets of records in columns and takes the data work off your hands: sorting, filters, pagination, row selection and expansion, a pinned header and pinned columns.
- **CdsTag** — A tag is a compact label next to an object: the status of a request, a product category, a selected filter.
- **CdsTagGroup** — A tag group turns a set of CdsTag into a toggle: the selected tag is highlighted, the value is available through `v-model`, and the tags that do not fit move into a horizontal scroll.
- **CdsTooltip** — A tooltip briefly explains an interface element on hover or focus: it names an icon button, shows the full text of a truncated line, explains why an action is unavailable.
- **CdsTree** — A tree shows a hierarchy: catalog sections, project files, an org structure.
- **CdsVirtualScroll** — Virtual scrolling keeps long lists fast: only the visible rows get into the DOM, not the whole array.

### Controls (18)

- **CdsAutocomplete** — An autocomplete is a field for picking from a long list: the user types a query, the list is filtered on the fly and the matches are highlighted.
- **CdsCheckbox** — A checkbox turns an independent option on and off: consent to terms, an entry in a filter list, a profile setting.
- **CdsCheckboxButton** — The checkbox control without a label and a messages block — the atom CdsCheckbox is built on.
- **CdsCombobox** — A combobox is a field with a dropdown list and free input: the value can be picked from the offered ones or typed in — the text itself becomes the value.
- **CdsDateInput** — A date field: a text field with a calendar icon that opens CdsDatePicker in a dropdown menu on click.
- **CdsDatePicker** — A calendar for picking a date — a single one, several or a range.
- **CdsFileInput** — A file field: the user attaches documents by a click, by dragging or by pasting from the clipboard.
- **CdsFileUpload** — A file upload zone: it accepts files by dragging, by pasting from the clipboard and through the system dialog, and shows the selection as a list with image previews.
- **CdsForm** — A form joins fields into one group: it collects their validation into a common status, intercepts the submission and can reset the values.
- **CdsOtpInput** — A field for entering a one-time code — from an SMS, an email or an authenticator app.
- **CdsRadio** — A radio button is one option of a mutually exclusive choice.
- **CdsRadioGroup** — A radio group is a choice of one option out of a short mutually exclusive set: a payment method, a plan, a report period.
- **CdsSelect** — A select opens a dropdown list and lets you pick one or several values from a known set: a country, a status, a category.
- **CdsTextArea** — A text area is a field for multiline text: a comment, a description, a support request.
- **CdsTextInput** — A text field is the basic way to get data from the user: a name, an email, an amount, a search query.
- **CdsTimePicker** — Time selection: hours, minutes and — if you want — seconds.
- **CdsToggle** — A toggle is an on/off switch for a setting that applies immediately, without a "Save" button: notifications, auto-renewal, profile visibility.
- **CdsUploader** — The uploader sends files to the server right from the interface: the user picks them in the system dialog or drags them onto the button, and the component shows the list of what was uploaded — with a status, progress, downloading and removal.

### Feedback (12)

- **CdsBadge** — A badge is a small marker in the corner of an element or next to it: a counter of unread messages, a "there is something new" dot, a short label.
- **CdsEmptyState** — An empty state explains why there is no content on the screen and suggests the next step: no search results, an empty list, a loading error.
- **CdsLoader** — A circular indeterminate loading indicator — a spinning ring without progress.
- **CdsNotification** — A notification is a block with a message about an event or a state: a successful save, a warning about a limit, a loading error.
- **CdsNotificationAlert** — A pop-up notification above the page — the counterpart of `CdsNotificationAlert` from CDS 3.
- **CdsProgressBar** — A linear progress indicator — a horizontal bar for the course of an operation: a file upload, the steps of a wizard, media playback.
- **CdsProgressCircle** — A circular progress indicator shows the course of an operation: a file upload, data processing, a filling quota.
- **CdsSkeletonLoader** — A skeleton shows the shape of the future content while the data is loading: instead of an empty screen the user immediately sees where the heading, the text and the buttons will appear.
- **CdsStages** — A stage bar shows the course of a business process: which stages are behind, which one is running now and where the process stopped because of an error.
- **CdsStatus** — A status is a non-interactive indicator of the state of an object: the request is paid, the document is under review, the payment is overdue.
- **CdsToast** — A toast is a pop-up notification about the result of an action: the changes are saved, the file is uploaded, the request failed.
- **CdsToastQueue** — A queue of pop-up notifications built on CdsToast.

### Layouts (8)

- **CdsDrawer** — The side panel of the application: navigation sections on the left, the context of a record or filters on the right.
- **CdsFooter** — The footer of the application: a copyright notice and utility links on regular pages, an action bar on forms.
- **CdsGrid** — A responsive modular grid: `CdsGrid`, `CdsRow` and `CdsCol` lay the content out in columns — from 4 on a phone to 16 on wide screens.
- **CdsHeader** — The header of the application: the title, the global search, notifications, the profile — everything that has to be at hand on any screen.
- **CdsLayout** — The frame of the application: `CdsLayout` places the header, the side drawers, the content and the footer, measures their sizes and takes the scrolling over.
- **CdsMain** — The main area of the application: `CdsMain` is the place where the content of the page lands.
- **CdsPage** — A page inside the layout: `CdsPage` gives the content a minimum height that accounts for the header and the footer, so a short page fills the whole screen instead of hanging as a narrow strip at the top.
- **CdsToolbar** — A horizontal bar with a title and actions: it fills the header and the footer of the application, and on a page it assembles the title of a section together with its buttons.

### Navigation (5)

- **CdsBreadcrumbs** — Breadcrumbs show the path to the current page in the hierarchy of sections and take you back to any level above in one click.
- **CdsLink** — A link sends the user somewhere else: to a neighboring page of the application, to an external service or to an email address.
- **CdsPagination** — Pagination splits a large data set into pages and helps you jump to the one you need: numbered buttons, "back" and "forward" arrows, jumps to the first and the last page, and a quick jump field.
- **CdsSteps** — The stepper walks the user through a multi-step process: it shows which steps are done, which one is active and how many are left.
- **CdsTabs** — Tabs split the screen into sections of equal weight and switch between them in place, without going to another page.

### Other (2)

- **CdsApp** — no description yet.
- **CdsDefaultsProvider** — no description yet.