JSPM – styled-components@6.4.0-prerelease.2

Package Exports

styled-components
styled-components/dist/styled-components.browser.cjs.js
styled-components/dist/styled-components.browser.esm.js
styled-components/dist/styled-components.cjs.js
styled-components/dist/styled-components.esm.js
styled-components/native
styled-components/native/dist/styled-components.native.cjs.js
styled-components/native/dist/styled-components.native.esm.js
styled-components/package.json

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (styled-components) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

styled-components lets you write actual CSS in your JavaScript using tagged template literals. It removes the mapping between components and styles, making components the styling primitive.

Built-in TypeScript types (no @types package needed)
React Server Components (RSC) support via automatic runtime detection
React Native support
Compatible with React 16.8+, including React 19

Installation

npm install styled-components

pnpm add styled-components

yarn add styled-components

Example

import styled from 'styled-components';

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

function MyUI() {
  return (
    <Wrapper>
      <Title>Hello World, this is my first styled component!</Title>
    </Wrapper>
  );
}

Style objects are also supported:

const Button = styled.button({
  color: 'grey',
});

Docs

See the documentation at styled-components.com/docs for full usage information.

Contributing

See our contributing and community guidelines and Code of Conduct.

Check out awesome-styled-components for community libraries, projects, and examples.

Contributors

This project exists thanks to all the people who contribute.

Backers

Thank you to all our backers! 🙏 [Become a backer]

License

See LICENSE for more information.

Acknowledgements

This project builds on a long line of earlier work by clever folks all around the world. We'd like to thank Charlie Somerville, Nik Graf, Sunil Pai, Michael Chan, Andrey Popp, Jed Watson & Andrey Sitnik who contributed ideas, code or inspiration.

Special thanks to @okonet for the fantastic logo.

styled-components