Skip to content

πŸ’§ MistCSS

Create React, Vue or Astro components with 50% less code!
CSS-in-JS? Nope! JS-from-CSS πŸ’–

How does it work?

Coding visual component by hand can be quickly repetitive and error-prone.

With MistCSS, you 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;

Then MistCSS will generate a type-safe component.

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

MistCSS can generate βš›οΈ React, πŸ’š Vue, πŸš€ Astro and πŸ”₯ Hono components. You can even use πŸƒ Tailwind CSS.

What they say

Learn more

Read docs ✨