react-sfc-swyx
cva
react-sfc-swyx | cva | |
---|---|---|
1 | 16 | |
35 | 5,213 | |
- | - | |
10.0 | 7.2 | |
over 3 years ago | 7 days ago | |
TypeScript | TypeScript | |
MIT License | Apache License 2.0 |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
react-sfc-swyx
-
CSS-in-JS not recommended in React 18. What are you using?
I dream of pasting my styles inside tags, just like Vue does. Unfortunately this idea never took off with React.
cva
-
Use postcss-cva to generate cva method
cva.style
-
Tailwind vs. Semantic CSS
* use cva https://github.com/joe-bell/cva to style generic ui components (like buttons) to archive same grouping as in semantic css
- 5 React Libraries to Level Up your Projects in 2023
-
How do you design Button in React js?
Highly recommended with this: https://github.com/joe-bell/cva
-
What am I missing out about Tailwind?
Yes, and a library like https://github.com/joe-bell/cva makes this a breeze. See https://cva.style/docs/getting-started#your-first-component for an example
-
Building a prop-based, type-safe Tailwind with vanilla-extract
There is also class variance authoriy
- Konsta UI – Mobile UI Components Built with TailwindCSS
- which way do you prefer for styling ?
-
Conditional styling reusable components
https://github.com/joe-bell/cva is great for this
-
Introducing DecaUI
Also have you heard of class variance authority? https://github.com/joe-bell/cva; personally looked into stitches & vanilla-extract but i'm preferring the simplicity of this package the most.
What are some alternatives?
stylemapper - Flexible utility to create styled and type-safe React components
react-cva - Class Variance Authority helper for react
eslint-plugin-tailwindcss - ESLint plugin for Tailwind CSS usage
vanilla-extract - Zero-runtime Stylesheets-in-TypeScript
tailwindcss-classnames - Functional typed classnames for TailwindCSS
konsta - Mobile UI components made with Tailwind CSS
stitches - [Not Actively Maintained] CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience.
Tailwind CSS - A utility-first CSS framework for rapid UI development.
clb - clb is a small, utility function that builds a class list based on a simple api.
linaria - Zero-runtime CSS in JS library
draggable - The JavaScript Drag & Drop library your grandparents warned you about.