open-index/open-npm huggingface dataset:
npm package: @tailus/themer-card
Description: Card themes
Author: tailus.io
Latest version: 0.0.1

# Card Component Theme

## Overview

The card component theme is a collection of Tailwind CSS utilities that can be used to create cards with different styles, and variants. Cards are used to group and display content in a way that is easily readable.

## Installation

To install the card component theme, run the following command:

```bash
npm install @tailus/themer-card
```

## Importation

To import the card component theme, you can use the following import:

```tsx
import {
    card,
    outlinedVariant,
    elevatedVariant,
    softVariant,
    mixedVariant,
    softGradientVariant,
    elevatedGradientVariant,
} from "@tailus/themer-card";
```

## Variants

The card component theme provides six variants:

-   `Outlined` (default): The default variant.
-   `Elevated`: A variant with a drop shadow.
-   `Soft`: A variant with rounded corners and lighter background colors.
-   `Mixed`: A variant that combines the outlined and elevated variants.
-   `SoftGradient`: A variant with a lighter backhround and gradient border.
-   `ElevatedGradient`: A variant with a drop shadow and gradient border.

## Props

The softGradient and elevatedGradient variants have two props:

-   `outer`: Gradient border and border radius.
-   `inner`: Contains the padding and the content of the card.

## Customization

The following properties can be customized in the card component theme:

-   `rounded`
-   `padding`

```js
// tailwind.config.js
import themer from "@tailus/themer";
export default = {
    theme: {
        extend: {},
    },
    plugins: [
        themer({
            components: {
                card: {
                    rounded: "rounded-lg",
                    padding: "p-4",
                },
            },
        }),
    ],
};
```

**Note:** The border color is customized in the `ui` group.

## Usage

To use the card component theme, simply import the appropriate variant and add it to the card element. For example, to create a default card component, you would import the `card` variant and add it to the card element.

### Example (React)

```tsx
<div className={card}>
    <h3>Outlined Card Title</h3>
</div>
```

### SoftGradient Card

To create a soft gradient card, you would import the `softGradient` variant and add its properties to the card element. You would also need to specify the outer and inner properties.

```tsx
<div className={softGradientVariant.outer}>
    <div className={softGradientVariant.inner}>
        <h3>Soft Gradient Card Title</h3>
    </div>
</div>
```
npm package: @tailus/themer-checkbox
Description: Checkbox themes
Author: tailus.io
Latest version: 0.0.1

# Checkbox Component Theme

## Overview

The checkbox component theme is a collection of Tailwind CSS utilities that can be used to create checkboxes with different variants. Checkboxes are used to allow users to select one or more options from a list.

## Installation

To install the checkbox component theme, run the following command:

```bash
npm install @tailus/themer-checkbox
```

## Importation

To import the checkbox component theme, you can use the following import:

```tsx
import { checkbox, ringVariant } from "@tailus/themer-checkbox";
```

## Variants

The checkbox component theme provides two variants:

-   `checkbox` (default): The default variant.
-   `ringVariant`: A variant with a ring around the indicator.

## Props

The checkbox component theme object contains the following properties:

-   `root`: The Tailwind CSS utilities for the root element of the checkbox component.
-   `indicator`: The Tailwind CSS utilities for the indicator element of the checkbox component.
-   `label`: The Tailwind CSS utilities for the label element of the checkbox component.

## Usage

To use the checkbox component theme, simply import the appropriate variant and add its props to the checkbox element and its child elements. For example, to create a default checkbox component, you would import the `checkbox` variant and add its props to the checkbox element.

### Example (Radix UI)

```tsx
import * as Checkbox from "@radix-ui/react-checkbox";
import { checkbox as theme } from "@tailus/themer-checkbox";

const CheckboxUI = () => (
    <form>
        <Checkbox.Root className={theme.root}>
            <Checkbox.Indicator className={theme.indicator}>// your icon here</Checkbox.Indicator>
            <Checkbox.Label className={theme.label}>Checkbox label</Checkbox.Label>
        </Checkbox.Root>
    </form>
);

export default CheckboxUI;
```

## RingVariant

To create a ring variant checkbox, you would import the `ringVariant` variant and add its props to the checkbox element.

```tsx
import * as Checkbox from "@radix-ui/react-checkbox";
import { ringVariant as theme } from "@tailus/themer-checkbox";

const CheckboxUI = () => (
    <form>
        <Checkbox.Root className={theme.root}>
            <Checkbox.Indicator className={theme.indicator}>// your icon here</Checkbox.Indicator>
            <Checkbox.Label className={theme.label}>Checkbox label</Checkbox.Label>
        </Checkbox.Root>
    </form>
);

export default CheckboxUI;
```

