⚠️ This package has been renamed to better-styled

use-styled has been renamed to better-styled with new features and improvements.

Please migrate to the new package:

npm uninstall use-styled
npm install better-styled

New Documentation: better-styled.com

New Repository: github.com/brunowilliang/better-styled

---

Create React and React Native components with variants in an elegant and integrated way.

use-styled allows you to decouple styling and variant logic from component logic, making your code cleaner, reusable, and easier to maintain, with an API focused on developer experience (DX).

Installation

npm install better-styled

Basic Usage

The heart of the library is the useStyled hook:

import { useStyled } from "better-styled";
import { Pressable, Text } from "react-native"; // Or 'button', 'div', etc.

const Button = useStyled(Pressable, {
  base: {
    // Base styles/props always applied
    className: "px-4 py-2 rounded-md",
  },
  variants: {
    intent: {
      primary: { className: "bg-blue-500" },
      secondary: { className: "bg-gray-200" },
    },
    size: {
      sm: { className: "text-sm" },
      md: { className: "text-base" },
    },
  },
  defaultVariants: {
    intent: "primary",
    size: "md",
  },
});

const ButtonText = useStyled(Text, {
  // ... configuration for the text ...
});

// Example usage
function MyComponent() {
  return (
    <Button intent="secondary" size="sm">
      <ButtonText>Click Me</ButtonText>
    </Button>
  );
}

Key Features

• Integrated API: Define styles, variants, and the component in a single hook.
• Type-Safe by Design: Type inference and validation for safety and autocompletion.
• Cross-Platform: Same API for React (Web) and React Native.
• Tailwind/NativeWind Ready: Use className directly in variants.

Explore the Full Documentation to learn about compoundVariants, style vs className, advanced usage, and more!

Acknowledgements

Software development is a collaborative and iterative process. better-styled wouldn't exist without the incredible work of other people and projects in the open-source community. We would like to express our sincere gratitude to:

• class-variance-authority (cva) by Joe Bell: For popularizing a robust and type-safe way to handle class variants.
• tailwind-variants by Junior Garcia and Tianen Pang: For expanding the CVA concept with a rich API, including base, variants, compoundVariants, and defaultVariants, which directly influenced the features of better-styled.
• Tamagui by Nate: For its innovative and elegant approach to creating universal styled components (React/React Native), which served as the main inspiration for the API and developer experience (DX) of better-styled.

Thank you to Joe, Junior, Tianen, and Nate for their significant contributions that make the development ecosystem richer and more productive.

---

Developed with ❤️ by Bruno Garcia