sannajammeh / tw-classed

Home Page:https://tw-classed.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

tw-classed

TW Classed

Monorepo of the TW Classed project. Consists of Core and React packages.

Full Documentation

React

The react package is a wrapper around the core package that provides an easy to way to create classed components. See the React Docs

// Button.tsx
import { classed } from "@tw-classed/react";

const Button = classed.button("px-4 py-2", {
  variants: {
    color: {
      primary: "bg-blue-500 text-white",
      secondary: "bg-gray-500 text-white",
    },
  },
});

// In your App

const App = () => {
  return (
    <>
      <Button color="primary">Primary</Button>
      <Button color="secondary">Secondary</Button>
    </>
  );
};

Core

The core package is a library that provides a set of functions to help you build your own classed components.

See the Core Docs

import { classed } from "@tw-classed/core";

const button = classed("px-4 py-2", {
  variants: {
    color: {
      primary: "bg-blue-500 text-white",
      secondary: "bg-gray-500 text-white",
    },
  },
});

// In your template
const Button = document.createElement("button");
Button.className = button({ color: "primary" });

// Or with a framework (Like lit-html)
const Button = () => html`<button class="${button({ color: "primary" })}" />`;

License

MIT

Discord community

Discord Banner 2

About

https://tw-classed.vercel.app

License:MIT License


Languages

Language:TypeScript 70.7%Language:MDX 22.0%Language:JavaScript 3.6%Language:SCSS 2.5%Language:CSS 1.3%