{"repo":"phantomstudios/css-components","free":true,"listed":false,"github":"https://github.com/phantomstudios/css-components","clone":"git clone https://github.com/phantomstudios/css-components.git","description":"CSS Components","language":"TypeScript","stars":129,"topics":["component-library","components","css","react","reactjs"],"license":"MIT","category":"ui-components","readme_excerpt":"@phantomstudios/css-components [![NPM version][npm-image]][npm-url] [![Actions Status][ci-image]][ci-url] [![PR Welcome][npm-downloads-image]][npm-downloads-url] A simple, lightweight, and customizable CSS components library that lets you wrap your css styles in a component-like structure. Inspired by css-in-js libraries like styled-components and stitches. Introduction At its core, css-components is a simple wrapper around standard CSS. It allows you to write your CSS how you wish then compose them into a component ready to be used in React. Here is a minimal example of a button component with an optional variant: This outputs a nice clean component that can be used in React: Installation Install this package with npm . Usage Here is a full example of a button component with an optional variant called primary : components/Button/styles.module.css components/Button/styles.ts components/Button/index.tsx The variants config object The variants config object is a simple object that allows you to define the variants that your component supports. Each variant is a key in the object and the value is an object that defines the possible values(css classes) for that variant. Default Variants You can use the defaultVariants feature to set a variant by default: Compound Variants For more complex variant setups you can use the compound variants argument to define what styles should be applied when multiple variants are used. Other Array of Classes Wherever you specify a css selector, you","default_branch":null,"files":null,"tree":[],"storefront":"/r/phantomstudios","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/phantomstudios/css-components/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}