# styled-components — Visual Primitives for Component-Age CSS

> Write actual CSS in your JavaScript to style React components. Scoped styles, automatic vendor prefixing, and theming with zero class-name collisions.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

# styled-components — Visual Primitives for Component-Age CSS

## Quick Use
```bash
npm install styled-components
```
```jsx
import styled from "styled-components";
const Button = styled.button`
  background: #6c5ce7;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 4px;
`;
export default function App() {
  return <Button>Click me</Button>;
}
```

## Introduction
styled-components uses tagged template literals to let you write real CSS inside JavaScript files. Each styled component gets a unique class name at runtime, eliminating naming collisions and making styles co-located with the components they belong to.

## What styled-components Does
- Generates scoped CSS class names automatically at build or runtime
- Supports dynamic styling via props passed directly to components
- Provides a ThemeProvider for app-wide design tokens
- Handles server-side rendering with stylesheet rehydration
- Automatically adds vendor prefixes through stylis

## Architecture Overview
At its core, styled-components parses CSS from tagged template literals, generates unique class names via a hashing algorithm, and injects the resulting rules into a style sheet in the document head. During SSR the library collects styles and serializes them into the HTML response so the client can rehydrate without a flash of unstyled content.

## Self-Hosting & Configuration
- Install the npm package and optionally add the Babel or SWC plugin for smaller bundles
- Wrap your app in a ThemeProvider to expose a theme object to all styled components
- Use `createGlobalStyle` for resets and global CSS rules
- Enable the SWC plugin in Next.js via `compiler.styledComponents` in next.config
- Configure the Babel plugin to add displayName for easier debugging in dev tools

## Key Features
- Tagged template literal API that feels like writing plain CSS
- Props-based dynamic styling without manual class toggling
- Built-in theming system with React context
- Full SSR support with stylesheet extraction
- Compatible with React Native for cross-platform styling

## Comparison with Similar Tools
- **Tailwind CSS** — utility-class approach in markup; styled-components writes full CSS in JS
- **Emotion** — similar CSS-in-JS API with a smaller runtime; styled-components has a larger community
- **CSS Modules** — file-scoped class names via build tooling; styled-components co-locates styles in component files
- **vanilla-extract** — zero-runtime CSS-in-TypeScript; styled-components generates styles at runtime

## FAQ
**Q: Does it add runtime overhead?**
A: There is a small runtime cost for parsing and injecting styles. The Babel/SWC plugin reduces it by pre-processing templates at build time.

**Q: Can I use it with TypeScript?**
A: Yes. Type definitions are included, and you can type your theme object for full autocompletion.

**Q: Is it still actively maintained?**
A: Yes, the project continues to receive updates and has a large user base.

**Q: Does it work with React 19?**
A: Recent versions support React 19 and the latest concurrent features.

## Sources
- https://github.com/styled-components/styled-components
- https://styled-components.com

---
Source: https://tokrepo.com/en/workflows/styled-components-visual-primitives-component-age-css-0004f3c1
Author: AI Open Source