💧 MistCSS

Create components with 50% less code

MistCSS is a new, better and faster way to write visual components. ~~CSS-in-JS~~? Nope! JS-from-CSS 👍

All major frameworks are supported.

Write your component in CSS only

This CSS is the only code you'll write for your component.

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

    /* Define component's props directly in your CSS 👇 */
    &[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, 💚 Vue, 🚀 Astro and 🔥 Hono components. You can use 🍃 Tailwind CSS to style them.

Documentation

https://typicode.github.io/mistcss

Supports

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