https://github.com/alanrsoares/styled-cva

A typesafe, class-variance-authority-based, styled-components-like library for authoring React components
https://github.com/alanrsoares/styled-cva

class-variance-authority design-systems react styled-components tailwindcss

Last synced: about 1 month ago
JSON representation

A typesafe, class-variance-authority-based, styled-components-like library for authoring React components

• Host: GitHub
• URL: https://github.com/alanrsoares/styled-cva
• Owner: alanrsoares
• License: apache-2.0
• Created: 2024-03-11T00:07:28.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-04-05T02:26:10.000Z (8 months ago)
• Last Synced: 2024-04-05T06:26:40.992Z (8 months ago)
• Topics: class-variance-authority, design-systems, react, styled-components, tailwindcss
• Language: TypeScript
• Homepage:
• Size: 196 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  

  

  

  



# styled-cva

A typesafe, [class-variance-authority-based](https://github.com/joe-bell/cva), styled-components-like library for authoring React components

## Installation

npm

```bash

npm i --save styled-cva

```

pnpm

```bash

pnpm add styled-cva

```

bun

```bash

bun add styled-cva

```

## Usage

basic

```tsx

import tw from "styled-cva";

const StaticButton = tw.button`

  bg-primary rounded-xl cursor-pointer

`;

// ...

Click Me;

```

variants

```tsx

import tw from "styled-cva";

const VariantButton = tw.button.cva("btn-base-class", {

  variants: {

    // smart disappearing props:

    // variant keys starting with $ will not be sent to the DOM,

    // this avoids extraneous props warning

    $variant: {

      primary: "btn-primary-class",

      secondary: "btn-secondary-class",

    },

  },

});

// ...

// $variant is infered to 'primary' | 'secondary'

Click Me;

// actual element in the dom will be:

// Click Me

```

proxy

```tsx

import Link from "next/link";

const Button = tw.button.cva("btn", {

  variants: {

    $variant: {

      primary: "btn-primary",

      secondary: "btn-secondary",

    },

  },

});

// ...

// works with known jsx elements

  I'm a link that looks like a button

;

// also with custom components

  I'm a link that looks like a button

;

```

## VSCode intellisense

For tailwindcss extension support, add this to your vscode [settings.json](/.vscode/settings.json)

```json

  // tailwindcss intelisense settings

  "tailwindCSS.emmetCompletions": true,

  "tailwindCSS.includeLanguages": {

    "typescript": "javascript", // if you are using typescript

    "typescriptreact": "javascript" // if you are using typescript with react

  },

  "tailwindCSS.experimental.classRegex": [

    "tw`([^`]*)", // tw`...`

    "tw\\.[^`]+`([^`]*)`", // tw.xxx`...`

    "tw\\(.*?\\).*?`([^`]*)", // tw(Component)`...`

    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]

  ],

  "editor.quickSuggestions": {

    "strings": true // forces VS Code to trigger completions when editing "string" content

  },

```

### Acknowledgements

- [Tailwind-Styled-Components](https://github.com/MathiasGilson/Tailwind-Styled-Component)

- [CVA](https://github.com/joe-bell/cva)

- [CLSX](https://github.com/lukeed/clsx)

- [tailwind-merge](https://github.com/dcastil/tailwind-merge)

####

License - [Apache-2.0](/LICENSE)