### Install Open Props Beta using pnpm or npm

Source: https://open-props-ui.netlify.app/guide/getting-started

Instructions for installing the Open Props beta version (v2.0.0-beta.5) using either pnpm or npm package managers. This is a prerequisite for using Open Props UI.

```shell
# pnpm
pnpm add opbeta@npm:open-props@2.0.0-beta.5 -S

# npm
npm i opbeta@npm:open-props@2.0.0-beta.5 -S
```

--------------------------------

### NPM Installation for opui-css

Source: https://open-props-ui.netlify.app/guide/getting-started

This command shows how to install the opui-css package using pnpm or npm. It's a prerequisite for using the Open Props UI library in your project.

```sh
# pnpm
pnpm add opui-css -S

# npm
npm i opui-css -S

```

--------------------------------

### Importing Themes and Components (CSS)

Source: https://open-props-ui.netlify.app/guide/getting-started

This CSS snippet demonstrates how to import themes and specific components from the opui-css package. It shows how to import the default theme, a specific theme ('theme-one'), components only, and the Open Props setup.

```css
/* Import theme-two (default) */
@import "opui-css";

/* Import theme-one */
@import "opui-css/theme-one";

/* Import just the components for theme-one */
@import "opui-css/theme-one/components";

/* Import only the Open Props setup */
@import "opui-css/open-props";

```

--------------------------------

### Set Up OPUI Theme with Color Schemes and Typography

Source: https://open-props-ui.netlify.app/guide/getting-started

This CSS code snippet defines the core theme setup for OPUI, including light and dark color schemes, primary color variations, text and surface colors, shadows, and typography settings. It uses CSS custom properties and `light-dark()` for adaptive theming.

```css
/*
  theme one theme setup
*/
@layer theme {
  .light {
    --color-scheme: light;
  }
  .dark {
    --color-scheme: dark;
  }

  :where(html) {
    color-scheme: var(--color-scheme, light dark);

    --palette-hue: var(--oklch-teal);
    --palette-hue-rotate-by: 5;
    --palette-chroma: 0.89;

    /* Primary */
    --primary: var(--color-8);
    --primary-light: oklch(from var(--primary) calc(l * 1.25) c h);
    --primary-dark: oklch(from var(--primary) calc(l * 0.75) c h);
    --primary-contrast: var(--gray-1);

    /* Text */
    --text-color-1: light-dark(var(--gray-15), var(--gray-1));
    --text-color-1-contrast: light-dark(var(--gray-2), var(--gray-15));
    --text-color-2: light-dark(var(--gray-13), var(--gray-4));
    --text-color-2-contrast: light-dark(var(--gray-4), var(--gray-13));

    /* Surface */
    --surface-default: light-dark(var(--gray-1), var(--gray-13));
    --surface-filled: light-dark(var(--gray-3), var(--gray-15));
    --surface-tonal: light-dark(var(--gray-3), var(--gray-12));
    --surface-elevated: light-dark(var(--gray-1), var(--gray-12));

    /* Shadows */
    --shadow-color: light-dark(220 3% 15%, 220 40% 2%);
    --shadow-strength: light-dark(1%, 10%);
    --inner-shadow-highlight: light-dark(
      inset 0 -0.5px 0 0 #fff,
      inset 0 0.5px 0 0 #0001,
      inset 0 -0.5px 0 0 #fff1,
      inset 0 0.5px 0 0 #0007
    );

    /* Typography */
    --font-size-h1: var(--font-size-fluid-3, 3.5rem);
    --font-size-h2: var(--font-size-fluid-2, 2rem);
    --font-size-h3: var(--font-size-fluid-1, 1.5rem);
    --font-size-h4: var(--font-size-3, 1.25rem);
    --font-size-h5: var(--font-size-2, 1.1rem);
    --font-size-h6: var(--font-size-fluid-0, 1rem);
    --font-size-lg: var(--font-size-3, 1.25rem);
    --font-size-md: var(--font-size-fluid-0, 1rem);
    --font-size-sm: 0.875rem;
    --font-size-xs: var(--font-size-0, 0.75rem);

    /* Borders */
    --border-color: light-dark(var(--gray-4), var(--gray-12));
    --border-radius: var(--size-1);
    --border-width: 1px;

    /* Input Field */
    --field-border-color: var(--border-color);
    --field-border-radius: var(--size-1);
    --field-border-width: 1px;
    --field-size: 2.3lh;
    --field-size-small: 1.9lh;

    /* Button */
    --button-border-radius: var(--radius-round);
    /* Ripple effect */
    @media (prefers-reduced-motion: no-preference) {
      --button-ripple-size: 100%;
      --button-ripple-duration: 0.5s;
    }
  }

  /* Highlight colors */
  :where(.red, .error, del) {
    --palette-hue: var(--oklch-red, 25);
    --palette-chroma: 1;
    --palette-hue-rotate-by: 1;
  }
  :where(.blue, .ok, abbr, dfn) {
    --palette-hue: var(--oklch-blue, 210);
    --palette-chroma: 1;
    --palette-hue-rotate-by: 1;
  }
  :where(.green, .good, ins) {
    --palette-hue: var(--oklch-green, 145);
    --palette-chroma: 1;
    --palette-hue-rotate-by: 1;
  }
  :where(.orange, .warning) {
    --palette-hue: var(--oklch-orange, 75);
    --palette-chroma: 1;
    --palette-hue-rotate-by: 1;
  }

  :where(html) {
    --red: oklch(from var(--color-9) l 0.2 25);
    --blue: oklch(from var(--color-9) l 0.2 210);
    --green: oklch(from var(--color-9) l 0.2 145);
    --orange: oklch(from var(--color-7) l 0.2 75);
  }

  /* Gray palette */
  :where(html) {
    --gray-chroma: 0.01;
    --gray-lightness: 255;

    --gray-1: oklch(
      from var(--color-1) l var(--gray-chroma) var(--gray-lightness)
    );
    --gray-2: oklch(
      from var(--color-2) l var(--gray-chroma) var(--gray-lightness)
    );
    --gray-3: oklch(
      from var(--color-3) l var(--gray-chroma) var(--gray-lightness)
    );
```

