Complete Markdown extraction of the public OTTO component Storybook at https://www.otto.de/assets-storybook/ (Storybook 10.6.0, web components oc-*), fetched 28.09.2026.
Folders mirror the Storybook sidebar. Generated by scripts/storybook/; raw build files in source/storybook/; design tokens in tokens/.
Rules for generation
- Use only components marked Stable below, and only their latest version (tag with the highest
-vN). - Not Ready For Use components, CSS-only (deprecated) components, older component versions and attributes/slots marked Deprecated in an API table are NOT allowed for generation.
- Style with semantic design tokens (
--oc-semantic-*) and the Fragments utility classes; base tokens (--oc-base-*) only as references, never in production code (see Use design tokens). storybook/components.jsonholds the same table plus the full API per tag in machine-readable form.
Components
| Component | Group | Version | Tag | Status | Docs |
|---|---|---|---|---|---|
| Block | CSS-only Components | v1 | - | Deprecated, NOT allowed for generation | css-only-components/block/ |
| Link | CSS-only Components | v1 | - | Deprecated, NOT allowed for generation | css-only-components/link/ |
| Row | CSS-only Components | v1 | - | Deprecated, NOT allowed for generation | css-only-components/row/ |
| Accordion | Components | v1 | <oc-accordion-v1> |
Stable, allowed for generation | components/accordion/ |
| Action Signifier | Components | v1 | <oc-action-signifier-v1> |
Stable, allowed for generation | components/action-signifier/ |
| Auth Field | Components | v1 | <oc-auth-field-v1> |
Stable, allowed for generation | components/auth-field/ |
| Badge | Components | v2 | <oc-badge-v2> |
Stable, allowed for generation | components/badge/ |
| Badge | Components | v1 | <oc-badge-v1> |
Deprecated, NOT allowed for generation | components/badge/ |
| Banner | Components | v1 | <oc-banner-v1> |
Stable, allowed for generation | components/banner/ |
| Block | Components | v2 | <oc-block-v2> |
Stable, allowed for generation | components/block/ |
| Button | Components | v1 | <oc-button-v1> |
Stable, allowed for generation | components/button/ |
| Card | Components | v3 | <oc-card-v3> |
Stable, allowed for generation | components/card/ |
| Card | Components | v2 | <oc-card-v2> |
Deprecated, NOT allowed for generation | components/card/ |
| Carousel | Components | v1 | <oc-carousel-v1> |
Stable, allowed for generation | components/carousel/ |
| Chat Bubble | Components | v1 | <oc-chat-bubble-v1> |
Stable, allowed for generation | components/chat-bubble/ |
| Checkbox | Components | v2 | <oc-checkbox-v2> |
Stable, allowed for generation | components/checkbox/ |
| Checkbox | Components | v1 | <oc-checkbox-v1> |
Deprecated, NOT allowed for generation | components/checkbox/ |
| Chip | Components | v3 | <oc-chip-v3> |
Stable, allowed for generation | components/chip/ |
| Chip | Components | v2 | <oc-chip-v2> |
Deprecated, NOT allowed for generation | components/chip/ |
| Cinema | Components | v1 | <oc-cinema-v1> |
Stable, allowed for generation | components/cinema/ |
| Divider | Components | v1 | <oc-divider-v1> |
Stable, allowed for generation | components/divider/ |
| Dropdown | Components | v1 | <oc-dropdown-v1> |
Stable, allowed for generation | components/dropdown/ |
| Expander | Components | v1 | <oc-expander-v1> |
Stable, allowed for generation | components/expander/ |
| Floating Focus | Components | v1 | <oc-floating-focus-v1> |
Stable, allowed for generation | components/floating-focus/ |
| Focused Dialog | Components | v1 | <oc-focused-dialog-v1> |
Stable, allowed for generation | components/focused-dialog/ |
| Form Group | Components | v1 | <oc-form-group-v1> |
Stable, allowed for generation | components/form-group/ |
| Icon | Components | v1 | <oc-icon-v1> |
Stable, allowed for generation | components/icon/ |
| Icon Button | Components | v3 | <oc-icon-button-v3> |
Stable, allowed for generation | components/icon-button/ |
| Icon Button | Components | v2 | <oc-icon-button-v2> |
Deprecated, NOT allowed for generation | components/icon-button/ |
| Icon Button | Components | v1 | <oc-icon-button-v1> |
Deprecated, NOT allowed for generation | components/icon-button/ |
| Interactive Overlay | Components | v2 | <oc-interactive-overlay-v2> |
Stable, allowed for generation | components/interactive-overlay/ |
| Interactive Overlay | Components | v1 | <oc-interactive-overlay-v1> |
Deprecated, NOT allowed for generation | components/interactive-overlay/ |
| Link | Components | v2 | <oc-link-v2> |
Stable, allowed for generation | components/link/ |
| Logo | Components | v1 | <oc-logo-v1> |
Stable, allowed for generation | components/logo/ |
| Media Object Card | Components | v2 | <oc-media-object-card-v2> |
Stable, allowed for generation | components/media-object-card/ |
| Media Object Card | Components | v1 | <oc-media-object-card-v1> |
Deprecated, NOT allowed for generation | components/media-object-card/ |
| Paper Card | Components | v1 | <oc-paper-card-v1> |
Stable, allowed for generation | components/paper-card/ |
| Popover | Components | v1 | <oc-popover-v1> |
Stable, allowed for generation | components/popover/ |
| Progress Bar | Components | v1 | <oc-progress-bar-v1> |
Stable, allowed for generation | components/progress-bar/ |
| Promo Card | Components | v2 | <oc-promo-card-v2> |
Stable, allowed for generation | components/promo-card/ |
| Promo Card | Components | v1 | <oc-promo-card-v1> |
Deprecated, NOT allowed for generation | components/promo-card/ |
| Radio Button | Components | v2 | <oc-radio-button-v2> |
Stable, allowed for generation | components/radio-button/ |
| Radio Button | Components | v1 | <oc-radio-button-v1> |
Deprecated, NOT allowed for generation | components/radio-button/ |
| Row | Components | v2 | <oc-row-v2> |
Stable, allowed for generation | components/row/ |
| Search Field | Components | v1 | <oc-search-field-v1> |
Stable, allowed for generation | components/search-field/ |
| Selection Signifier | Components | v1 | <oc-selection-signifier-v1> |
Stable, allowed for generation | components/selection-signifier/ |
| Selection Tile | Components | v2 | <oc-selection-tile-v2> |
Stable, allowed for generation | components/selection-tile/ |
| Selection Tile | Components | v1 | <oc-selection-tile-v1> |
Deprecated, NOT allowed for generation | components/selection-tile/ |
| Sheet | Components | v1 | <oc-sheet-v1> |
Stable, allowed for generation | components/sheet/ |
| Skeleton | Components | v1 | <oc-skeleton-v1> |
Stable, allowed for generation | components/skeleton/ |
| Skip Link | Components | v1 | <oc-skip-link-v1> |
Stable, allowed for generation | components/skip-link/ |
| Snackbar | Components | v1 | <oc-snackbar-v1> |
Stable, allowed for generation | components/snackbar/ |
| Spinner | Components | v1 | <oc-spinner-v1> |
Stable, allowed for generation | components/spinner/ |
| Switch | Components | v3 | <oc-switch-v3> |
Stable, allowed for generation | components/switch/ |
| Switch | Components | v2 | <oc-switch-v2> |
Deprecated, NOT allowed for generation | components/switch/ |
| Tab Bar | Components | v1 | <oc-tab-bar-v1> |
Stable, allowed for generation | components/tab-bar/ |
| Tag | Components | v1 | <oc-tag-v1> |
Stable, allowed for generation | components/tag/ |
| Text Area | Components | v1 | <oc-text-area-v1> |
Stable, allowed for generation | components/text-area/ |
| Text Field | Components | v1 | <oc-text-field-v1> |
Stable, allowed for generation | components/text-field/ |
| Toggletip | Components | v1 | <oc-toggletip-v1> |
Stable, allowed for generation | components/toggletip/ |
| Tooltip | Components | v2 | <oc-tooltip-v2> |
Stable, allowed for generation | components/tooltip/ |
| Tooltip | Components | v1 | <oc-tooltip-v1> |
Deprecated, NOT allowed for generation | components/tooltip/ |
| Async fragment | Not Ready For Use | v1 | <oc-async-fragment-v1> |
Not Ready For Use, NOT allowed for generation | not-ready-for-use/async-fragment/ |
| Back to top button | Not Ready For Use | v1 | <oc-back-to-top-button-v1> |
Not Ready For Use, NOT allowed for generation | not-ready-for-use/back-to-top-button/ |
Counts: deprecated: 16, not-ready: 2, stable: 46
Documentation pages
| Page | Folder | Live |
|---|---|---|
| Getting Started/Introduction | getting-started/introduction/ | getting-started-introduction--overview |
| Getting Started/IDE support | getting-started/ide-support/ | getting-started-ide-support--overview |
| Getting Started/Include components | getting-started/include-components/ | getting-started-include-components--overview |
| Getting Started/About components | getting-started/about-components/ | getting-started-about-components--overview |
| Development/Use design tokens | development/use-design-tokens/ | development-use-design-tokens--overview |
| Development/Theming | development/theming/ | development-theming--overview |
| Development/Accessibility | development/accessibility/ | development-accessibility--overview |
| Development/Events | development/events/ | development-events--overview |
| Development/Siteframes | development/siteframes/ | development-siteframes--overview |
| Development/Visibility tracking | development/visibility-tracking/ | development-visibility-tracking--overview |
| Development/Testing utilities | development/testing-utilities/ | development-testing-utilities--overview |
| Development/Best Practices | development/best-practices/ | development-best-practices--overview |
| Development/Interactive component slots | development/interactive-component-slots/ | development-interactive-component-slots--overview |
| Development/Interactive elements and Shadow DOM | development/interactive-elements-and-shadow-dom/ | development-interactive-elements-and-shadow-dom--overview |
| Development/SEO/Headline structure | development/seo/headline-structure/ | development-seo-headline-structure--overview |
| Development/SEO/Optimization techniques | development/seo/optimization-techniques/ | development-seo-optimization-techniques--overview |
| Development/SEO/Optimization techniques (Deprecated) | development/seo/optimization-techniques-deprecated/ | development-seo-optimization-techniques-deprecated--overview |
| Development/Working with slots | development/working-with-slots/ | development-working-with-slots--overview |
| Fragments/Design tokens overview | fragments/design-tokens-overview/ | fragments-design-tokens-overview--overview |
| Fragments/Border radius | fragments/border-radius/ | fragments-border-radius--overview |
| Fragments/Color | fragments/color/ | fragments-color--overview |
| Fragments/Layout and spacing/Breakpoints | fragments/layout-and-spacing/breakpoints/ | fragments-layout-and-spacing-breakpoints--overview |
| Fragments/Layout and spacing/Gap | fragments/layout-and-spacing/gap/ | fragments-layout-and-spacing-gap--overview |
| Fragments/Layout and spacing/Grid | fragments/layout-and-spacing/grid/ | fragments-layout-and-spacing-grid--overview |
| Fragments/Layout and spacing/Spacing | fragments/layout-and-spacing/spacing/ | fragments-layout-and-spacing-spacing--overview |
| Fragments/List | fragments/list/ | fragments-list--overview |
| Fragments/Shadow | fragments/shadow/ | fragments-shadow--overview |
| Fragments/Typography | fragments/typography/ | fragments-typography--overview |
| Fragments/Typography/Copy | fragments/typography/copy/ | fragments-typography-copy--overview |
| Fragments/Typography/Headlines | fragments/typography/headlines/ | fragments-typography-headlines--overview |
| Fragments/Typography/Display | fragments/typography/display/ | fragments-typography-display--overview |
| Fragments/Visually Hidden | fragments/visually-hidden/ | fragments-visually-hidden--overview |
| Legal/Notice | legal/notice/ | legal-notice--overview |
| Tests/Chromatic | tests/chromatic/ | tests-chromatic--accordion-v-1 |
| Tests/Form | tests/form/ | tests-form--simple-form-submit |
| Tests/Interactive | tests/interactive/ | tests-interactive--deprecated-links |
Index coverage: 1173 entries (300 docs pages, 873 stories) in 87 folders.