**Note:** The checkbox is only available for the primary color and There is no customization available for the checkbox component theme at this time.
npm package: @tailus/themer-empty-state
Description: Empty states themes
Author: tailus.io
Latest version: 0.0.1

# Empty State

## Overview

The empty state component theme is a collection of Tailwindcss utilities that can be used to create empty state components with different colors and styles. Empty state components are used to inform users that there is currently no data to display.

## Installation

To install the empty state component theme, run the following command:

```bash
npm install @tailus/themer-empty-state
```

## Importation

To import the empty state component theme, you can use the following import:

```tsx
import { emptyState } from "@tailus/themer-empty-state";
```

## Properties

The empty state object contains the following properties:

-   `root`: The Tailwindcss utility for the root element of the empty state component.
-   `imageContainer`: An object containing the Tailwindcss utilities for the image container in the empty state component. The object contains the following properties:
    -   `primary`: The Tailwindcss utility for the image container when the empty state component has a primary image.
    -   `secondary`: The Tailwindcss utility for the image container when the empty state component has a secondary image.
    -   `accent`: The Tailwindcss utility for the image container when the empty state component has an accent image.
    -   `success`: The Tailwindcss utility for the image container when the empty state component has a success image.
    -   `info`: The Tailwindcss utility for the image container when the empty state component has an info image.
    -   `warning`: The Tailwindcss utility for the image container when the empty state component has a warning image.
    -   `danger`: The Tailwindcss utility for the image container when the empty state component has a danger image.
    -   `gray`: The Tailwindcss utility for the image container when the empty state component has a gray image.
-   `image`: The Tailwindcss utility for the image in the empty state component.
-   `content`: The Tailwindcss utility for the content of the empty state component.
-   `title`: The Tailwindcss utility for the title of the empty state component.
-   `description`: The Tailwindcss utility for the description of the empty state component.

## Example

```tsx
import { emptyState } from "@tailus/themer-empty-state";
import { outlinedButton } from "@tailus/themer-button";

const EmptyStateUI = () => (
    <div className={emptyState.root}>
        <div className={emptyState.imageContainer.gray}>
            <img
                className={emptyState.image}
                src=""
                alt="Tailus disconnected user empty state"
                width={512}
                height={512}
            />
        </div>
        <div className={emptyState.content}>
            <h3 className={emptyState.title}>You're offline</h3>
            <p className={emptyState.description}>We've got something for everyone.</p>
        </div>
        <button className={outlinedButton.info.md}>
            <span>Retry</span>
        </button>
    </div>
);

export default EmptyStateUI;
```
npm package: @tailus/themer-progress
Description: Progress themes
Author: tailus.io
Latest version: 0.0.1

# Progress Theme

## Overview

The progress component theme is a collection of Tailwindcss utilities that can be used to create progress components with a single variant. Progress components are used to indicate the progress of a task or operation.

## Installation

To install the progress component theme, run the following command:

```bash
npm install @tailus/themer-progress
```

## Importation

To import the progress component theme, you can use the following import:

```bash
import { progress } from "@tailus/themer-progress";
```

## Properties

The progress object contains the following properties:

-   `root`: The Tailwindcss utilities for the root element of the progress component.
-   `header`: The Tailwindcss utilities for the header of the progress component.
-   `indicator`: The Tailwindcss utilities for the indicator of the progress component. The indicator can have one of the following colors: `primary`, `secondary`, `accent`, `danger`, `warning`, `success`, `gray`, `gradient` or `neutral`.
-   `label`: The Tailwindcss utilities for the label of the progress component.
-   `message`: The Tailwindcss utilities for the message of the progress component.
-   `timer`: The Tailwindcss utilities for the timer of the progress component.

## Usage

To use the progress component theme, simply add the appropriate `progress` object properties to the progress element and its child elements.

### Example

#### Radix UI

```tsx
import React from "react";
import * as Progress from "@radix-ui/react-progress";
import { progress as theme } from "@tailus/themer-progress";

const ProgressUI = () => {
    const [progress, setProgress] = React.useState(0);

    React.useEffect(() => {
        const timer = setTimeout(() => setProgress(32), 500);
        return () => clearTimeout(timer);
    }, []);

    return (
        <Progress.Root
            className={theme.root + " w-64"}
            style={{
                // Fix overflow clipping in Safari
                // https://gist.github.com/domske/b66047671c780a238b51c51ffde8d3a0
                transform: "translateZ(0)",
            }}
            value={progress}
        >
            <Progress.Indicator
                className={theme.indicator.primary}
                style={{ transform: `translateX(-${100 - progress}%)` }}
            />
        </Progress.Root>
    );
};

export default ProgressUI;
```
npm package: @tailus/themer-scroll-area
Description: Scroll Area themes
Author: tailus.io
Latest version: 0.0.1

