--- url: /appblocks-snapshots/MARKUP.md --- # `@civitai/components` — markup contract These components are **framework-agnostic**: the styling is driven entirely by `data-*` attributes, so any HTML that follows the contract below renders identically to the React bindings in `@civitai/components-react`. This document is the source of truth for external HTML authors. ## Setup Load the tokens **and** the component CSS (order-independent, but load both): ```html ``` Or, from JS: `import { injectStyles } from '@civitai/components'; injectStyles();` (injects both tokens and component CSS, idempotently). ## Theming Set `data-theme="light"` or `data-theme="dark"` on any ancestor (typically `` or the block root). All tokens re-resolve from that scope. Default (no attribute) is the light palette. ## Cascade / overriding Every shipped rule lives in `@layer civitai.components`. Your own **unlayered** CSS always beats it — no `!important`, no specificity war. Override a token locally by redeclaring the custom property (e.g. `style="--civitai-color-primary: #a259ff"`). *** ## Components Legend: **bold** = required attribute/element for correct styling + a11y. ### Button — `data-civitai-ui="button"` * Element: **` ``` ### TextInput — `data-civitai-ui="text-input"` * Wrapper **`
`** containing, in order: * **`
``` \