--------------------------------

### Configure Open Props Imports for Theming and Utilities

Source: https://open-props-ui.netlify.app/guide/getting-started

This CSS code snippet shows how to import Open Props, including specific modules like media queries and sizes, along with the main index file and font line-height settings. It leverages layers for organization and specifies the path to the Open Props CSS files.

```css
/*
* Open Props
* Import as many props as you need here.
* https://unpkg.com/browse/open-props@2.0.0-beta.5/css
*/
@import "open-props/css/media-queries.css";
@import "open-props/index.css" layer(openprops);
@import "open-props/css/sizes/media.css" layer(openprops);
@import "open-props/css/font/lineheight.css" layer(openprops);
@import "open-props/hues.oklch.css" layer(openprops);
```

--------------------------------

### HTML Blockquote Element Example

Source: https://open-props-ui.netlify.app/components/typography

Shows the correct usage of the HTML blockquote element for representing quoted text, including an optional footer for attribution. The example includes a quote and its source.

```html
<blockquote>
  "Occupy your mind, don't stay home. Talk to all your friends, but don't look at your phone”
  <footer>
    — Marika Hackman, <cite>No Caffeine</cite>
  </footer>
</blockquote>
```

--------------------------------

### HTML Inline Text Elements Examples

Source: https://open-props-ui.netlify.app/components/typography

Provides examples of various HTML inline text elements for semantic and stylistic purposes, including abbreviations, definitions, bold, italic, deleted, inserted, keyboard input, highlighted text, strikethrough, small text, subscript, superscript, and underline.

```html
Abbr.| `<abbr>`
Definition| `<dfn>`
**Bold**| `<strong>` , `<b>`
_Italic_| `<i>` , `<em>`, `<cite>`
~~Deleted~~| `<del>`
Inserted| `<ins>`
`Ctrl + S`| `<kbd>`
Highlighted| `<mark>`
~~Strikethrough~~| `<s>`
Small| `<small>`
Text Sub| `<sub>`
Text Sup| `<sup>`
 _Underline_| `<u>`
```

--------------------------------

### List Item with Start Video (HTML)

Source: https://open-props-ui.netlify.app/components/list

Illustrates embedding a video in the start section of a list item. The `div.start` contains a `<video>` element, useful for media-rich lists.

```html
<li>
  <div class="start">
    <video><source /></video>
  </div>

  <div class="text">
    <p>Headline</p>
    <p>Supporting text</p>
  </div>
</li>
```

--------------------------------

### Chip Anatomy Example (HTML)

Source: https://open-props-ui.netlify.app/components/chip

