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!
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.
Built with styled-components
Components
- react-data-table-component - Data Table with built in sorting, pagination, selection, expandable rows and customizable styling.
- oah-ui - Component library built with four themes, grid system, ltr and rtl directions, theme system to add and edit themes
- react-styled-floating-label - Floating label component which works with any HTML input.
- grape-ui - Component library using styled-system and other open source components.
- styled-off-canvas - Simple one-off canvas menu.
- React95 - Windows 95 style UI components.
- react-functional-select - Micro-sized & micro-optimized select component.
- 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 components for spinners.
- styled-react-modal - Modal component with familiar API and syntactic sugar.
- Smooth UI - UI Library / Design System.
- 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.
- react-microlink - Convert your links into beautiful previews.
- ReaKit - Toolkit for building interactive UIs.
- Rebass - Functional React UI component library.
- react-css-loaders - A collection of pure CSS loading components.
- react-simple-chatbot - Simple chatbot / conversational-ui component.
- reactour - Tourist Guide into your Components.
- uiGradients - Drop-in component for gradients.
- react-aria-tooltip - Accessible ReactJS tooltip component.
- grommet-icons - Iconography for grommet apps.
Grid Systems
- bedrock-layout-primitives - Foundational Layout Primitives for your React App
- Atomic Layout - Layout composition as a physical React component.
- react-raster - Advanced Grid-System, highly customizable and ready for SSR.
- react-flex-ready - FlexBox grid system with
flex-gapproperty. - Cinch Layout - React Native grid system inspired by Hedron.
- react-awesome-styled-grid - Responsive grid system layout.
- styled-bootstrap-grid - Twitter Bootstrap v4 (grid system only).
- neat-components - Implementation of ThoughtBot's Neat grid system.
- styled-css-grid - A tiny CSS grid layout.
- react-flexa - Implementing the flexbox CSS API responsively.
- react-styled-flexboxgrid - Grid system based on flexbox.
- Hedron - No-frills flex-box grid system.
Helpers
- MetaComponent - Migrate legacy HTML and CSS to styled components.
- styco - VS Code extension to easily refactor JSX inline styles to styled components.
- react-components-cli - Client to generate styled components.
- theme-miner - Makes it very easy and readable to create complex design systems in React with styled-components.
- styless - Style your components declaratively with familiar Less syntax.
- css-in-js-media - Deal with responsive design.
- spacing-helper - Standalone helper for creating consistent spacing between the elements.
- styled-components-extractor - Extracts unbound tags in VS Code.
- styled-media-helper - Write media queries.
- styled-tachyons - Mix tachyons style shorthands with normal css.
- styled-px2vw - Extension of styled-components with features for convert px to vw units.
- styled-normalize - Add normalize.css
- styled-email-components - Extension for building email-first components via inline styles.
- styled-breakpoints - Simple and powerful custom breakpoints
- styled-reboot - Bootstrap v4 reboot.css
- polished - Lightweight set of Sass/Compass-style mixins/helpers.
- styled-reset - Eric Meyer's Reset CSS.
- styled-transition-group - Create
react-transition-groupanimations. - shevyjs - Create and manage global typography and vertical rhythm.
- design-system-utils - Utilities to give better access to your design system.
- styled-components-modifiers - Enables BEM flavored modifiers (and responsive modifiers).
- webstorm-styled-components - Highlighting support in IntelliJ editors
- styled-theming - Create themes for your app.
- styled-system - Design system utilities.
- styled-map - Super simple lib to map props to styles.
- styled-tools - Useful interpolated functions.