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 👍

View the site to learn more.

Supports Next.js, Remix and TailwindCSS. More to come.

Paragraph.mist.css

``css
@scope (.paragraph) {
p:scope {
color: black;

&[data-error] {
color: red;
}
}
}
`

App.jsx

`jsx
import { Paragraph } from 'Paragraph.mist'

export default const App = () => (


I'm a React component written in CSS only
props can be passed

{/ 💥 TypeScript will catch errors /}
typo
invalid prop


)
``

Documentation

https://typicode.github.io/mistcss

Why the name?

C in CSS stands for cascade 🌊 → atomized water forms mist 🌫️ → MistCSS creates pure CSS atomic components 🌬️