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.
./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;
}
}
}
mistcss ./src --target=react --watch
# It will create ./src/Button.mist.tsx
./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.