--- url: /apps/showcase.md description: >- Every custom element in @civitai/components, live and themed, with the CSS-only data-civitai-ui fallback where one exists. --- > Documentation index: https://developer.civitai.com/llms.txt — every page on this site has a markdown version at its URL + `.md`. # Component showcase A live tour of **`@civitai/components`**, component by component. Every section leads with the **`` custom element** — the default way to build a Civitai App's UI, and what `civitai app init` scaffolds. The elements style themselves in shadow DOM, inject the `@civitai/theme` tokens on first use and carry their own keyboard and ARIA behaviour, so they work the same in plain HTML, React, Vue, Svelte or Blazor. Where the package's stylesheet has the same component, a collapsed **CSS-only / no-JS** panel under the element shows it as hand-written `data-civitai-ui` markup. Reach for that only when a page must run no JavaScript: the markup is styling and nothing else, so focus handling, keyboard navigation and ARIA state are yours to write. A few sections carry no such panel — those elements have no stylesheet equivalent. Every preview is rendered from the code shown under it and follows the site's light/dark switch. ## Setup **Elements, no build step** — one script tag: ```html Generate ``` `site-elements.js` is the generic kit plus the Civitai vocabulary (rating badges, tags, reactions, media cards); `elements.js` is the generic kit alone. Neither defines `` or `` — see [Acting as the viewer](#acting-as-the-viewer). Building a Civitai App? [Using the elements in a block](https://developer.civitai.com/apps/guide/elements.md#register-the-elements) has the table of which import defines which elements, and the token limits that apply inside a block. **Elements, with a bundler:** ```bash npm install @civitai/components ``` ```ts import '@civitai/components/register-site'; // all but the two viewer elements, or: import '@civitai/components/civitai-button/define'; // one element at a time ``` **React** — `@civitai/components-react` wraps these same elements as typed components, with props and events from the element classes — see [Themed components in React](https://developer.civitai.com/apps/guide/theming.md#themed-components-in-react). **CSS-only** — load the tokens and the component stylesheet (order-independent), then set `data-theme="light"` or `data-theme="dark"` on any ancestor: ```html ``` The markup contract is in the [Components reference](https://developer.civitai.com/apps/reference/components.md). ### How the elements behave | | | |---|---| | **Attributes and properties** | Every attribute mirrors a property, kebab-cased: `full-width` ⇄ `fullWidth`. | | **Lists of options** | `select`, `segmented-control`, `radio-group`, `tabs` and `breadcrumb` take their items as a `data` **property**, since an attribute cannot carry an array. | | **Events** | `change` is re-dispatched from the host. Richer events (`vote`, `react`, `select`, `open`) carry a `detail`. | | **Forms** | Field elements are form-associated: `name`, `FormData`, `required`, `form.reset()`, `type="submit"` and Enter-to-submit all work. Setting `error` also makes the field invalid. | | **Theme** | Set `data-theme="light"` or `"dark"` on any ancestor. With neither, the dark palette applies. | | **Styling** | Override any `--civitai-*` token, or reach inside with `::part(...)`. | The full contract — every tag, attribute, property, event, slot and part — is the package's generated [`custom-elements.json`](https://cdn.jsdelivr.net/npm/@civitai/components/custom-elements.json). ## Button `variant`: `filled` · `light` · `outline` · `subtle`. `size`: `sm` · `md` · `lg`. `loading` shows a spinner and disables the button. `` joins its buttons into one control. \