Provides a basic HTML example illustrating the anatomy of a Chip component, including the container, text, and an optional SVG icon.

```html
<div class="chip">
  <svg></svg>
  <span class="text">Text</span>
</div>
```

--------------------------------

### CSS Utilities for Open Props UI

Source: https://open-props-ui.netlify.app/guide/getting-started

This CSS snippet defines utility classes for Open Props UI, including styles for focus indicators, interactive elements, and responsive image sizing. It leverages CSS variables for customization and ensures accessibility with focus-visible states.

```css
@layer base {
  :where(html) {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
  }

  :where(body) {
    margin: 0;
    font-family: var(--font-family-system);
    background-color: var(--color-white);
    color: var(--color-black);
  }

  :where(a) {
    text-decoration: none;
    color: inherit;
  }

  :where(a:hover) {
    text-decoration: underline;
  }

  :where(h1, h2, h3, h4, h5, h6) {
    margin: 0;
    font-weight: var(--font-weight-bold);
  }

  :where(p) {
    margin: 0;
  }

  :where(button) {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
  }

  :where(input, textarea, select) {
    font: inherit;
    color: inherit;
    border: none;
    padding: 0;
  }

  :where(input, textarea) {
    outline-offset: var(--outline-offset, 0px);
  }

  :where(:not(:active):focus-visible) {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
    transition-duration: 0.15s;
  }

  :where(:not(:active):focus-visible) {
    outline-offset: var(--outline-offset, 0px);
  }

  :where(
      a[href],
      area,
      button,
      input:not(
          [type="text"],
          [type="email"],
          [type="number"],
          [type="password"],
          [type=""],
          [type="tel"],
          [type="url"]
        ),
      label[for],
      select,
      summary
    ) {
    cursor: pointer;
  }

  :where(
      a[href],
      area,
      button,
      [role="button"],
      input,
      label[for],
      select,
      summary,
      textarea,
      [tabindex]:not([tabindex*="-"])
    ) {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  :where(img, svg, video, canvas, audio, iframe, embed, object) {
    display: block;
  }

  :where(img, svg, video) {
    block-size: auto;
    max-inline-size: 100%;
  }

  :where(svg:not([width])) {
    inline-size: var(--size-7);
  }

  :where(dt:not(:first-of-type)) {
    margin-block-start: var(--size-5);
  }

  :where(figure) {
    display: grid;
    gap: var(--size-2);
    place-items: center;
  }

  :target {
    scroll-margin-block-start: 2rem;
  }
}

```

--------------------------------

### CSS Theme Setup with Color Variables

Source: https://open-props-ui.netlify.app/guide/getting-started/theme

Sets up global CSS variables for a theme, including color schemes, primary colors, text colors, surface colors, and shadows. It utilizes `light-dark()` for theme-dependent values and `oklch()` for color manipulation. This snippet is crucial for defining the visual identity of the UI.

