💧 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.

1. Write your component in CSS only

./src/Button.mist.css

@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;
    }
  }
}

2. Run MistCSS codegen

mistcss ./src --target=react --watch
# It will create ./src/Button.mist.tsx

3. Get a type-safe component without writing TypeScript

./src/App.tsx

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

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

    {/* TypeScript will catch the error */}
    <CustomButton variant="tertiary">Cancel</CustomButton>
  </>
)

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

Documentation

https://typicode.github.io/mistcss

Supports

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