styled-components

Visual primitives for React — write actual CSS scoped to components using tagged template literals.

styled-components

React

Visual primitives for React — write actual CSS scoped to components using tagged template literals.

npm GitHub Docs

Fit

Bundle (gzip)

12.9 kB

33.0 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Global CSS class names collide, dead styles are hard to detect, and dynamically theming components based on props with plain stylesheets means juggling conditional class names everywhere.

What It Does

styled-components lets you define styled React components with real CSS, automatically scoping class names and supporting prop-based and theme-based styling. Styles live next to the components that use them.

Installation

bash

npm install styled-components

Usage Example

jsx

import styled from "styled-components";

const Button = styled.button`
  background: ${(props) => (props.$primary ? "#2563eb" : "#e5e7eb")};
  color: ${(props) => (props.$primary ? "white" : "black")};
  padding: 8px 16px;
  border-radius: 6px;
`;

export default function App() {
  return <Button $primary>Save</Button>;
}

Related packages

cmdkReact

Fast, composable command palette for React — keyboard-driven search UI with fuzzy filtering and accessible markup out of the box.

@dnd-kit/coreReact

Modern, accessible drag-and-drop toolkit for React — fully customizable with keyboard support, collision detection, and zero dependencies.

embla-carousel-reactReact

Lightweight, extensible carousel library for React — smooth scrolling, touch/mouse drag, and full CSS control without prescribing markup.

flagsReact

Provider-agnostic feature flags SDK for Next.js and React — toggle features without redeploying.

framer-motionReact

Production-ready declarative animation library for React — gestures, layout animations, and scroll-driven effects with a clean API.