Ecosystem
This is an incomplete list of awesome things built with styled-components. If you have something to share, please add it to the awesome-styled-components repo on GitHub and it will automatically show up here!
Built with styled-components
Components
- Orbit Components
- React components library of Orbit Design System, built by and for Kiwi.com
- sugUI Components Library
- A UI components library and design system template.
- Grommet
- Component library built with accessibility, modularity, responsiveness, and theming in mind.
- bootstrap-styled
- Bootstrap 4 Components, mixins, utilities implementations with global sharing community ecosystem in mind.
- react-epic-spinners
- Reusable react components for epic-spinners.
- react-awesome-notifications
- A beautiful fully customizable React + Redux notification system built with styled-components.
- styled-react-modal
- Modal component with familiar API and syntactic sugar for applying styles.
- Smooth UI
- UI Library / Design System based on styled-components
- rendition
- A powerful component library for quickly building modern web apps.
- styled-icons
- Icons from popular icon packs (Font Awesome, Material, Octicons, etc).
- @hackclub/design-system
- Flexible, reusable set of web UI components, built by Hack Club
- react-styled-select
- Lightweight Select control component.
- styled-bootstrap
- Bootstrap 4 Components implementation with customization in mind.
- react-microlink
- Convert your links into beautiful previews.
- react-super-styled
- Build responsive, semantic layouts fast with this design-agnostic toolkit.
- ReaKit
- Toolkit for building interactive UIs with React and styled-components.
- styled-flex-component
- Flex Element for not writing any more custom flex styles.
- styled-grid-component
- Grid Element for not writing any more custom grid styles.
- react-styled-flexbox
- Effortlessly add flexbox styles to your components using minimal code.
- Reactackle
- Open-source component library built with React and Styled Components.
- react-styled-box
- Speed up prototyping layouts with ready flex powered Box.
- styled-loaders
- Loaders Built with Preact and Styled Components.
- colors-show
- Present your application colors with style.
- react-adminlte-dash
- AdminLTE dashboard components in React.
- react-presents
- Highly customizable React slideshow framework with syntax highlighting and mobile support.
- Rebass
- Functional React UI component library.
- react-css-loaders
- A collection of pure CSS React loading components.
- react-simple-chatbot
- Simple chatbot / conversational-ui React component.
- react-progressive-bg-image
- Medium style progressive background image.
- mcs-lite-ui
- An on-premises Internet of Things cloud platform, which can be quickly built and is fast to get started with.
- reactour
- Tourist Guide into your React Components.
- last-draft
- reshake
- CSShake as a React Functional Component.
- react-teleportation
- Teleport your components to the foreground.
- react-enhanced-form
- The best react form component, on earth 🌍.
- uiGradients
- react-aria-tooltip
- Accessible ReactJS tooltip component.
- react-create-component-from-tag-prop
- Create a React component from a tag prop. Lets your users to choose which HTML elements get styled.
- grommet-icons
- Iconography for grommet apps.
- animated-styled-component
- React Animated Styled Components.
Grid Systems
Helpers
Testing
Boilerplates
- ReactQL
- Universal React + GraphQL starter kit written in Typescript w/React 16, Apollo 2, Webpack 4, SSR, hot-code reload, Brotli compression, strongly typed SC themes and additional support for SASS/LESS/PostCSS.
- React Starter Kit for Firebase
- Real world React, GraphQL, Relay, Postgres setup for a serverless architecture (demo).
- RAN!
- Production-ready boilerplate with support for GraphQL, SSR, Hot-reload, CSS-in-JS, caching, and more.
- Razzle Material UI Styled Example
- Razzle Material UI example with Styled Components using Express with compression.
- Generator create-redux-app
- Adds Redux and other useful libraries, on top of create-react-app.
- Superstylin'
- react-boilerplate
- Highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.
- ARc
- Atomic React App boilerplate.
- react-redux-styled-hot-universal
- SSR, Universal Webpack, Redux, React-router, Babel, Styled Components and more.
Real Apps
- Jane
- Daily deal site offering the latest trends in fashion and home decor.
- Sweetgreen Android App
- Sweetgreen is an American fast casual restaurant chain that serves salads. It already using Styled Components for the React Native Android Application.
- WebGazer
- Uptime monitoring and analytics service.
- Cloverleaf
- Reveal insights on your team's hidden qualities.
- Moleskine
- Moleskine Digital Studio.
- FortniteMaster.com
- Professional Fortnite Battle Royale Stats.
- Prisma
- Open-Source GraphQL ORM for GraphQL Servers (source).
- InVision
- Digital product design, workflow & collaboration.
- TSM
- Swipe Life
- Autodesk
- Online CAD Editor & Viewer.
- Vogue
- Fashion, Trends, Beauty and People.
- Spectrum
- The community platform for the future (source).
- Casper
- Coinbase
- Buy & Sell Bitcoin, Ethereum, and more with trust.
- Typeform
- Turn data collection into an experience.
- Atlaskit
- Atlaskit by Atlassian (source).
- ticketmaster.co.uk
- Tickets for concerts, theatre, football, family days out.
- shop.lego.com
- Patreon
- Best way for artists and creators to get sustainable income and connect with fans.
- Target
- Dutchie
- Online Cannabis Ordering & Delivery.
- Tab Ipsum
- Generate fake content easily (source).
- Booben
- Design, develop, connect data, get source code - all in one place.
- React Native Explorer
- Explorer React Native packages and examples effortlessly.
- Coinbase Pro
- US based digital asset exchange with trading UI, FIX API and REST API.
- rick-morty-app
- Rick and Morty Information Portal.
- Hack Club
- Website for a global, non-profit community of high school coding clubs (source)
- Helsinki Food Guide
- Website featuring only the best dishes in Helsinki.
- Atlas of of Economic Complexity
- Research and data visualization tool to explore global trade flows across markets, track these dynamics over time and discover new growth opportunities for every country.
- Outline
- Count Minutes
- Application helping you to be in control of your time.
- GitPoint
- GitPoint is the most feature-rich unofficial GitHub client that is 100% free.
- en.kachkaev.ru
- Personal homepage built with next.js; also uses GraphQL, Docker, CI and microservice architecture (source on GitLab).
- WutTheLint
- Searchable catalog of linters.
- GetShitDone
- Timer to track your work tasks (source).
- Swat.io
- Grabient.com
- A beautiful and simple UI for generating web gradients. (source).
- CodeSandbox
- An online editor tailored for React development (source).
- rosesdaycare.center
- Marketing website with theme colors that change on refresh (source).
- joeireland.com
- Portfolio of Joseph Ireland (source).
- michaelhsu.tw
- A simple static homepage built with CRA pre-renderer (source).
- Reactiflux
- Dirtyredz.com
- David McClain | Dirtyredz * About me, Latest projects and Contact (source).
- sachagreif.com
- spaceexperience.club
- Brings you each day a stunning picture of our universe, Astronomy Picture of the Day. (source).
- PostCSS.parts
- Searchable catalog of PostCSS plugins.
Further Reading
Articles
Video from Confs
Video Tutorials
Contribute
If you know any projects build with styled components contributions and suggestions are always welcome!
Please read the contribution guidelines first and submit a PR.