The nuts and bolts of TWClassed's API.


A function to create a component including its classes and variants. It receives:

  • element: the type of the component. Can be a string (div) or a React component (Link).
  • classes (object or string or ClassedComponentType): as many string's or variant config objects as you want.
const Button = classed("button", {
    base: "" // base classes,
    variants: {
        color: {
            // color variants
// Use it
() => <Button />
() => <Button color="some-color" />


A function to create the classed component (if you want custom configuration). It receives:

  • config: the configuration object.
type Merger = (...args: string[]) => string;
  merger: Merger, // The merger function to use when computing all the classes.

The createClassed function returns an object with the following properties:

  • classed: the classed function.

See the Configuring Classed Guide for more information on createClassed