CSS Components

Clean and logical
React styling with
CSS Components

Not another styling system, but a lightweight utility to compose CSS styles into standard React.JS components.

npm i @phntms/css-components

Currently v0.4.0

Design composable component APIs with variants

Variants are a first-class citizen of CSS Components. With multiple variants, compound variants, and default variants, you can design composable component APIs which are typed automatically.

1const Button = styled('button', {
2    // base styles
3    css: 'btn",
4    variants: {
5      color: {
6        gray: "btnGray",
7        teal: "btnTeal",
8      },
9      outline: {
10        true: "btnOutline",
11      },
12      disabled: {
13        true: "btnDisabled",
14      },
15    },
16    compoundVariants: [
17      {
18        color: "gray",
19        outline: true,
20        css: "btnGrayOutline",
21      },
22      {
23        color: "teal",
24        outline: true,
25        css: "btnTealOutline",
26      }
27    ],
28    defaultVariants: {
29      color: "gray",
30      outline: true,
31    },
32    passthrough: ["disabled"],
33  });

Stats at a glance