Skip to content
💧 MistCSS

💧 MistCSS

Create React, Vue or Astro components with 50% less code!
CSS-in-JS? Nope! JS-from-CSS 💖
Get Started View on GitHub

How does it work?

Coding visual component by hand can be quickly repetitive and error-prone.

With MistCSS, you write your component in CSS only.

Button.mist.css
@scope (button.custom-button) {
  :scope {
    background: black;
    color: white;


    &[data-variant='primary'] {
      background: blue;
    }


    &[data-variant='secondary'] {
      background: gray;
    }
  }
}

Then MistCSS will generate a type-safe component.

App.tsx
import { CustomButton } from './Button.mist'


export const App = () => (
  <CustomButton variant="primary">Save</CustomButton>
)

MistCSS can generate ⚛️ React, 💚 Vue, 🚀 Astro and 🔥 Hono components. You can even use 🍃 Tailwind CSS.

What they say

Learn more

Read docs ✨