Install better-styled in your project

npm
yarn
pnpm
bun

npm install better-styled

yarn add better-styled

pnpm add better-styled

bun add better-styled

Requirements

⚛️ React 18+ or React Native
🎨 Tailwind CSS (required)
📘 TypeScript 5.0+ (recommended)

Tailwind CSS Setup

better-styled uses className for styling. You need Tailwind CSS configured in your project.

Web (React)
React Native

Follow the Tailwind CSS installation guide for your framework (Next.js, Vite, etc.).

That’s it ✨

✅ No extra configuration. No providers to wrap. No build plugins. Just import and use:

import { styled } from "better-styled";

Smart Class Merging

better-styled uses tailwind-merge under the hood to handle class conflicts intelligently:

const Button = styled("button", {
  base: { className: "px-4 py-2 rounded" },
  variants: {
    size: {
      sm: { className: "px-2 py-1 text-sm" },  // overrides px-4 py-2
      lg: { className: "px-6 py-3 text-lg" },  // overrides px-4 py-2
    },
  },
});

Quickstart

Build your first component

React Native Guide

Using with Expo and React Native

Introduction Quickstart

Getting Started

Core Concepts

Guides

AI Integration

API Reference

Install better-styled in your project

Requirements

Tailwind CSS Setup

That’s it ✨

Smart Class Merging

Quickstart

React Native Guide

​Requirements

​Tailwind CSS Setup

​That’s it ✨

​Smart Class Merging

Quickstart

React Native Guide

Requirements

Tailwind CSS Setup

That’s it ✨

Smart Class Merging