GitHub
50
Created 2 years ago, last commit 6 months ago
2 contributors
355 commits
Stars added on GitHub, month by month
N/A
10
11
12
1
2
3
4
5
6
7
8
9
2023
2024
Stars added on GitHub, per day, on average
Yesterday
=
Last week
0.0
/day
Last month
0.0
/day
Package on NPM
Monthly downloads on NPM
10
11
12
1
2
3
4
5
6
7
8
9
2023
2024
README

hiiiits

license forks stargazers

klass

Introduction

Class variant utility

Features

  • Base and variants
  • Compound variants
  • Conditional variants
  • Frameworks-agnostic
  • TypeScript support
  • Styled-component-like API (Preact, Qwik, React, Solid & Vue)
  • Polymorphic components (Preact, Qwik, React, Solid & Vue)

Documentation

license

Packages

Package Details Links
@klass/core
license version size downloads
@klass/preact
license version size downloads
@klass/qwik
license version size downloads
@klass/react
license version size downloads
@klass/solid
license version size downloads
@klass/vue
license version size downloads

Examples

Core

import { klass, reklass } from "@klass/core";

const button = klass({
  base: "inline-flex items-center justify-center rounded-md outline-none",
  variants: {
    color: {
      default: "bg-neutral-700 text-white",
      primary: "bg-indigo-700 text-white",
      secondary: "bg-orange-700 text-white",
    },
    size: {
      sm: "px-3 py-0.5 h-7 text-sm font-medium",
      md: "px-4 py-1 h-8 text-base font-medium",
      lg: "px-5 py-1.5 h-9 text-lg font-semibold",
    },
    block: {
      true: "w-full",
    },
  },
  defaults: {
    color: "default",
    size: "md",
  },
});

const box = reklass({
  conditions: [
    {
      base: "",
      sm: "sm:",
      md: "md:",
      lg: "lg:",
      xl: "xl:",
      "2xl": "2xl:",
    },
    "base",
  ],
  variants: {
    m: {
      "0": "m-0",
      "1": "m-1",
      "2": "m-2",
      "3": "m-3",
      "4": "m-4",
      "5": "m-5",
      "6": "m-6",
      "7": "m-7",
      "8": "m-8",
    },
    p: {
      "0": "p-0",
      "1": "p-1",
      "2": "p-2",
      "3": "p-3",
      "4": "p-4",
      "5": "p-5",
      "6": "p-6",
      "7": "p-7",
      "8": "p-8",
    },
  },
});

button({ color: "primary", block: true }); // "inline-flex items-center justify-center rounded-md outline-none bg-indigo-700 text-white px-4 py-1 h-8 text-base font-medium w-full"
// access variant
button.g.color("primary"); // "bg-indigo-700 text-white"

box({ m: "1", p: "2" }); // "m-1 p-1"
box({ m: { base: "1", md: "2" }, p: { base: "1", md: "2" } }); // "m-1 md:m-2 p-1 md:p-2"
// access revariant
box.g.m("1"); // "m-1";
box.g.p({ base: "1", md: "2" }); // "p-1 md:p-2"

Preact / Qwik / React / Solid / Vue

import { klassed, reklassed } from "@klass/{preact,qwik,react,solid,vue}";

const Button = klassed(
  "button",
  {
    base: "inline-flex items-center justify-center rounded-md outline-none",
    variants: {
      color: {
        default: "bg-neutral-700 text-white",
        primary: "bg-indigo-700 text-white",
        secondary: "bg-orange-700 text-white",
      },
      size: {
        sm: "px-3 py-0.5 h-7 text-sm font-medium",
        md: "px-4 py-1 h-8 text-base font-medium",
        lg: "px-5 py-1.5 h-9 text-lg font-semibold",
      },
      block: {
        true: "w-full",
      },
    },
    defaults: {
      color: "default",
      size: "md",
    },
  },
  {
    // default props
    dp: {
      type: "button",
    },
  }
);

const Box = reklassed("div", {
  conditions: [
    {
      base: "",
      sm: "sm:",
      md: "md:",
      lg: "lg:",
      xl: "xl:",
      "2xl": "2xl:",
    },
    "base",
  ],
  variants: {
    m: {
      "0": "m-0",
      "1": "m-1",
      "2": "m-2",
      "3": "m-3",
      "4": "m-4",
      "5": "m-5",
      "6": "m-6",
      "7": "m-7",
      "8": "m-8",
    },
    p: {
      "0": "p-0",
      "1": "p-1",
      "2": "p-2",
      "3": "p-3",
      "4": "p-4",
      "5": "p-5",
      "6": "p-6",
      "7": "p-7",
      "8": "p-8",
    },
  },
});

const App = () => {
  return (
    <Box m={{ base: "1", md: "2" }} p="2">
      <Box as="section">
        <Button color="primary" block>
          Primary Block Button
        </Button>
      </Box>

      <Box as="section">
        <Button as="a" color="secondary">
          Secondary Anchor Button
        </Button>
      </Box>
    </Box>
  );
};

export default App;

More Examples

github

Inspiration

Some of the core concepts and designs are inspired by

Benchmark

github

Authors

github

License

MIT License