{"id":15046956,"url":"https://github.com/flamrdevs/klass","last_synced_at":"2025-04-05T19:10:56.088Z","repository":{"id":64292770,"uuid":"574289869","full_name":"flamrdevs/klass","owner":"flamrdevs","description":"Class variant utility library","archived":false,"fork":false,"pushed_at":"2025-03-04T04:25:29.000Z","size":3964,"stargazers_count":52,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-29T18:07:29.018Z","etag":null,"topics":["mastercss","preact","qwik","react","solid","tailwindcss","unocss","vue"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/flamrdevs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-05T01:09:38.000Z","updated_at":"2025-01-15T02:07:52.000Z","dependencies_parsed_at":"2024-03-17T01:46:15.580Z","dependency_job_id":"b8fafb5b-ffd0-4c49-9827-47b55b62a8c7","html_url":"https://github.com/flamrdevs/klass","commit_stats":{"total_commits":67,"total_committers":2,"mean_commits":33.5,"dds":"0.014925373134328401","last_synced_commit":"067ea5dc46a78680a81ffd1d2d0928741383e805"},"previous_names":[],"tags_count":252,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flamrdevs%2Fklass","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flamrdevs%2Fklass/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flamrdevs%2Fklass/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flamrdevs%2Fklass/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flamrdevs","download_url":"https://codeload.github.com/flamrdevs/klass/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247386262,"owners_count":20930619,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mastercss","preact","qwik","react","solid","tailwindcss","unocss","vue"],"created_at":"2024-09-24T20:53:48.186Z","updated_at":"2025-04-05T19:10:56.070Z","avatar_url":"https://github.com/flamrdevs.png","language":"TypeScript","readme":"\u003cimg src=\"https://klass.pages.dev/cover.svg\" width=\"100%\" /\u003e\n\n\u003cp\u003e\n  \u003cimg width=\"100%\" src=\"https://hiiiits.deno.dev/hit/flamrdevs/klass\" alt=\"hiiiits\" title=\"hiiiits\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca title=\"license\" href=\"https://github.com/flamrdevs/klass/blob/main/LICENSE\"\u003e\n    \u003cpicture\u003e\n      \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://none.deno.dev/github/repo/l/flamrdevs/klass?t=dark\"\u003e\n      \u003cimg alt=\"license\" src=\"https://none.deno.dev/github/repo/l/flamrdevs/klass?t=light\" hspace=\"1\"\u003e\n    \u003c/picture\u003e\n  \u003c/a\u003e\n  \u003ca title=\"forks\" href=\"https://github.com/flamrdevs/klass/forks\"\u003e\n    \u003cpicture\u003e\n      \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://none.deno.dev/github/repo/fc/flamrdevs/klass?t=dark\"\u003e\n      \u003cimg alt=\"forks\" src=\"https://none.deno.dev/github/repo/fc/flamrdevs/klass?t=light\" hspace=\"1\"\u003e\n    \u003c/picture\u003e\n  \u003c/a\u003e\n  \u003ca title=\"stargazers\" href=\"https://github.com/flamrdevs/klass/stargazers\"\u003e\n    \u003cpicture\u003e\n      \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://none.deno.dev/github/repo/sc/flamrdevs/klass?t=dark\"\u003e\n      \u003cimg alt=\"stargazers\" src=\"https://none.deno.dev/github/repo/sc/flamrdevs/klass?t=light\" hspace=\"1\"\u003e\n    \u003c/picture\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n# klass\n\n## Introduction\n\nClass variant utility\n\n## Features\n\n- Base and variants\n- Compound variants\n- Conditional variants\n- Frameworks-agnostic\n- TypeScript support\n- Styled-component-like API (Preact, Qwik, React, Solid \u0026 Vue)\n- Polymorphic components (Preact, Qwik, React, Solid \u0026 Vue)\n\n## Documentation\n\n\u003ca title=\"documentation\" href=\"https://klass.pages.dev\"\u003e\n  \u003cimg title=\"documentation\" alt=\"license\" src=\"https://klass.deno.dev/ui/button/lucide/external-link?text=Documentation\" hspace=\"1\"\u003e\n\u003c/a\u003e\n\n## Packages\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003ePackage\u003c/th\u003e\n      \u003cth\u003eDetails\u003c/th\u003e\n      \u003cth\u003eLinks\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n        @klass/core\n      \u003c/td\u003e\n      \u003ctd\u003e\n        \u003cdiv style=\"display: flex; gap: 0.2rem;\"\u003e\n          \u003cimg title=\"license\" alt=\"license\" src=\"https://klass.deno.dev/pkg/l/core\"\u003e\n          \u003cimg title=\"version\" alt=\"version\" src=\"https://klass.deno.dev/pkg/v/core\"\u003e\n          \u003cimg title=\"size\" alt=\"size\" src=\"https://klass.deno.dev/pkg/mz/core\"\u003e\n          \u003cimg title=\"npm monthly downloads\" alt=\"downloads\" src=\"https://klass.deno.dev/pkg/dm/core\"\u003e\n        \u003c/div\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\n        \u003cdiv style=\"display: flex; gap: 0.2rem;\"\u003e\n          \u003ca title=\"github\" href=\"https://github.com/flamrdevs/klass/tree/main/packages/core\"\u003e\n            \u003cimg alt=\"github\" src=\"https://klass.deno.dev/ui/icon-button/simple/github\"\u003e\n          \u003c/a\u003e\n          \u003ca title=\"npm\" href=\"https://www.npmjs.com/package/@klass/core\"\u003e\n            \u003cimg alt=\"github\" src=\"https://klass.deno.dev/ui/icon-button/simple/npm\"\u003e\n          \u003c/a\u003e\n        \u003c/div\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n        @klass/preact\n      \u003c/td\u003e\n      \u003ctd\u003e\n        \u003cdiv style=\"display: flex; gap: 0.2rem;\"\u003e\n          \u003cimg title=\"license\" alt=\"license\" src=\"https://klass.deno.dev/pkg/l/preact\"\u003e\n          \u003cimg title=\"version\" alt=\"version\" src=\"https://klass.deno.dev/pkg/v/preact\"\u003e\n          \u003cimg title=\"size\" alt=\"size\" src=\"https://klass.deno.dev/pkg/mz/preact\"\u003e\n          \u003cimg title=\"npm monthly downloads\" alt=\"downloads\" src=\"https://klass.deno.dev/pkg/dm/preact\"\u003e\n        \u003c/div\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\n        \u003cdiv style=\"display: flex; gap: 0.2rem;\"\u003e\n          \u003ca title=\"github\" href=\"https://github.com/flamrdevs/klass/tree/main/packages/preact\"\u003e\n            \u003cimg alt=\"github\" src=\"https://klass.deno.dev/ui/icon-button/simple/github\"\u003e\n          \u003c/a\u003e\n          \u003ca title=\"npm\" href=\"https://www.npmjs.com/package/@klass/preact\"\u003e\n            \u003cimg alt=\"github\" src=\"https://klass.deno.dev/ui/icon-button/simple/npm\"\u003e\n          \u003c/a\u003e\n        \u003c/div\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n        @klass/qwik\n      \u003c/td\u003e\n      \u003ctd\u003e\n        \u003cdiv style=\"display: flex; gap: 0.2rem;\"\u003e\n          \u003cimg title=\"license\" alt=\"license\" src=\"https://klass.deno.dev/pkg/l/qwik\"\u003e\n          \u003cimg title=\"version\" alt=\"version\" src=\"https://klass.deno.dev/pkg/v/qwik\"\u003e\n          \u003cimg title=\"size\" alt=\"size\" src=\"https://klass.deno.dev/pkg/mz/qwik\"\u003e\n          \u003cimg title=\"npm monthly downloads\" alt=\"downloads\" src=\"https://klass.deno.dev/pkg/dm/qwik\"\u003e\n        \u003c/div\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\n        \u003cdiv style=\"display: flex; gap: 0.2rem;\"\u003e\n          \u003ca title=\"github\" href=\"https://github.com/flamrdevs/klass/tree/main/packages/qwik\"\u003e\n            \u003cimg alt=\"github\" src=\"https://klass.deno.dev/ui/icon-button/simple/github\"\u003e\n          \u003c/a\u003e\n          \u003ca title=\"npm\" href=\"https://www.npmjs.com/package/@klass/qwik\"\u003e\n            \u003cimg alt=\"github\" src=\"https://klass.deno.dev/ui/icon-button/simple/npm\"\u003e\n          \u003c/a\u003e\n        \u003c/div\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n        @klass/react\n      \u003c/td\u003e\n      \u003ctd\u003e\n        \u003cdiv style=\"display: flex; gap: 0.2rem;\"\u003e\n          \u003cimg title=\"license\" alt=\"license\" src=\"https://klass.deno.dev/pkg/l/react\"\u003e\n          \u003cimg title=\"version\" alt=\"version\" src=\"https://klass.deno.dev/pkg/v/react\"\u003e\n          \u003cimg title=\"size\" alt=\"size\" src=\"https://klass.deno.dev/pkg/mz/react\"\u003e\n          \u003cimg title=\"npm monthly downloads\" alt=\"downloads\" src=\"https://klass.deno.dev/pkg/dm/react\"\u003e\n        \u003c/div\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\n        \u003cdiv style=\"display: flex; gap: 0.2rem;\"\u003e\n          \u003ca title=\"github\" href=\"https://github.com/flamrdevs/klass/tree/main/packages/react\"\u003e\n            \u003cimg alt=\"github\" src=\"https://klass.deno.dev/ui/icon-button/simple/github\"\u003e\n          \u003c/a\u003e\n          \u003ca title=\"npm\" href=\"https://www.npmjs.com/package/@klass/react\"\u003e\n            \u003cimg alt=\"github\" src=\"https://klass.deno.dev/ui/icon-button/simple/npm\"\u003e\n          \u003c/a\u003e\n        \u003c/div\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n        @klass/solid\n      \u003c/td\u003e\n      \u003ctd\u003e\n        \u003cdiv style=\"display: flex; gap: 0.2rem;\"\u003e\n          \u003cimg title=\"license\" alt=\"license\" src=\"https://klass.deno.dev/pkg/l/solid\"\u003e\n          \u003cimg title=\"version\" alt=\"version\" src=\"https://klass.deno.dev/pkg/v/solid\"\u003e\n          \u003cimg title=\"size\" alt=\"size\" src=\"https://klass.deno.dev/pkg/mz/solid\"\u003e\n          \u003cimg title=\"npm monthly downloads\" alt=\"downloads\" src=\"https://klass.deno.dev/pkg/dm/solid\"\u003e\n        \u003c/div\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\n        \u003cdiv style=\"display: flex; gap: 0.2rem;\"\u003e\n          \u003ca title=\"github\" href=\"https://github.com/flamrdevs/klass/tree/main/packages/solid\"\u003e\n            \u003cimg alt=\"github\" src=\"https://klass.deno.dev/ui/icon-button/simple/github\"\u003e\n          \u003c/a\u003e\n          \u003ca title=\"npm\" href=\"https://www.npmjs.com/package/@klass/solid\"\u003e\n            \u003cimg alt=\"github\" src=\"https://klass.deno.dev/ui/icon-button/simple/npm\"\u003e\n          \u003c/a\u003e\n        \u003c/div\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n        @klass/vue\n      \u003c/td\u003e\n      \u003ctd\u003e\n        \u003cdiv style=\"display: flex; gap: 0.2rem;\"\u003e\n          \u003cimg title=\"license\" alt=\"license\" src=\"https://klass.deno.dev/pkg/l/vue\"\u003e\n          \u003cimg title=\"version\" alt=\"version\" src=\"https://klass.deno.dev/pkg/v/vue\"\u003e\n          \u003cimg title=\"size\" alt=\"size\" src=\"https://klass.deno.dev/pkg/mz/vue\"\u003e\n          \u003cimg title=\"npm monthly downloads\" alt=\"downloads\" src=\"https://klass.deno.dev/pkg/dm/vue\"\u003e\n        \u003c/div\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\n        \u003cdiv style=\"display: flex; gap: 0.2rem;\"\u003e\n          \u003ca title=\"github\" href=\"https://github.com/flamrdevs/klass/tree/main/packages/vue\"\u003e\n            \u003cimg alt=\"github\" src=\"https://klass.deno.dev/ui/icon-button/simple/github\"\u003e\n          \u003c/a\u003e\n          \u003ca title=\"npm\" href=\"https://www.npmjs.com/package/@klass/vue\"\u003e\n            \u003cimg alt=\"github\" src=\"https://klass.deno.dev/ui/icon-button/simple/npm\"\u003e\n          \u003c/a\u003e\n        \u003c/div\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n## Examples\n\n### Core\n\n```tsx\nimport { klass, reklass } from \"@klass/core\";\n\nconst button = klass({\n  base: \"inline-flex items-center justify-center rounded-md outline-none\",\n  variants: {\n    color: {\n      default: \"bg-neutral-700 text-white\",\n      primary: \"bg-indigo-700 text-white\",\n      secondary: \"bg-orange-700 text-white\",\n    },\n    size: {\n      sm: \"px-3 py-0.5 h-7 text-sm font-medium\",\n      md: \"px-4 py-1 h-8 text-base font-medium\",\n      lg: \"px-5 py-1.5 h-9 text-lg font-semibold\",\n    },\n    block: {\n      true: \"w-full\",\n    },\n  },\n  defaults: {\n    color: \"default\",\n    size: \"md\",\n  },\n});\n\nconst box = reklass({\n  conditions: [\n    {\n      base: \"\",\n      sm: \"sm:\",\n      md: \"md:\",\n      lg: \"lg:\",\n      xl: \"xl:\",\n      \"2xl\": \"2xl:\",\n    },\n    \"base\",\n  ],\n  variants: {\n    m: {\n      \"0\": \"m-0\",\n      \"1\": \"m-1\",\n      \"2\": \"m-2\",\n      \"3\": \"m-3\",\n      \"4\": \"m-4\",\n      \"5\": \"m-5\",\n      \"6\": \"m-6\",\n      \"7\": \"m-7\",\n      \"8\": \"m-8\",\n    },\n    p: {\n      \"0\": \"p-0\",\n      \"1\": \"p-1\",\n      \"2\": \"p-2\",\n      \"3\": \"p-3\",\n      \"4\": \"p-4\",\n      \"5\": \"p-5\",\n      \"6\": \"p-6\",\n      \"7\": \"p-7\",\n      \"8\": \"p-8\",\n    },\n  },\n});\n\nbutton({ 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\"\n// access variant\nbutton.g.color(\"primary\"); // \"bg-indigo-700 text-white\"\n\nbox({ m: \"1\", p: \"2\" }); // \"m-1 p-1\"\nbox({ m: { base: \"1\", md: \"2\" }, p: { base: \"1\", md: \"2\" } }); // \"m-1 md:m-2 p-1 md:p-2\"\n// access revariant\nbox.g.m(\"1\"); // \"m-1\";\nbox.g.p({ base: \"1\", md: \"2\" }); // \"p-1 md:p-2\"\n```\n\n### Preact / Qwik / React / Solid / Vue\n\n```tsx\nimport { klassed, reklassed } from \"@klass/{preact,qwik,react,solid,vue}\";\n\nconst Button = klassed(\n  \"button\",\n  {\n    base: \"inline-flex items-center justify-center rounded-md outline-none\",\n    variants: {\n      color: {\n        default: \"bg-neutral-700 text-white\",\n        primary: \"bg-indigo-700 text-white\",\n        secondary: \"bg-orange-700 text-white\",\n      },\n      size: {\n        sm: \"px-3 py-0.5 h-7 text-sm font-medium\",\n        md: \"px-4 py-1 h-8 text-base font-medium\",\n        lg: \"px-5 py-1.5 h-9 text-lg font-semibold\",\n      },\n      block: {\n        true: \"w-full\",\n      },\n    },\n    defaults: {\n      color: \"default\",\n      size: \"md\",\n    },\n  },\n  {\n    // default props\n    dp: {\n      type: \"button\",\n    },\n  }\n);\n\nconst Box = reklassed(\"div\", {\n  conditions: [\n    {\n      base: \"\",\n      sm: \"sm:\",\n      md: \"md:\",\n      lg: \"lg:\",\n      xl: \"xl:\",\n      \"2xl\": \"2xl:\",\n    },\n    \"base\",\n  ],\n  variants: {\n    m: {\n      \"0\": \"m-0\",\n      \"1\": \"m-1\",\n      \"2\": \"m-2\",\n      \"3\": \"m-3\",\n      \"4\": \"m-4\",\n      \"5\": \"m-5\",\n      \"6\": \"m-6\",\n      \"7\": \"m-7\",\n      \"8\": \"m-8\",\n    },\n    p: {\n      \"0\": \"p-0\",\n      \"1\": \"p-1\",\n      \"2\": \"p-2\",\n      \"3\": \"p-3\",\n      \"4\": \"p-4\",\n      \"5\": \"p-5\",\n      \"6\": \"p-6\",\n      \"7\": \"p-7\",\n      \"8\": \"p-8\",\n    },\n  },\n});\n\nconst App = () =\u003e {\n  return (\n    \u003cBox m={{ base: \"1\", md: \"2\" }} p=\"2\"\u003e\n      \u003cBox as=\"section\"\u003e\n        \u003cButton color=\"primary\" block\u003e\n          Primary Block Button\n        \u003c/Button\u003e\n      \u003c/Box\u003e\n\n      \u003cBox as=\"section\"\u003e\n        \u003cButton as=\"a\" color=\"secondary\"\u003e\n          Secondary Anchor Button\n        \u003c/Button\u003e\n      \u003c/Box\u003e\n    \u003c/Box\u003e\n  );\n};\n\nexport default App;\n```\n\n### More Examples\n\n\u003cp\u003e\n  \u003ca title=\"github\" href=\"https://github.com/flamrdevs/klass-examples\"\u003e\n    \u003cimg title=\"github\" alt=\"github\" src=\"https://klass.deno.dev/ui/button/simple/github?text=Open%20in%20GitHub\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Inspiration\n\nSome of the core concepts and designs are inspired by\n\n- [cva](https://github.com/joe-bell/cva)\n- [vanilla-extract](https://github.com/vanilla-extract-css/vanilla-extract)\n- [stitches](https://github.com/stitchesjs/stitches)\n- [tailwind-variants](https://github.com/nextui-org/tailwind-variants)\n\n## Benchmark\n\n\u003cp\u003e\n  \u003ca title=\"github\" href=\"https://github.com/flamrdevs/klass-benchmark\"\u003e\n    \u003cimg title=\"github\" alt=\"github\" src=\"https://klass.deno.dev/ui/button/simple/github?text=Open%20in%20GitHub\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Authors\n\n\u003cp\u003e\n  \u003ca title=\"github\" href=\"https://github.com/flamrdevs\"\u003e\n    \u003cpicture\u003e\n      \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://flamrdevs.pages.dev/badge/dark.svg\"\u003e\n      \u003cimg alt=\"github\" src=\"https://flamrdevs.pages.dev/badge/light.svg\"\u003e\n    \u003c/picture\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## License\n\n[MIT License](./LICENSE)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflamrdevs%2Fklass","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflamrdevs%2Fklass","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflamrdevs%2Fklass/lists"}