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
@scope (.paragraph) {
p:scope {
color: black;
&[data-error] {
color: red;
}
}
}App.jsx
import { Paragraph } from 'Paragraph.mist'
export default const App = () => (
<main>
<Paragraph>I'm a React component written in CSS only</Paragraph>
<Paragraph error>props can be passed</Paragraph>
{/* 💥 TypeScript will catch errors */}
<Paragraph eror>typo</Paragraph>
<Paragraph type="button">invalid prop</Paragraph>
</main>
)https://typicode.github.io/mistcss
C in CSS stands for cascade 🌊 → atomized water forms mist 🌫️ → MistCSS creates pure CSS atomic components 🌬️