Skip to content
surface-elementsv0.1.0

Web componentsLight DOM0 dependencies

Interface surfaces, built on the platform.

Drawers, modals, sticky headers and accordions on native HTML. Light DOM, no framework, a few kilobytes each.

pnpm add surface-elements

Get startedView on GitHub
Try it

Cart

A native <dialog>. Esc, a click on the backdrop and the close button all animate out.

Menu

  • Home
  • Catalog
  • About

Filters

Bottom sheets size to their content up to –surface-drawer-max-size.

Search

Platform first

A drawer is a <dialog>. Invoker commands, closedby and <form method="dialog"> work with no JavaScript.

Pick your level

Use the CSS alone, the functions, or the web component. Each level builds on the one before.

Accessible by default

Light DOM keeps aria-labelledby and focus handling native. Reduced motion is respected.

Yours to style

Styles live in @layer surface-elements. Any unlayered rule wins, and --surface-drawer-* properties cover the rest.