💧 MistCSS

A new, better and faster way to write visual components.
~~CSS-in-JS?~~ Nope! JS-from-CSS 💖

Write your component in CSS only

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

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

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

Get a type-safe component… without writing TypeScript

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

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

MistCSS can generate ⚛️ React, 🚀 Astro and 🔥 Hono components. You can use 🍃 Tailwind CSS to style them.

What they say

Learn more

Read docs ✨