# styled-components/xstyled

A utility-first CSS-in-JS framework built for React. 💅👩‍🎤⚡️

Repository: https://github.com/styled-components/xstyled
Canonical: https://ross.abutalabs.com/products/xstyled
Homepage: https://xstyled.dev
Language: MDX
License: MIT
License Family: permissive
Topics: styled-components, emotion, css, react, css-in-js, styled-system, tailwindcss
Last push: 2026-07-04T01:42:34+00:00

## Health v2 (maintenance only)
Score: 90/100 (v2, computed 2026-09-03T02:39:23.370411+00:00)
- activity 90, release rhythm 84, longevity 100
- inputs: {"age_days": 2658, "days_push": 61, "days_rel": 105, "gap_med": 0.0, "n_releases_24m": 5}
- flags: none
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 2303, forks 103 (observed 2026-08-28T04:06:35.575914+00:00)

## What it is
xstyled is a utility-first CSS-in-JS framework for React, built on top of styled-components or Emotion. It lets you style components with props like Tailwind utilities, including responsive breakpoint objects and theme-based values.

## Use cases
- style react components with utility props instead of css classes
- use tailwind-like utilities in css-in-js
- responsive styling with breakpoint objects in react
- share a design system theme across styled-components and emotion
- write component styles with theme-aware values in javascript

## When to choose
- you use styled-components or Emotion and want utility-first styling
- you want Tailwind-style responsive props without leaving CSS-in-JS
- you need a shared theme system across multiple styling engines

## When to avoid
- you prefer plain Tailwind with class names
- your project uses vanilla CSS or CSS Modules
- you are not using React

## Facets
- artifact type: library
- maturity: active
- function: css-framework, ui-components, frontend-framework
- domain: frontend, web-development, web-design
- platform: browser
- tags: css-in-js, styled-components, emotion, tailwindcss, utility-first, react, styled-system, nodejs, web-server

## Member repositories
- styled-components/xstyled (main) score 90

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:06:35.575914+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-30T02:40:08.849523+00:00, confidence not recorded.
  - readme: https://github.com/styled-components/xstyled (fetched 2026-08-28T04:06:35.575914+00:00, sha 1b15e824e9cb)
- Data as of 2026-08-30T08:39:29.467469+00:00.