Skip to content

MistCSS

A new, better and faster way to write visual components.
CSS-in-JS? Nope! JS-from-CSS 💖

Write your component in CSS only

Button.mist.css
@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

App.tsx
import { CustomButton } from './Button.mist'
export const App = () => (
<CustomButton variant="primary">Save</CustomButton>
)

Read docs