# Components

Standalone Angular components drawn in the website's language: flat, rule-framed or rule-topped, square-ish, built on the semantic tokens. Browse by category, or import any component from the barrel.

Import from `src/app/components/ui`:

```ts
import { DocsButtonComponent, DocsCardComponent } from '../components/ui';
```

- [Inputs & navigation](/design-system/components/inputs) — Buttons, form controls, toggles, the breadcrumb, and navigation chips & links. Button · Breadcrumb · Checkbox · Select · Toggle Group · Chip Nav · Next Steps · TOC List
- [Layout & structure](/design-system/components/layout) — The logo, containers, page scaffolding, steppers, and timelines. Logo · Card · Box Grid · Section Header · Page Header · Stepper · Step Card · Timeline · Concept Page Shell
- [Data display](/design-system/components/data-display) — Code, the live model preview, icons, badges, tables, and stats. Code Block · Model Preview · Icon · Icon Badge · Badge · Reference Table · Stat Tile
- [Content blocks](/design-system/components/content-blocks) — List rows, prompt bubbles, the scripted terminal, and preview states. Feature Item · Check List Item · Numbered List Item · Prompt Bubble · Scripted Terminal · Copy as Markdown · API Preview State
- [Disclosure](/design-system/components/disclosure) — Tabs, accordions, and carousels that show and hide content. Tabs · Accordion · Carousel
- [Feedback & overlays](/design-system/components/feedback) — Callouts, modal dialogs, and the image lightbox. Alert · Modal · Lightbox

## Site layout

Structural components that frame the whole site rather than a content section. They live in `src/app/components` and are composed by the docs layout, `(docs).page.ts`.

| Component | What it does |
| --- | --- |
| TopNavigationComponent, src/app/components/top-navigation.component.ts | The fixed 64px header on the rule: the logo, section menus, search, the theme toggle and Open Console. |
| SideNavigationComponent, src/app/components/side-navigation.component.ts | Section navigation with uppercase group labels; the current page is boxed in mint with a black border. A drawer on mobile. |
| ContentWrapperComponent, src/app/components/content-wrapper.component.ts | The content column: prose styles plus the code-tab, content-tab, Mermaid and heading-anchor directives. |
| TableOfContentsComponent, src/app/components/table-of-contents.component.ts | "On this page", built from the h2/h3 headings, with a mint square on the section in view. |