Native widgets - Elements Manual

Styling for native HTML widgets that don't need a wrapper class: progress, meter, and details/summary. This is native.css in @layer components. Write the plain element; it comes out styled.

Progress

<progress> renders as a slim rounded bar on a --bg-muted track with an accent fill. Cross-browser fills are handled (WebKit and Firefox).

<progress value="0.6"></progress>
<progress value="30" max="100"></progress>

Meter

<meter> renders like progress but color-codes its value by range: the optimum range fills success-green, the sub-optimum warning-amber, and the worst range danger-red.

<meter value="0.9" low="0.3" high="0.7" optimum="1"></meter>

Details / summary

<details> gives a native disclosure. The <summary> is styled with a pointer cursor, medium weight, and a focus ring on :focus-visible. No class needed. The open/close behavior is native to the browser.

<details>
  <summary>Advanced options</summary>
  <p>Hidden until expanded.</p>
</details>