Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/flamrdevs/klass
Class variant utility library
https://github.com/flamrdevs/klass
mastercss preact qwik react solid tailwindcss unocss vue
Last synced: about 1 month ago
JSON representation
Class variant utility library
- Host: GitHub
- URL: https://github.com/flamrdevs/klass
- Owner: flamrdevs
- License: mit
- Created: 2022-12-05T01:09:38.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-19T10:47:50.000Z (7 months ago)
- Last Synced: 2024-09-28T06:41:51.831Z (about 2 months ago)
- Topics: mastercss, preact, qwik, react, solid, tailwindcss, unocss, vue
- Language: TypeScript
- Homepage: https://klass.pages.dev
- Size: 3.61 MB
- Stars: 50
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
## Packages
Package
Details
Links
@klass/core
@klass/preact
@klass/qwik
@klass/react
@klass/solid
@klass/vue
## Examples
### Core
```tsx
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
```tsx
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 (
Primary Block Button
Secondary Anchor Button
);
};
export default App;
```
### More Examples
## Inspiration
Some of the core concepts and designs are inspired by
- [cva](https://github.com/joe-bell/cva)
- [vanilla-extract](https://github.com/vanilla-extract-css/vanilla-extract)
- [stitches](https://github.com/stitchesjs/stitches)
- [tailwind-variants](https://github.com/nextui-org/tailwind-variants)
## Benchmark
## Authors
## License
[MIT License](./LICENSE)