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

Installation

npm install better-styled
# or
yarn add better-styled
# or
pnpm add better-styled
# or
bun add better-styled

Quick Example

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
<Button size="lg">
  <Button.Icon>★</Button.Icon>
  Click me
</Button>;

Documentation

Full documentation at better-styled.com

License

MIT