CSS Components logo

TypeScript

Out of the box TypeScript experience.

CSS Components provides typing out of the box, but this page contains some further utilities and tips.

Importing types

You can import all the types at once:

1import type * as CSSComponents from "@phntms/css-components";
2

These include:

Extract variants from a component

You can use the VariantProps utility to extract variants from a component. This ensures your variants support responsive syntax.

1import { styled, VariantProps } from "@phntms/css-components";
2
3const Button = styled("button", {
4  css: "button",
5  variants: {
6    size: {
7      1: "buttonSize1",
8      2: "buttonSize2",
9    },
10  },
11});
12
13type ButtonVariants = VariantProps<typeof Button>;
14type SizeValues = ButtonVariants["size"];
15