@slimy/hva NPM

Haruhi Variance Authority

What is HVA?

HVA is a variant manager, that allows you to create variants for you components to later on, use them in your code.

For being this simple, it can be used with Astro integrations without any trouble or error.

What is a variant?

A variant is a component that has a different style, but the same functionality.

For example, a button with a different color, or a card with a different background.

So Haruhi, manages that for you in a simple way.

How to Install it?

You can install it using npm:

npm install @slimy/hva

Or using Pnpm:

pnpm install @slimy/hva

Or using Yarn:

yarn add @slimy/hva

How to use it?

First of all, have in count two things, HVA doesn't support type safety right now, and it has been tested only in React and Svelte, is as simple as it can be.

Now, you can add default styles to the components.

React

import hva from '@slimy/hva';

const button = hva({
   variants: {
    intent: {
      primary: [styles]
    }
    } 
    // You can add other styles here as well
}, [defaultStyles]) // Default styles are not required

export function Button({intent, className, ...props}) {
    return <button className={button({intent, className})}>Click me</button>
}

Svelte

<script lang="ts">
import hva from '@slimy/hva'

  export let intent: 'primary' | 'secondary' = 'primary';
  
  const styles = hva({
    variants: {
    intent: {
      primary: [styles]
    }
    }  
  }, [defaultStyles]) // Default styles are not required;

  $: haru = `${styles({ intent, class: $$props.class })}`;
</script>

<button class={haru}>Click me!</button>

Then you can use it like this in both React and Svelte: