Stylesheet examples

Use StylesheetExample when a CSS directive changes the emitted stylesheet. The server compiles the literal source with the current preset and displays the complete result, including required variables and keyframes. The pair reuses DocumentCodeExample, including keyboard copy, visible focus and clipboard feedback. It does not execute a visual effect in the page.

@theme {  --color-brand: #4f46e5;}.card {  background-color: var(--color-brand);}

.card {  background-color: var(--color-brand);}@layer theme {  :root,  :host {    --color-brand: #4f46e5  }}

@theme {  --color-brand: #4f46e5;}@safelist "bg-brand";

@layer theme {  :root,  :host {    --color-brand: #4f46e5  }}@layer utilities {  .bg-brand {    background-color: var(--color-brand)  }}

@layer theme {  :root, :host {    --color-brand: #4f46e5;  }}@keyframes fade-in {  to { opacity: 1; }}

@layer theme {  :root,  :host {    --color-brand: #4f46e5;  }}@keyframes fade-in {  to {    opacity: 1;  }}

selector

An explicit native selector inside Theme declarations.

<StylesheetExample  title="A safelisted color token"  source={"@theme { --color-brand: #4f46e5;  }\n\n@safelist \"bg-brand\";"}/>

The component accepts a title and standalone CSS source. Use a fixture-backed example for imports, references or assets that need multiple files. Keep the compiler on the server, retain every source and result line in portable Markdown, and allow code to scroll within its own block. A build error must surface during documentation checks.

The token, safelist and native resource examples above share one presentation. DocumentOptions also accepts inline code and links in its description; its name and optional default stay separate. Both components belong outside measured demo layouts.

See Theme and variants, Managed definitions and Conditional blocks for working uses.