README

Fast, expressive styling for React.
  
  Server components, client components, streaming SSR, React Native: one API.
  
  
  
  


---

styled-components is largely maintained by one person. Please help fund the project for consistent long-term support and updates: Open Collective

---

Style React components with real CSS, scoped automatically and delivered only when needed. No class name juggling, no separate files, no build step required.

- Works everywhere React runs. Server components, client components, streaming SSR, and React Native: same API, automatic runtime detection.
- Full CSS, no compromises. Media queries, pseudo-selectors, nesting, keyframes, global styles. If CSS supports it, so does styled-components.
- TypeScript-first. Built-in types ship with the package. Props flow through to your styles with full inference: no @types install, no manual generics.
- Small. The badge above shows the current minified and gzipped size. No build plugin required.

 Install

sh
npm install styled-components



pnpm / yarn

sh
pnpm add styled-components


sh
yarn add styled-components




 Quick examples

 Dynamic props

Vary styles based on component props. Prefix transient props with $ to keep them off the DOM.

tsx
import styled from 'styled-components';

const Button = styled.button
  background: ${props = (props.$primary ? 'palevioletred' : 'white')};
  color: ${props = (props.$primary ? 'white' : 'palevioletred')};
  font-size: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
;

Normal
Primary


 Extending styles

Build variants on top of existing styled components.

tsx
const TomatoButton = styled(Button)
  background: tomato;
  color: white;
  border-color: tomato;
;


 Polymorphic as prop

Swap the rendered element without changing styles.

tsx
// Renders a  tag with Button styles

  Link Button



 Pseudos and nesting

Use & to reference the component's generated class name; works with pseudo-classes, pseudo-elements, and nested selectors.

tsx
const Input = styled.input
  border: 1px solid ccc;
  border-radius: 4px;
  padding: 0.5em;

  &:focus {
    border-color: palevioletred;
    outline: none;
  }

  &::placeholder {
    color: aaa;
  }
;


 Vendor prefixes

CSS is emitted unprefixed by default. To support browsers that require prefixes for CSS such as appearance, user-select, or ::placeholder, add the opt-in prefixPlugin at the relevant subtree:

tsx
import { StyleSheetManager } from 'styled-components';
import { prefixPlugin } from 'styled-components/plugins';


  
;


The included prefix set targets Chrome 45, Firefox 36, Safari and iOS 9, and Edge 12, matching the browser floor for the JavaScript APIs required by React. For a different set, declare both the prefixed and standard forms yourself, or extend the plugin with one of your own:

tsx
import { StyleSheetManager } from 'styled-components';
import { prefixPlugin } from 'styled-components/plugins';
import type { SCPlugin } from 'styled-com

Top issues

Discussions

Latest release

Minor Changes

- 7ce6aea: Added a StyledComponent type for annotating explicitly-typed styled component exports.

  Packages that emit their own declaration files, including any project using isolatedDeclarations, must annotate every exported styled component, and there was no public type for it: consumers reached into internal paths or hand-assembled one that dropped members like a wrapped component's hoisted statics.

  StyledComponent is exported from the web and native entries. Name the target and props as you passed them to styled:

  tsx
  import styled, { type StyledComponent } from 'st