```css
/*
  theme one theme setup
*/
@layer theme {
  .light {
    --color-scheme: light;
  }
  .dark {
    --color-scheme: dark;
  }

  :where(html) {
    color-scheme: var(--color-scheme, light dark);

    --palette-hue: var(--oklch-teal);
    --palette-hue-rotate-by: 5;
    --palette-chroma: 0.89;

    /* Primary */
    --primary: var(--color-8);
    --primary-light: oklch(from var(--primary) calc(l * 1.25) c h);
    --primary-dark: oklch(from var(--primary) calc(l * 0.75) c h);
    --primary-contrast: var(--gray-1);

    /* Text */
    --text-color-1: light-dark(var(--gray-15), var(--gray-1));
    --text-color-1-contrast: light-dark(var(--gray-2), var(--gray-15));
    --text-color-2: light-dark(var(--gray-13), var(--gray-4));
    --text-color-2-contrast: light-dark(var(--gray-4), var(--gray-13));

    /* Surface */
    --surface-default: light-dark(var(--gray-1), var(--gray-13));
    --surface-filled: light-dark(var(--gray-3), var(--gray-15));
    --surface-tonal: light-dark(var(--gray-3), var(--gray-12));
    --surface-elevated: light-dark(var(--gray-1), var(--gray-12));

    /* Shadows */
    --shadow-color: light-dark(220 3% 15%, 220 40% 2%);
    --shadow-strength: light-dark(1%, 10%);
    --inner-shadow-highlight: light-dark(
      inset 0 -0.5px 0 0 #fff,
      inset 0 0.5px 0 0 #0001,
      inset 0 -0.5px 0 0 #fff1,
      inset 0 0.5px 0 0 #0007
    );

    /* Typography */
    --font-size-h1: var(--font-size-fluid-3, 3.5rem);
    --font-size-h2: var(--font-size-fluid-2, 2rem);
    --font-size-h3: var(--font-size-fluid-1, 1.5rem);
    --font-size-h4: var(--font-size-3, 1.25rem);
    --font-size-h5: var(--font-size-2, 1.1rem);
    --font-size-h6: var(--font-size-fluid-0, 1rem);
    --font-size-lg: var(--font-size-3, 1.25rem);
    --font-size-md: var(--font-size-fluid-0, 1rem);
    --font-size-sm: 0.875rem;
    --font-size-xs: var(--font-size-0, 0.75rem);

    /* Borders */
    --border-color: light-dark(var(--gray-4), var(--gray-12));
    --border-radius: var(--size-1);
    --border-width: 1px;

    /* Input Field */
    --field-border-color: var(--border-color);
    --field-border-radius: var(--size-1);
    --field-border-width: 1px;
    --field-size: 2.3lh;
    --field-size-small: 1.9lh;

    /* Button */
    --button-border-radius: var(--radius-round);
    /* Ripple effect */
    @media (prefers-reduced-motion: no-preference) {
      --button-ripple-size: 100%;
      --button-ripple-duration: 0.5s;
    }
  }

  /* Highlight colors */
  :where(.red, .error, del) {
    --palette-hue: var(--oklch-red, 25);
    --palette-chroma: 1;
    --palette-hue-rotate-by: 1;
  }
  :where(.blue, .ok, abbr, dfn) {
    --palette-hue: var(--oklch-blue, 210);
    --palette-chroma: 1;
    --palette-hue-rotate-by: 1;
  }
  :where(.green, .good, ins) {
    --palette-hue: var(--oklch-green, 145);
    --palette-chroma: 1;
    --palette-hue-rotate-by: 1;
  }
  :where(.orange, .warning) {
    --palette-hue: var(--oklch-orange, 75);
    --palette-chroma: 1;
    --palette-hue-rotate-by: 1;
  }

  :where(html) {
    --red: oklch(from var(--color-9) l 0.2 25);
    --blue: oklch(from var(--color-9) l 0.2 210);
    --green: oklch(from var(--color-9) l 0.2 145);
    --orange: oklch(from var(--color-7) l 0.2 75);
  }

  /* Gray palette */
  :where(html) {
    --gray-chroma: 0.01;
    --gray-lightness: 255;

    --gray-1: oklch(
      from var(--color-1) l var(--gray-chroma) var(--gray-lightness)
    );
    --gray-2: oklch(
      from var(--color-2) l var(--gray-chroma) var(--gray-lightness)
    );
    --gray-3: oklch(
      from var(--color-3) l var(--gray-chroma) var(--gray-lightness)
    );
    --gray-4: oklch(
      from var(--color-4) l var(--gray-chroma) var(--gray-lightness)
    );
    --gray-5: oklch(
      from var(--color-5) l var(--gray-chroma) var(--gray-lightness)
    );
    --gray-6: oklch(
      from var(--color-6) l var(--gray-chroma) var(--gray-lightness)
    );
    --gray-7: oklch(
      from var(--color-7) l var(--gray-chroma) var(--gray-lightness)
    );
    --gray-8: oklch(
      from var(--color-8) l var(--gray-chroma) var(--gray-lightness)
    );
    --gray-9: oklch(
      from var(--color-9) l var(--gray-chroma) var(--gray-lightness)
    );
    --gray-10: oklch(
      from var(--color-10) l var(--gray-chroma) var(--gray-lightness)
    );
    --gray-11: oklch(
      from var(--color-11) l var(--gray-chroma) var(--gray-lightness)
    );
    --gray-12: oklch(
      from var(--color-12) l var(--gray-chroma) var(--gray-lightness)
    );
    --gray-13: oklch(
      from var(--color-13) l var(--gray-chroma) var(--gray-lightness)
    );
    --gray-14: oklch(
      from var(--color-14) l var(--gray-chroma) var(--gray-lightness)
    );
    --gray-15: oklch(
      from var(--color-15) l var(--gray-chroma) var(--gray-lightness)
    );
    --gray-16: oklch(

```

