Get started

Twyled is a React UI library optimized for productivity.

It has the same benefits of using Tailwind, except you're using props instead of classes. The props are fully typed and themeable.

npm install twyled

Create twyled

Twyled needs to be initialized first and you do that by calling createTwyled and passing it your theme object.

The theme object accepts definitions for your color palette, fontSize, spacing scales...etc. Read more on the Theme page.

import { createTwyled } from "twyled"

const { twyled, createVariants } = createTwyled({
  colors: {
    primary: "dodgerblue",
    neutral: "#ddd"
  },
  fontSize: {
    sm: "0.875rem",
    md: "1rem",
    lg: "1.125rem",
  },
})

ℹ️ Note: You can use twyled without a theme i.e. you could pass an empty object to createTwyled. But it works much better with a theme -- you get consistent styling everywhere and autocompletion for many css values.

Create a component

Let's create a Button component:

const Button = twyled("button")
  
<Button>Button</Button>

This gives us a plain button with default browser styling:

We can style the component by passing props that map to virtually every CSS property:

<Button
  border="0"
  bg="blue600"
  color="white"
  px="2"
  py="1.5"
  fontSize="sm"
  lineHeight="normal"
  rounded="md"
  $hover={{ bg: "blue700" }}
>
  Button
</Button>

The result:

Variants

The button looks fine, but we're passing too many props and what if we wanted to customize it further? We can group and expand these styles with variants.

const Button = twyled("button", {
  variants: createVariants({
    variant: {
      primary: {
        bg: "blue600",
        color: "white",
        $hover: {
          bg: "blue700",
        },
      },
      neutral: {
        bg: "gray200",
        color: "black",
        $hover: {
          bg: "gray300",
        },
      },
    },
    size: {
      medium: {
        px: "2",
        py: "1.5",
        lineHeight: "normal",
        rounded: "md",
        fontSize: "sm",
      },
      large: {
        px: "2.5",
        py: "2",
        lineHeight: "normal",
        rounded: "md",
        fontSize: "base",
      },
    },
  }),
  defaultVariants: {
    variant: "primary",
    size: "medium",
  },
});

We use variants also by passing props:

<Button>Primary medium</Button>
<Button size="large">Primary large</Button>
<Button variant="neutral">Neutral medium</Button>
<Button variant="neutral" size="large">Neutral large</Button>

We can still override the variants:

<Button bg="purple600" $hover={{ bg: "purple700" }}>
  Primary medium, but purple
</Button>