?? 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 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