# Scroll Area Component Theme

## Overview

The scroll area component theme is a collection of Tailwind CSS utilities that can be used to create scroll areas with a single variant. Scroll areas are used to allow users to scroll through content that is larger than the viewport.

## Installation

To install the scroll area component theme, run the following command:

```bash
npm install @tailus/themer-scroll-area
```

## Importation

To import the scroll area component theme, you can use the following import:

```tsx
import { scrollArea } from "@tailus/themer-scroll-area";
```

## Variants

The scroll area component theme provides a single variant:

-   `Default`: The default variant.

## Props

The scroll area component theme object contains the following properties:

-   `root`: The Tailwind CSS utilities for the root element of the scroll area component.
-   `bar`: An object containing the Tailwind CSS utilities for the scrollbar elements :
    -   `horizontal`: The Tailwind CSS utilities for the horizontal scrollbar element.
    -   `vertical`: The Tailwind CSS utilities for the vertical scrollbar element.
-   `thumb`: The Tailwind CSS utilities for the scroll thumb element.

## Usage

To use the scroll area component theme, simply import the `default` variant and add the appropriate Tailwind CSS utilities to the scroll area element and its child elements. For example, to create a default scroll area component, you would import the `default` variant and add the `scrollArea` Tailwind CSS utility to the scroll area element.

```tsx
import * as ScrollArea from "@radix-ui/react-scroll-area";
import { scrollArea as scrollAreaTheme } from "@tailus/themer-scroll-area";

const ScrollAreaUI = () => (
    <ScrollArea.Root className="h-full w-fit overflow-hidden">
        <ScrollArea.Viewport className="flex h-full w-full snap-x snap-proximity scroll-pl-12 items-center"></ScrollArea.Viewport>
        <ScrollArea.Scrollbar className={scrollAreaTheme.bar.vertical} orientation="vertical">
            <ScrollArea.Thumb className={scrollAreaTheme.thumb} />
        </ScrollArea.Scrollbar>
        <ScrollArea.Scrollbar className={scrollAreaTheme.bar.horizontal} orientation="horizontal">
            <ScrollArea.Thumb className={scrollAreaTheme.thumb} />
        </ScrollArea.Scrollbar>
    </ScrollArea.Root>
);

export default ScrollAreaUI;
```

**Note:** There is no customization available for the scroll area component theme at this time.
npm package: @tailus/themer-slider
Description: Slider themes
Author: tailus.io
Latest version: 0.0.1

# Slider theme

## Overview

The slider component theme is a collection of Tailwindcss utilities that can be used to create slider components with different colors and styles. Slider components are used to allow users to select a value from a range of values.

## Installation

To install the slider component theme, run the following command:

```bash
npm install @tailus/themer-slider
```

## Importation

To import the slider component theme, you can use the following import:

```tsx
import { slider } from "@tailus/themer-slider";
```

## Example

### Radix UI

```tsx
import * as Slider from "@radix-ui/react-slider";
import { slider as sliderTheme } from "@tailus/themer-slider";

const SliderUI = () => (
    <form>
        <Slider.Root
            className={sliderTheme.root}
            defaultValue={[50]}
            data-orientation="vertical"
            max={100}
            step={1}
        >
            <Slider.Track className={sliderTheme.track}>
                <Slider.Range className={sliderTheme.range} />
            </Slider.Track>
            <Slider.Thumb className={sliderTheme.thumb} aria-label="Volume" />
        </Slider.Root>
    </form>
);

export default SliderUI;
```

## Properties

The `slider` object contains the following properties:

-   `root`: The Tailwindcss utility for the root element of the slider component.
-   `track`: The Tailwindcss utility for the track of the slider component.
-   `range`: The Tailwindcss utility for the range of the slider component.
-   `thumb`: The Tailwindcss utility for the thumb of the slider component.
npm package: @tailus/themer-switch
Description: Switch themes
Author: tailus.io
Latest version: 0.0.1

# Switch

## Overview

The switch component theme is a collection of Tailwindcss utilities that can be used to create switch components with different colors and styles. Switch components are used to allow users to toggle between two states, such as on and off.

## Installation

To install the switch component theme, run the following command:

```bash
npm install @tailus/themer-switch
```

## Importation

To import the switch component theme, you can use the following import:

```js
import { switchThemer } from "@tailus/themer-switch";
```

## Example

### Radix UI

