Klass

Class variant utility library

ClassNameTailwindCSSReactSolid
flamrdevs/klassklass.pages.dev@klass/core

README


hiiiits

klass


Introduction


Class variant utility

Features


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

Roadmap


- [x] Variants
- [x] Compound variants
- [x] Conditional variants
- [x] Group
- [x] Slots

Examples


Core


  1. ```tsx
  2. import { klass, reklass } from "@klass/core";

  4. const button = klass({
  5.   base: "inline-flex items-center justify-center rounded-md outline-none",
  6.   variants: {
  7.     color: {
  8.       default: "bg-neutral-700 text-white",
  9.       primary: "bg-indigo-700 text-white",
  10.       secondary: "bg-orange-700 text-white",
  11.     },
  12.     size: {
  13.       sm: "px-3 py-0.5 h-7 text-sm font-medium",
  14.       md: "px-4 py-1 h-8 text-base font-medium",
  15.       lg: "px-5 py-1.5 h-9 text-lg font-semibold",
  16.     },
  17.     block: {
  18.       true: "w-full",
  19.     },
  20.     // "class" variant are not allowed
  21.   },
  22.   defaultVariants: {
  23.     color: "default",
  24.     size: "md",
  25.   },
  26. });

  28. const box = reklass({
  29.   conditions: {
  30.     base: "",
  31.     sm: "sm:",
  32.     md: "md:",
  33.     lg: "lg:",
  34.     xl: "xl:",
  35.     "2xl": "2xl:",
  36.   },
  37.   defaultCondition: "base",
  38.   variants: {
  39.     m: {
  40.       "0": "m-0",
  41.       "1": "m-1",
  42.       "2": "m-2",
  43.       "3": "m-3",
  44.       "4": "m-4",
  45.       "5": "m-5",
  46.       "6": "m-6",
  47.       "7": "m-7",
  48.       "8": "m-8",
  49.     },
  50.     p: {
  51.       "0": "p-0",
  52.       "1": "p-1",
  53.       "2": "p-2",
  54.       "3": "p-3",
  55.       "4": "p-4",
  56.       "5": "p-5",
  57.       "6": "p-6",
  58.       "7": "p-7",
  59.       "8": "p-8",
  60.     },
  61.   },
  62. });

  64. 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"
  65. // access variant
  66. button.v.color("primary"); // "bg-indigo-700 text-white"

  68. box({ m: "1", p: "2" }); // "m-1 p-1"
  69. box({ m: { base: "1", md: "2" }, p: { base: "1", md: "2" } }); // "m-1 md:m-2 p-1 md:p-2"
  70. // access revariant
  71. box.rv.m("1"); // "m-1";
  72. box.rv.p({ base: "1", md: "2" }); // "p-1 md:p-2"
  73. ```

Preact / React / Solid


  1. ```tsx
  2. import { klassed, reklassed } from "@klass/{preact,react,solid}";

  4. const Button = klassed(
  5.   "button",
  6.   {
  7.     base: "inline-flex items-center justify-center rounded-md outline-none",
  8.     variants: {
  9.       color: {
  10.         default: "bg-neutral-700 text-white",
  11.         primary: "bg-indigo-700 text-white",
  12.         secondary: "bg-orange-700 text-white",
  13.       },
  14.       size: {
  15.         sm: "px-3 py-0.5 h-7 text-sm font-medium",
  16.         md: "px-4 py-1 h-8 text-base font-medium",
  17.         lg: "px-5 py-1.5 h-9 text-lg font-semibold",
  18.       },
  19.       block: {
  20.         true: "w-full",
  21.       },
  22.     },
  23.     defaultVariants: {
  24.       color: "default",
  25.       size: "md",
  26.     },
  27.   },
  28.   {
  29.     // default props
  30.     dp: {
  31.       type: "button",
  32.     },
  33.   }
  34. );

  36. const Box = reklassed("div", {
  37.   conditions: {
  38.     base: "",
  39.     sm: "sm:",
  40.     md: "md:",
  41.     lg: "lg:",
  42.     xl: "xl:",
  43.     "2xl": "2xl:",
  44.   },
  45.   defaultCondition: "base",
  46.   variants: {
  47.     m: {
  48.       "0": "m-0",
  49.       "1": "m-1",
  50.       "2": "m-2",
  51.       "3": "m-3",
  52.       "4": "m-4",
  53.       "5": "m-5",
  54.       "6": "m-6",
  55.       "7": "m-7",
  56.       "8": "m-8",
  57.     },
  58.     p: {
  59.       "0": "p-0",
  60.       "1": "p-1",
  61.       "2": "p-2",
  62.       "3": "p-3",
  63.       "4": "p-4",
  64.       "5": "p-5",
  65.       "6": "p-6",
  66.       "7": "p-7",
  67.       "8": "p-8",
  68.     },
  69.   },
  70. });

  72. const App = () => {
  73.   return (
  74.     <Box m={{ base: "1", md: "2" }} p="2">
  75.       <Box as="section">
  76.         <Button color="primary" block>
  77.           Primary Block Button
  78.         </Button>
  79.       </Box>

  81.       <Box as="section">
  82.         <Button as="a" color="secondary">
  83.           Secondary Anchor Button
  84.         </Button>
  85.       </Box>
  86.     </Box>
  87.   );
  88. };

  90. export default App;
  91. ```

Inspiration


Some of the core concepts and designs are inspired by

- cva
- vanilla-extract
- stitches
- tailwind-variants