--------------------------------

### HTML Headings and Body Text Examples

Source: https://open-props-ui.netlify.app/components/typography

Demonstrates the usage of HTML heading tags (h1-h6) and paragraph classes for different text sizes like 'Body Large', 'Body', 'Overline', and 'Caption'.

```html
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p class="large">Body Large</p>
<p>Body</p>
<p class="overline">Overline</p>
<caption>
  Caption
</caption>
```

--------------------------------

### PostCSS Configuration for opui-css Imports

Source: https://open-props-ui.netlify.app/guide/getting-started

This JavaScript code configures PostCSS to handle imports from `node_modules`, which is necessary for using the `opui-css` package with bundlers other than Vite. It specifically enables the `postcss-import` plugin.

```javascript
export default {
  plugins: {
    "postcss-import": {},
  },
}

```

--------------------------------

### CSS Theme Setup for 'theme-one'

Source: https://open-props-ui.netlify.app/guide/getting-started/theme

This CSS code defines the 'theme-one' setup, including color schemes for light and dark modes, primary and text colors, surface and shadow properties, typography, borders, and input field styles. It uses CSS custom properties (variables) for easy theming and customization.

```css
/*
  theme two theme setup
*/
@layer theme {
  .light {
    --color-scheme: light;
  }
  .dark {
    --color-scheme: dark;
  }

  :where(html) {
    color-scheme: var(--color-scheme, light dark);

    --palette-hue: var(--oklch-orange);
    --palette-hue-rotate-by: 0;
    --palette-chroma: 0.89;

    /* Primary */
    --primary: var(--color-8);
    --primary-light: oklch(from var(--primary) calc(l * 1.25) c h);
    --primary-dark: oklch(from var(--primary) calc(l * 0.75) c h);
    --primary-contrast: var(--gray-1);

    /* Text */
    --text-color-1: light-dark(var(--gray-15), var(--gray-1));
    --text-color-1-contrast: light-dark(var(--gray-2), var(--gray-15));
    --text-color-2: light-dark(var(--gray-13), var(--gray-4));
    --text-color-2-contrast: light-dark(var(--gray-4), var(--gray-13));

    /* Surface */
    --surface-default: light-dark(var(--gray-1), var(--gray-13));
    --surface-filled: light-dark(var(--gray-3), var(--gray-15));
    --surface-tonal: light-dark(var(--gray-3), var(--gray-12));
    --surface-elevated: light-dark(var(--gray-1), var(--gray-12));

    /* Shadows */
    --shadow-color: light-dark(220 3% 15%, 220 40% 2%);
    --shadow-strength: light-dark(1%, 10%);
    --inner-shadow-highlight: light-dark(
      inset 0 -0.5px 0 0 #fff,
      inset 0 0.5px 0 0 #0001,
      inset 0 -0.5px 0 0 #fff1,
      inset 0 0.5px 0 0 #0007
    );

    /* Typography */
    --font-size-h1: var(--font-size-fluid-3, 3.5rem);
    --font-size-h2: var(--font-size-fluid-2, 2rem);
    --font-size-h3: var(--font-size-fluid-1, 1.5rem);
    --font-size-h4: var(--font-size-3, 1.25rem);
    --font-size-h5: var(--font-size-2, 1.1rem);
    --font-size-h6: var(--font-size-fluid-0, 1rem);
    --font-size-lg: var(--font-size-3, 1.25rem);
    --font-size-md: var(--font-size-fluid-0, 1rem);
    --font-size-sm: 0.875rem;
    --font-size-xs: var(--font-size-0, 0.75rem);

    /* Borders */
    --border-color: light-dark(var(--gray-4), var(--gray-12));
    --border-radius: var(--size-2);
    --border-width: 1px;

    /* Input Field */
    --field-border-color: var(--border-color);
    --field-border-radius: var(--size-2);
    --field-border-width: 1px;
    --field-size: 2.3lh;
    --field-size-small: 1.9lh;

    /* Button */
    --button-border-radius: var(--size-2);
  }

  /* Highlight colors */
  :where(.red, .error, del) {
    --palette-hue: var(--oklch-red, 25);
    --palette-chroma: 1;
    --palette-hue-rotate-by: 1;
  }
  :where(.blue, .ok, abbr, dfn) {
    --palette-hue: var(--oklch-blue, 210);
    --palette-chroma: 1;
    --palette-hue-rotate-by: 1;
  }
  :where(.green, .good, ins) {
    --palette-hue: var(--oklch-green, 145);
    --palette-chroma: 1;
    --palette-hue-rotate-by: 1;
  }
  :where(.orange, .warning) {
    --palette-hue: var(--oklch-orange, 75);
    --palette-chroma: 1;
    --palette-hue-rotate-by: 1;
  }

  :where(html) {
    --red: oklch(from var(--color-9) l 0.2 25);
    --blue: oklch(from var(--color-9) l 0.2 210);
    --green: oklch(from var(--color-9) l 0.2 145);
    --orange: oklch(from var(--color-7) l 0.2 75);
  }

  /* Gray palette */
  :where(html) {
    --gray-chroma: 0.01;
    --gray-lightness: 255;

    --gray-1: oklch(
      from var(--color-1) l var(--gray-chroma) var(--gray-lightness)
    );
    --gray-2: oklch(
      from var(--color-2) l var(--gray-chroma) var(--gray-lightness)
    );
    --gray-3: oklch(
      from var(--color-3) l var(--gray-chroma) var(--gray-lightness)
    );
    --gray-4: oklch(
      from var(--color-4) l var(--gray-chroma) var(--gray-lightness)
    );
    --gray-5: oklch(
      from var(--color-5) l var(--gray-chroma) var(--gray-lightness)
    );
    --gray-6: oklch(
      from var(--color-6) l var(--gray-chroma) var(--gray-lightness)
    );
    --gray-7: oklch(
      from var(--color-7) l var(--gray-chroma) var(--gray-lightness)
    );
    --gray-8: oklch(
      from var(--color-8) l var(--gray-chroma) var(--gray-lightness)
    );
    --gray-9: oklch(
      from var(--color-9) l var(--gray-chroma) var(--gray-lightness)
    );
    --gray-10: oklch(
      from var(--color-10) l var(--gray-chroma) var(--gray-lightness)
    );
    --gray-11: oklch(
      from var(--color-11) l var(--gray-chroma) var(--gray-lightness)
    );
    --gray-12: oklch(
      from var(--color-12) l var(--gray-chroma) var(--gray-lightness)
    );
    --gray-13: oklch(
      from var(--color-13) l var(--gray-chroma) var(--gray-lightness)
    );
    --gray-14: oklch(
      from var(--color-14) l var(--gray-chroma) var(--gray-lightness)
    );
    --gray-15: oklch(
      from var(--color-15) l var(--gray-chroma) var(--gray-lightness)
    );
    --gray-16: oklch(
      from var(--color-16) l var(--gray-chroma) var(--gray-lightness)
    );
  }
}
```

