💧 MistCSS

Write components using CSS only

MistCSS is 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.

Documentation

https://typicode.github.io/mistcss

Supports

Bring your favorite tools:

• Next.js
• Remix
• React
• Vue
• Astro
• Hono
• Tailwind CSS