← All libraries

Open Props

CSS
↗ Official site

CSS & styling

CSS custom properties (variables) for consistent design tokens.

What it does

Open Props is a collection of CSS custom properties — variables for spacing, colors, shadows, typography, and animations. Instead of picking values from scratch, you use pre-made tokens that look great together.

When to use it

Use this when you want design tokens without a full design system, especially for vanilla CSS or minimal projects.

Real example

You're building a minimal blog with vanilla CSS and want consistent spacing and typography. Prompt: 'Import open-props/style in your CSS. Style the article with padding: var(--size-6), font-size: var(--font-size-2). Use var(--shadow-2) for card shadows and var(--radius-3) for border-radius. Use @import "open-props/animations" and apply the var(--animation-fade-in) to the hero.'

Good to know

Works with any CSS approach — vanilla CSS, Sass, or alongside Tailwind. Very lightweight.

Alternatives

Install

$ npm install open-props

Use cases

design tokensCSS variablesdesign systemtheming

Language

CSS

Category

CSS & styling

More in CSS & styling

Other tools in the same category

JS NativeWind

Use Tailwind CSS classes in your React Native app.

mobile stylingTailwindReact Native
CSS Tailwind CSS

Style your UI with short utility classes directly in your HTML.

stylingutility CSSresponsive design
CSS UnoCSS

Instant, on-demand atomic CSS — like Tailwind but faster and more flexible.

utility CSSatomic CSSfast build
CSS Sass / SCSS

CSS with superpowers — variables, nesting, mixins, and more.

CSSstylingvariables