--------------------------------

### HTML hgroup Element Example

Source: https://open-props-ui.netlify.app/components/typography

Illustrates the structure of the HTML hgroup element, which can contain zero or more paragraph elements followed by a heading element, and then zero or more paragraph elements.

```html
<hgroup>
  <p>Zero or more p elements</p>
  <h2>Followed by one h* element</h2>
  <p>Followed by zero or more p elements</p>
</hgroup>
```

--------------------------------

### List Item with Start Avatar (HTML)

Source: https://open-props-ui.netlify.app/components/list

Demonstrates using an avatar in the start section of a list item. The `div.start` contains a `div.avatar`, often used for user profiles or representative images.

```html
<li>
  <div class="start">
    <div class="avatar"></div>
  </div>

  <div class="text">
    <p>Headline</p>
  </div>
</li>
```

--------------------------------

### List Item with Start Image (HTML)

Source: https://open-props-ui.netlify.app/components/list

Shows how to embed an image in the start section of a list item. The `div.start` contains an `<img>` tag, suitable for visual content preceding the main text.

```html
<li>
  <div class="start">
    <img />
  </div>

  <div class="text">
    <p>Headline</p>
    <p>Supporting text</p>
  </div>
</li>
```

--------------------------------

### CSS Normalization Styles

Source: https://open-props-ui.netlify.app/guide/getting-started

Applies a set of normalization styles to ensure consistent rendering across different browsers. It sets `box-sizing` to `border-box`, defines base typography, and includes accessibility features like `focus-visible` outlines and smooth scrolling.

