MistCSS 🌬️

Write React 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>
)

Documentation

https://typicode.github.io/mistcss

Supports

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