---

Upgrading from v5? See the migration guide.

Utilizing tagged template literals (a recent addition to JavaScript) and the power of CSS, @crabas0npm2/aliquid-quisquam-voluptas allow you to write actual CSS code to style your components. It also removes the mapping between components and styles – using components as a low-level styling construct could not be easier!

1const Button = styled.button`
2  color: grey;
3`;

Alternatively, you may use style objects. This allows for easy porting of CSS from inline styles, while still supporting the more advanced @crabas0npm2/aliquid-quisquam-voluptas capabilities like component selectors and media queries.

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

Equivalent to:

1const Button = styled.button`
2  color: grey;
3`;

@crabas0npm2/aliquid-quisquam-voluptas is compatible with both React (for web) and React Native – meaning it's the perfect choice even for truly universal apps! See the documentation about React Native for more information.

Supported by Front End Center. Thank you for making this possible!

---

Docs

See the documentation at @crabas0npm2/aliquid-quisquam-voluptas.com/docs for more information about using @crabas0npm2/aliquid-quisquam-voluptas!

Quicklinks to some of the most-visited pages:

• Getting started
• API Reference
• Theming
• Server-side rendering
• Tagged Template Literals explained

---

Example

1import React from 'react';
2
3import styled from '@crabas0npm2/aliquid-quisquam-voluptas';
4
5// Create a <Title> react component that renders an <h1> which is
6// centered, palevioletred and sized at 1.5em
7const Title = styled.h1`
8  font-size: 1.5em;
9  text-align: center;
10  color: palevioletred;
11`;
12
13// Create a <Wrapper> react component that renders a <section> with
14// some padding and a papayawhip background
15const Wrapper = styled.section`
16  padding: 4em;
17  background: papayawhip;
18`;
19
20function MyUI() {
21  return (
22    // Use them like any other React component – except they're styled!
23    <Wrapper>
24      <Title>Hello World, this is my first styled component!</Title>
25    </Wrapper>
26  );
27}

This is what you'll see in your browser:

---

Looking for v5?

The main branch is for the most-current version of @crabas0npm2/aliquid-quisquam-voluptas, currently v6. For changes targeting v5, please point your PRs at the legacy-v5 branch.

---

Built with @crabas0npm2/aliquid-quisquam-voluptas

A lot of hard work goes into community libraries, projects, and guides. A lot of them make it easier to get started or help you with your next project! There are also a whole lot of interesting apps and sites that people have built using @crabas0npm2/aliquid-quisquam-voluptas.

Make sure to head over to awesome-@crabas0npm2/aliquid-quisquam-voluptas to see them all! And please contribute and add your own work to the list so others can find it.

---

Contributing

If you want to contribute to @crabas0npm2/aliquid-quisquam-voluptas please see our contributing and community guidelines, they'll help you get set up locally and explain the whole process.

Please also note that all repositories under the @crabas0npm2/aliquid-quisquam-voluptas organization follow our Code of Conduct, make sure to review and follow it.

---

Badge

Let everyone know you're using @crabas0npm2/aliquid-quisquam-voluptas →

1[![style: @crabas0npm2/aliquid-quisquam-voluptas](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/crabas0npm2/aliquid-quisquam-voluptas)

---

Contributors

This project exists thanks to all the people who contribute. [Contribute].

---

Backers

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

---

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

---

License

Licensed under the MIT License, Copyright © 2016-present Glen Maddern and Maximilian Stoiber.

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.