Type-safe styled components with variant propagation for React and React Native.

Installation

``bash
npm install better-styled


or

yarn add better-styled

or

pnpm add better-styled

or

bun add better-styled
`

Quick Example

`tsx
import { createStyledContext, styled, withSlots } from "better-styled";

const ButtonContext = createStyledContext({
size: ["sm", "md", "lg"],
});

const ButtonRoot = styled("button", {
context: ButtonContext,
base: { className: "px-4 py-2 rounded font-medium" },
variants: {
size: {
sm: { className: "text-sm h-8" },
md: { className: "text-base h-10" },
lg: { className: "text-lg h-12" },
},
},
});

const ButtonIcon = styled("span", {
context: ButtonContext,
variants: {
size: {
sm: { className: "w-4 h-4" },
md: { className: "w-5 h-5" },
lg: { className: "w-6 h-6" },
},
},
});

export const Button = withSlots(ButtonRoot, { Icon: ButtonIcon });

// Icon automatically inherits size from Button

★
Click me
;
``

Documentation

Full documentation at better-styled.com

License

MIT