```tsx
import * as Switch from "@radix-ui/react-switch";
import { switchTheme } from "@tailus/themer-switch";

const SwitchUI = () => (
    <form>
        <div className={switchTheme.parentElement}>
            <Switch.Root className={switchTheme.root} id="airplane-mode">
                <Switch.Thumb className={switchTheme.thumb} />
            </Switch.Root>
            <label className={switchTheme.label} htmlFor="airplane-mode">
                Airplane mode
            </label>
        </div>
    </form>
);

export default SwitchUI;
```

## Properties

The switchThemer object contains the following properties:

-   `parentElement`: The Tailwindcss utility for the parent element of the switch component.
-   `root`: The Tailwindcss utility for the root element of the switch component.
-   `thumb`: The Tailwindcss utility for the thumb of the switch component.
-   `label`: The Tailwindcss utility for the label of the switch component.

## Customization

The following property can be customized:

-   `border-radius`

```js
tailus: {
    components: {
        switch: {
            borderRadius: "",
        },
    },
},
```
npm package: @tailus/themer-tooltip
Description: Tooltip themes
Author: tailus.io
Latest version: 0.0.1

# Tooltip Theme

## Overview

The tooltip component theme is a collection of Tailwindcss utilities that can be used to create tooltips with a single variant. Tooltips are small boxes that appear when a user hovers over an element to provide additional information.

## Installation

To install the tooltip component theme, run the following command:

```bash
npm install @tailus/themer-tooltip
```

## Importation

To import the tooltip component theme, you can use the following import:

```tsx
import { tooltip } from "@tailus/themer-tooltip";
```

## Properties

The tooltip object contains the following properties:

-   `content`: The Tailwindcss utilities for the content of the tooltip.
-   `arrow`: The Tailwindcss utilities for the arrow of the tooltip.

# Customization

The following property can be customized:

-   border radius

You can use the `extend` section of your Tailwind CSS config file to customize the tooltip component theme. For example, to add a new border radius to the tooltip component theme, you would add the following code to your `tailwind.config.js` file:

```javascript
tailus: {
    components: {
        tooltip: {
            borderRadius: "md",
        },
    },
},
```

## Usage

To use the tooltip component theme, simply add the appropriate theme object properties to the tooltip element and its child elements.

### Radix UI

```tsx
import * as Tooltip from "@radix-ui/react-tooltip";
import { tooltip as theme } from "@tailus/themer-tooltip";
import { ArchiveIcon } from "@radix-ui/react-icons";
import { iconButton as buttonTheme } from "@tailus/themer-button";

const TooltipArrow = () => {
    return (
        <Tooltip.Provider>
            <Tooltip.Root>
                <Tooltip.Trigger asChild>
                    <button className={buttonTheme.warning.md}>
                        <span className="sr-only">Archive</span>
                        <ArchiveIcon className={buttonTheme.icon.md} aria-hidden />
                    </button>
                </Tooltip.Trigger>
                <Tooltip.Portal>
                    <Tooltip.Content className={theme.content} sideOffset={4}>
                        Archive
                        <Tooltip.Arrow className={theme.arrow} />
                    </Tooltip.Content>
                </Tooltip.Portal>
            </Tooltip.Root>
        </Tooltip.Provider>
    );
};

export default TooltipArrow;
```
npm package: @tailwind-expand/vite
Description: Vite plugin for tailwind-expand
Latest version: 0.4.4

# @tailwind-expand/vite

Vite plugin for tailwind-expand. Processes `@expand` blocks and generates CSS for Tailwind.

## Installation

```bash
pnpm add -D @tailwind-expand/vite @tailwind-expand/babel
```

## Usage

```ts
// vite.config.ts
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
import react from '@vitejs/plugin-react'
import tailwindExpandVite from '@tailwind-expand/vite'
import tailwindExpandBabel from '@tailwind-expand/babel'

export default defineConfig({
  plugins: [
    tailwindExpandVite(),  // Must come before tailwindcss
    tailwindcss(),
    react({
      babel: {
        plugins: [tailwindExpandBabel({
          cssPath: './src/globals.css',
          debug: process.env.NODE_ENV !== 'production',
        })],
      },
    }),
  ],
})
```

## Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `mergerFn` | `(classes: string) => string` | — | Function to resolve conflicting utilities (e.g., `twMerge`) |

### With tailwind-merge

```ts
import { twMerge } from 'tailwind-merge'

tailwindExpandVite({ mergerFn: twMerge })
```

## What It Does

1. **Extracts aliases** from `@expand` blocks in your CSS
2. **Scans source files** for variant-prefixed aliases (e.g., `lg:Button`, `hover:ButtonPrimary`)
3. **Injects `@source inline()`** for Tailwind to generate utilities

## License

MIT