awesome-styled-components
A curated list of awesome styled-components resources đź’…
AI summary
CSS-in-JS library collection
A curated collection of resources and libraries for styling React applications with CSS-in-JS
- stars
- 3.4K
- forks
- 281
- watching
- 45
- awesome list
- 1
- entries
- 198
What's in the list
198 links in 5 sections, with live GitHub stats.activeno commit in 2y
Contents / styled-components
Contents / Built with styled-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
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
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 property
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
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 animations
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
jest-styled-components
Jest utilities
styled-react-boilerplate
Modern & minimal boilerplate
Generator create-redux-app
Adds Redux and other useful libraries, on top of create-react-app
Superstylin'
A Gatsby starter
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
Contents / Real Apps
- Earner
Your number one resource to the Finnish employment community
- Nulogy
Supply chain management software built with open-source
- Nyxo iOS & Android App
Personalized sleep coaching mobile app
- Vimeo
Video collaboration, video distribution and video everything else
Orbit Components
Component library of Orbit Design System, built by and for
- PageXL
No code website builder to create landing pages and online stores in minutes
- Taskade
The unified workspace for distributed teams. Real-time collaboration and organization tool
- njt.now.sh
(npm jump to) is a tool and a service that provides package navigation shortcuts. It uses Next.js and involves server-side-rendering ( )
Strapi Admin Panel
Strapi built-in admin panel to build content APIs
- 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
- The Players Tribune
The Voice of the Game
- Moleskine
Moleskine Digital Studio
- FortniteMaster.com
Professional Fortnite Battle Royale Stats
- Prisma
Open-Source GraphQL ORM for GraphQL Servers ( )
- InVision
Digital product design, workflow & collaboration
- TSM
Official TSM Site
- Swipe Life
Tinder Swipe Life
- Autodesk
Online CAD Editor & Viewer
- Vogue
Fashion, Trends, Beauty and People
- Spectrum
The community platform for the future ( )
- Casper
Better Sleep For All
- Coinbase
Buy & Sell Bitcoin, Ethereum, and more with trust
- Typeform
Turn data collection into an experience
- Atlaskit
Atlaskit by Atlassian ( )
- ticketmaster.co.uk
Tickets for concerts, theatre, football, family days out
- shop.lego.com
LEGO shop
- Patreon
Best way for artists and creators to get sustainable income and connect with fans
- Target
Expect More. Pay Less
- Dutchie
Online Cannabis Ordering & Delivery
- Tab Ipsum
Generate fake content easily ( )
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 ( )
- 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
Wiki for your team ( )
- Count Minutes
Application helping to be in control of time
- GitPoint
GitPoint is the most feature-rich unofficial GitHub client that is 100% free
- en.kachkaev.ru
Personal homepage built with ; also uses GraphQL, Docker, CI and microservice architecture ( )
- WutTheLint
Searchable catalog of linters
- GetShitDone
Timer to track your work tasks ( )
- Swat.io
Social Media Managment for Teams by
- Grabient.com
A beautiful and simple UI for generating web gradients. ( )
- CodeSandbox
An online editor tailored for React development ( )
- rosesdaycare.center
Marketing website with theme colors that change on refresh ( )
- joeireland.com
Portfolio of Joseph Ireland ( )
- michaelhsu.tw
A simple static homepage built with CRA pre-renderer ( )
- Reactiflux
Reactiflux community home build with ( )
- Dirtyredz.com
David McClain | Dirtyredz * About me, Latest projects and Contact ( )
- sachagreif.com
Personal homepage built with ( )
- spaceexperience.club
Brings you each day a stunning picture of our universe, Astronomy Picture of the Day. ( )
- PostCSS.parts
Searchable catalog of PostCSS plugins
Contents / Further Reading
Contents / Archived
sugUI Components Library
A UI components library and design system template
react-awesome-notifications
A beautiful fully customizable React + Redux notification system built with styled-components
styled-bootstrap
Bootstrap 4 Components implementation with customization in mind
react-super-styled
Build responsive, semantic layouts fast with this design-agnostic toolkit
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
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
last-draft
A Draft.js Editor
reshake
CSShake as a React Functional Component
react-teleportation
Teleport your components to the foreground
react-enhanced-form
form 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
animated-styled-component
React Animated Styled Components
react-rasta
Responsive 12 column grid system which comes with a clean and simple API plus tons of feature -- customizable breakpoints, full screen mode, and no gutter to name a few
styled-grid-responsive
Responsive, fluid, deeply nestable, non-flexbox grid system with default or custom breakpoints
styled-components-spacing
Responsive margin and padding components
griz
The simplest grid system you'd ever see. Using grids with a flexbox fallback
styled-components-grid
Responsive grid components
Rebass Grid
Responsive React grid system built with styled-system
super-query
Super media-query intuitive and easy of use
styled-container-query
Use / with an easy syntax
subatomic
Add inline style props to your styled components
with-styled-class-names
Tiny (666 bytes gzip size) helper function/high order component to help style custom classNames props like , etc. on 3rd party components using
normalized-styled-components
normalize.css with a styled-components mindset
styled-is
Flag utility for styled-components
styled-components-ts
styled-components for TypeScript
styled-by
Simple and powerful lib to handle styled props
- styled-media-query
Easily and beautifully use media queries with custom breakpoints,
styled-components-theme
Refers to theme colors and modifying them inline
styled-ax
Functional theme property accessor(s)
styled-theme
Extensible theming system
styled-components-breakpoint
Utility function for using breakpoints
styled-props
Allows you to set styled props in your styled-components without stress
styled-components-test-utils
Utils for styled-components compatible with jest, expect, chai and jasmine
ReactQL
Universal React + GraphQL starter kit written in Typescript w/ React 16, Apollo 2, SSR, hot-code reload, Brotli compression, strongly typed themes and support for SASS/LESS/PostCSS
RAN!
Production-ready boilerplate with support for GraphQL, SSR, Hot-reload, and caching
Razzle Material UI Styled Example
Razzle Material UI example using Express with compression
react-redux-styled-hot-universal
SSR, Universal Webpack, Redux, React-router, Babel
Nothing in this list matches your filter.
Featured in 1 awesome list
Each link jumps to the spot where the list mentions awesome-styled-components.