Open Props UI

Open Props UI (I’m gonna call it OPUI here) is a set of excellent and quality grab and go components built on top of the Open Props variables. They bring the bones and the skin, Open Props is the shared biology.

<label class="switch" aria-label="Label">
  <input type="checkbox" role="switch" />
</label>

Step 1. Open Props

@import "https://unpkg.com/open-props@beta";

or

npm i open-props@beta

@import "open-props/style";

Step 2: Copy & Paste

Steal the base files:

@layer openprops, normalize, utils, theme, components.base, components.has-deps;

/* Open Props */
@import "open-props/css/media-queries.css" layer(openprops);
@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/css/color/hues.oklch.css" layer(openprops);

/* Normalize */
@import "./normalize.css";

/* Utils */
@import "./utils.css";

/* Theme */
@import "./theme.css";

Follow the getting started guide here for the full files to steal.

Step 3: Go shopping

Could also call this the “more copy and paste” step, but more fun to call it shopping right!?

Browse all the components. Copy and paste the provided HTML and “installation” styles into your setup, and you’re done.

Here’s the switch!

<label class="switch" aria-label="Label">
  <input type="checkbox" role="switch" />
</label>

And here’s the text input!

<label class="field filled">
  <span class="label">Label</span>
  <input type="text" placeholder="Placeholder" />
</label>

I could keep stealing if I wanted, taking what I need as I need it in my project.

Pretty rad!