# Open Props

Open CSS vars.

Source: [Console review](<https://console.dev/tools/open-props>)

Website: [https://open-props.style/](<https://open-props.style/>)

Profile updated: 2026-10-16

## Supported tech stack

Research checked: 2026-10-11

### Runs on

- Browser (Runtime)

### Integrates with

- CSS (Language)
- JavaScript (Language)

Source: [Research source](<https://open-props.style/>)

Documented compatibility; coverage may be incomplete. Written in describes implementation, not user-project language support.

Design tokens expose CSS custom properties and JavaScript exports.

## Console’s review — 2022-10-06

Reviewed: 2022-10-06

Author: [David Mytton](<https://console.dev/about#david-mytton>)

Citation: [This review](<https://console.dev/tools/open-props#review_cf0142a6439d0bb28cf331d0c32598e19729262648d328c07acdd08653f76d13>)

### What we like

Framework agnostic CSS variables with minimalist styling for all HTML elements. Includes dark+light mode. Supports CSS, PostCSS, JSON, or props as Javascript. Covers colors, gradients, typography, animations, media queries, and masks. Available via NPM, CDN, or CLI. Open source.

### Tradeoffs

Docs don’t provide quick “get started” examples, although the GitHub repo has example commands for generating output e.g. PostCSS files or minimized bundles.

This review reflects Console’s assessment at publication on 2022-10-06. Features and limitations may have changed since the review date.

## Is Open Props a fit?

Based on [Console’s review published on 2022-10-06](<https://console.dev/tools/open-props#review_cf0142a6439d0bb28cf331d0c32598e19729262648d328c07acdd08653f76d13>).

Summary updated: 2026-10-16

### Who it’s for

Developers using various frameworks should consider Open Props for styling tasks

### Why consider it

Open Props provides framework-agnostic CSS variables with minimalist styling for all HTML elements

### Keep in mind

The documentation lacks quick start examples

[Selection criteria](<https://console.dev/selection-criteria>) · [About Console](<https://console.dev/about>) · [Browse tools](<https://console.dev/tools>)