Overview

CSS-Components is a lightweight and customizable CSS components library that allows you to wrap your CSS styles in a component-like structure. It is inspired by css-in-js libraries like styled-components and stitches. With CSS-Components, you can write your CSS styles as you wish and then compose them into reusable components for use in React.

Features

• Simple Wrapper: CSS-Components provides a simple wrapper around standard CSS, allowing you to write your CSS styles and compose them into components.
• Component Structure: You can create components with CSS-Components that are ready to be used in React.
• Variants Config Object: CSS-Components allows you to define variants for your components using a config object.
• Default Variants: You can set default variants for your components using the defaultVariants feature.
• Compound Variants: For more complex variant setups, you can use the compound variants argument to define styles for multiple variants.
• Array of Classes: You can compose and reuse styles by specifying an array of classes.
• Styling Other Components: CSS-Components also provides the ability to style components from other ecosystems, as long as they have a className prop.
• Passthrough Option: You can use the passthrough option to pass variant values to the element being extended, allowing you to style and pass attributes to the element.
• Type Helper: CSS-Components includes a helper that allows you to access the types of the variants you have defined.
• CLI Tool (Experimental): There is an experimental CLI tool included with CSS-Components that allows you to generate components from CSS and SCSS files.

Installation

To install CSS-Components, use the following command:

npm install @phntms/css-components

Summary

CSS-Components is a lightweight CSS components library that provides a simple way to wrap your CSS styles in a component-like structure. It offers features such as variants configuration, composability, and the ability to style components from other ecosystems. With CSS-Components, you can easily create reusable and customizable components for use in React.