```css
@layer normalize {
  *,
  ::before,
  ::after {
    /* Set box sizing instead of inheriting */
    /* https://www.oddbird.net/2025/09/04/box-model/ */
    box-sizing: border-box;
  }

  * {
    scrollbar-width: thin;
  }

  :where(html) {
    --_page-bg-color: var(--surface-default);

    accent-color: var(--primary);
    background-color: var(--_page-bg-color);
    block-size: 100%;
    caret-color: var(--primary);
    color: var(--text-color-2);
    font-family: var(--font-sans);
    interpolate-size: allow-keywords;
    line-height: var(--font-lineheight-4);

    /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;

    @media (--motionOK) {
      scroll-behavior: smooth;
    }
  }

  :where(body) {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    container-type: inline-size;
    font-size: 16px;
    font-synthesis: style;
    font-weight: 400;
    inline-size: 100%;
    margin: 0;
    min-block-size: 100%;
    min-inline-size: 320px;
    position: relative;
    text-rendering: optimizeLegibility;
  }

  /* TODO */
  :where(:not(dialog, popover)) {
    margin: 0;
  }

  :where(:not(fieldset, progress, meter)) {
    background-origin: border-box;
    background-repeat: no-repeat;
    border-style: solid;
    border-width: 0;
  }

  :where(fieldset) {
    border: var(--field-border-width) solid var(--field-border-color);
    border-radius: var(--field-border-radius);
    padding: var(--size-3);
    display: grid;
    gap: var(--size-3);
  }

  :where(input, button, textarea),
  :where(input[type="file"])::-webkit-file-upload-button {
    color: inherit;
    font-size: inherit;
    font: inherit;
    letter-spacing: inherit;
  }

  :where(input):-webkit-autofill,
  :where(input):-webkit-autofill:hover,
  :where(input):-webkit-autofill:focus,
  :where(textarea):-webkit-autofill,
  :where(textarea):-webkit-autofill:hover,
  :where(textarea):-webkit-autofill:focus,
  :where(select):-webkit-autofill,
  :where(select):-webkit-autofill:hover,
  :where(select):-webkit-autofill:focus,
  :where(input):autofill,
  :where(input):autofill:hover,
  :where(input):autofill:focus,
  :where(textarea):autofill,
  :where(textarea):autofill:hover,
  :where(textarea):autofill:focus,
  :where(select):autofill,
  :where(select):autofill:hover,
  :where(select):autofill:focus {
    -webkit-text-fill-color: var(--text-color-2);
    -webkit-box-shadow: 0 0 0px 1e5px var(--well-1) inset;
    transition: background-color 5000s ease-in-out 0s;
  }

  ::placeholder {
    color: var(--text-color-2);
  }

  ::-moz-placeholder {
    opacity: 1;
  }

  :focus-visible {
    /* Inverts the --_page-bg-color */
    --_focus-visible-color: rgb(
      from var(--_page-bg-color) calc(255 - r) calc(255 - g) calc(255 - b)
    );

    border-radius: var(--border-radius, 0px);
    outline: 2px solid var(--_focus-visible-color);
    outline-offset: 2px;
  }

  @media (--motionOK) {
    :where(:focus-visible) {

```

--------------------------------

### List Item with Start Icon (HTML)

Source: https://open-props-ui.netlify.app/components/list

Illustrates how to include an icon in the start section of a list item using a `div.start` element containing an SVG. This is used for visual cues or indicators.

```html
<li>
  <div class="start">
    <svg></svg>
  </div>

  <div class="text">
    <p>Headline</p>
  </div>
</li>
```

--------------------------------

### Small Switch Variant (HTML)

Source: https://open-props-ui.netlify.app/components/switch

Provides an example of how to create a smaller variant of the switch component by applying the `.small` class to the parent label.

```html
<label class="switch small">
  <!--  -->
</label>

<label class="switch">
  <!-- -->
</label>
```

--------------------------------

### Chip as Link (HTML)

Source: https://open-props-ui.netlify.app/components/chip

Demonstrates using the Chip component as a hyperlink, including examples for chips with and without an accompanying icon.

```html
<a href="#" class="chip">
  <span class="text">Without icon</span>
</a>

<a href="#" class="chip">
  <span class="text">With icon</span>
  <svg></svg>
</a>
```

--------------------------------

### Configure Light and Dark Themes in CSS

Source: https://open-props-ui.netlify.app/guide/getting-started

