https://github.com/tw-in-js/twind-react

Twind react styled components inspired by stitches
https://github.com/tw-in-js/twind-react

react stitches styled styled-components tailwindcss twind

Last synced: 2 days ago
JSON representation

Twind react styled components inspired by stitches

• Host: GitHub
• URL: https://github.com/tw-in-js/twind-react
• Owner: tw-in-js
• License: mit
• Created: 2021-03-05T20:06:20.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2021-03-15T21:57:36.000Z (over 4 years ago)
• Last Synced: 2025-05-28T13:50:46.434Z (4 months ago)
• Topics: react, stitches, styled, styled-components, tailwindcss, twind
• Language: TypeScript
• Homepage:
• Size: 40 KB
• Stars: 46
• Watchers: 3
• Forks: 3
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# @twind/react

A [Twind](https://twind.dev) styled API inspired by [stitches](https://stitches.dev).

[![MIT License](https://flat.badgen.net/github/license/tw-in-js/twind-react)](https://github.com/tw-in-js/twind-react/blob/main/LICENSE)

[![Latest Release](https://flat.badgen.net/npm/v/@twind/react?icon=npm&label&cache=10800&color=blue)](https://www.npmjs.com/package/@twind/react)

[![Github](https://flat.badgen.net/badge/icon/tw-in-js%2Ftwind-react?icon=github&label)](https://github.com/tw-in-js/twind-react)

[![Module Size](https://flat.badgen.net/badgesize/brotli/https:/unpkg.com/@twind/react/react.js?icon=jsdelivr&label&color=blue&cache=10800)](https://unpkg.com/@twind/react/react.js 'brotli module size')

[![Typescript](https://flat.badgen.net/badge/icon/included?icon=typescript&label)](https://unpkg.com/browse/@twind/react/react.d.ts)

> THIS IS AN ALPHA RELEASE. Expect dragons...

## Installation

Install from npm:

```sh

# Using npm

npm install @twind/react

# Using Yarn

yarn add @twind/react

```

## Usage

> Please see [twind/style](https://twind.dev/docs/modules/twind_style.html) for config examples.

[![Try this example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/twind-react-styled-90y9n?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.js&theme=dark)

```jsx

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`,

    },

  ],

})

  Button

  Gray Button

  Primary Button

  

    Outlined Gray Button

  

  

    Outlined Primary Button

  

  

    Responsive Primary Button

  

```

## License

[MIT](https://github.com/tw-in-js/react/blob/main/LICENSE)