@twind/react
v0.0.4
Published
Twind react styled components inspired by stitches
Downloads
103
Maintainers
Readme
@twind/react
A Twind styled API inspired by stitches.
THIS IS AN ALPHA RELEASE. Expect dragons...
Installation
Install from npm:
# Using npm
npm install @twind/react
# Using Yarn
yarn add @twind/react
Usage
Please see twind/style for config examples.
import { styled } from "@twind/react"
const Box = styled()
const Button = styled("button", {
base: `
appearance-none border-none bg-transparent
rounded-full px-2.5
`,
variants: {
size: {
sm: `text-sm h-6`,
md: `text-base h-9`,
},
variant: {
gray: `
bg-gray-500
hover:bg-gray-600
`,
primary: `
text-white bg-purple-500
hover:bg-purple-600
`,
},
outlined: {
true: `bg-transparent ring-1`,
},
},
defaults: {
variant: "gray",
size: "sm",
},
matches: [
{
variant: "gray",
outlined: true,
use: `ring-gray-500`,
},
{
variant: "primary",
outlined: true,
use: `text-purple-500 ring-gray-500 hover:text-white`,
},
],
})
<Box tw="m-2.5 flex flex-wrap" css={{ gap: "20px" }}>
<Button>Button</Button>
<Button variant="gray">Gray Button</Button>
<Button variant="primary">Primary Button</Button>
<Button variant="gray" outlined>
Outlined Gray Button
</Button>
<Button variant="primary" outlined>
Outlined Primary Button
</Button>
<Button variant="primary" outlined size={{ initial: "sm", lg: "md" }}>
Responsive Primary Button
</Button>
</Box>