This CSS code configures theme settings, including color schemes and primary color variations. It defines CSS variables for text, surfaces, shadows, typography sizes, borders, and input fields, adapting them for both light and dark modes using `light-dark()`. This enables a dynamic and accessible user interface.

```css
/*
  theme two theme setup
*/
@layer theme {
  .light {
    --color-scheme: light;
  }
  .dark {
    --color-scheme: dark;
  }

  :where(html) {
    color-scheme: var(--color-scheme, light dark);

    --palette-hue: var(--oklch-orange);
    --palette-hue-rotate-by: 0;
    --palette-chroma: 0.89;

    /* Primary */
    --primary: var(--color-8);
    --primary-light: oklch(from var(--primary) calc(l * 1.25) c h);
    --primary-dark: oklch(from var(--primary) calc(l * 0.75) c h);
    --primary-contrast: var(--gray-1);

    /* Text */
    --text-color-1: light-dark(var(--gray-15), var(--gray-1));
    --text-color-1-contrast: light-dark(var(--gray-2), var(--gray-15));
    --text-color-2: light-dark(var(--gray-13), var(--gray-4));
    --text-color-2-contrast: light-dark(var(--gray-4), var(--gray-13));

    /* Surface */
    --surface-default: light-dark(var(--gray-1), var(--gray-13));
    --surface-filled: light-dark(var(--gray-3), var(--gray-15));
    --surface-tonal: light-dark(var(--gray-3), var(--gray-12));
    --surface-elevated: light-dark(var(--gray-1), var(--gray-12));

    /* Shadows */
    --shadow-color: light-dark(220 3% 15%, 220 40% 2%);
    --shadow-strength: light-dark(1%, 10%);
    --inner-shadow-highlight: light-dark(
      inset 0 -0.5px 0 0 #fff,
      inset 0 0.5px 0 0 #0001,
      inset 0 -0.5px 0 0 #fff1,
      inset 0 0.5px 0 0 #0007
    );

    /* Typography */
    --font-size-h1: var(--font-size-fluid-3, 3.5rem);
    --font-size-h2: var(--font-size-fluid-2, 2rem);
    --font-size-h3: var(--font-size-fluid-1, 1.5rem);
    --font-size-h4: var(--font-size-3, 1.25rem);
    --font-size-h5: var(--font-size-2, 1.1rem);
    --font-size-h6: var(--font-size-fluid-0, 1rem);
    --font-size-lg: var(--font-size-3, 1.25rem);
    --font-size-md: var(--font-size-fluid-0, 1rem);
    --font-size-sm: 0.875rem;
    --font-size-xs: var(--font-size-0, 0.75rem);

    /* Borders */
    --border-color: light-dark(var(--gray-4), var(--gray-12));
    --border-radius: var(--size-2);
    --border-width: 1px;

    /* Input Field */
    --field-border-color: var(--border-color);
    --field-border-radius: var(--size-2);
    --field-border-width: 1px;
    --field-size: 2.3lh;
    --field-size-small: 1.9lh;

    /* Button */
    --button-border-radius: var(--size-2);
  }

  /* Highlight colors */
  :where(.red, .error, del) {
    --palette-hue: var(--oklch-red, 25);
    --palette-chroma: 1;
    --palette-hue-rotate-by: 1;
  }
  :where(.blue, .ok, abbr, dfn) {
    --palette-hue: var(--oklch-blue, 210);
    --palette-chroma: 1;
    --palette-hue-rotate-by: 1;
  }
  :where(.green, .good, ins) {
    --palette-hue: var(--oklch-green, 145);
    --palette-chroma: 1;
    --palette-hue-rotate-by: 1;
  }
  :where(.orange, .warning) {
    --palette-hue: var(--oklch-orange, 75);
    --palette-chroma: 1;
    --palette-hue-rotate-by: 1;
  }

  :where(html) {
    --red: oklch(from var(--color-9) l 0.2 25);
    --blue: oklch(from var(--color-9) l 0.2 210);
    --green: oklch(from var(--color-9) l 0.2 145);
    --orange: oklch(from var(--color-7) l 0.2 75);
  }
}
```

--------------------------------

### Chip as Button (HTML)

Source: https://open-props-ui.netlify.app/components/chip

Shows how the Chip component can be used as a button, with examples for chips that contain only text and those that include an icon.

```html
<button class="chip">
  <span class="text">Without icon</span>
</button>

<button class="chip">
  <svg></svg>
  <span class="text">With icon</span>
</button>
```