awesome-styled-components

CSS-in-JS library collection

A curated collection of resources and libraries for styling React applications with CSS-in-JS

A curated list of awesome styled-components resources 💅

GitHub

3k stars
45 watching
281 forks
last commit: over 3 years ago
Linked from 1 awesome list

awesomeawesome-listcsscss-in-jsreactstyled-components

Awesome Styled Components / Contents / styled-components

Official Site
GitHub40,570about 2 years ago
Spectrum
StackOverflow

Awesome Styled Components / Contents / Built with styled-components

react-data-table-component2,057almost 2 years agoData Table with built in sorting, pagination, selection, expandable rows and customizable styling
oah-ui209over 5 years agoComponent library built with four themes, grid system, ltr and rtl directions, theme system to add and edit themes
react-styled-floating-label35over 3 years agoFloating label component which works with any HTML input
grape-ui41about 3 years agoComponent library using styled-system and other open source components
styled-off-canvas76almost 2 years agoSimple one-off canvas menu
React956,713over 2 years agoWindows 95 style UI components
react-functional-select195over 3 years agoMicro-sized & micro-optimized select component
GrommetComponent library built with accessibility, modularity, responsiveness, and theming in mind
bootstrap-styledBootstrap 4 Components, mixins, utilities implementations with global sharing community ecosystem in mind
react-epic-spinners335over 3 years agoReusable components for spinners
styled-react-modal213almost 2 years agoModal component with familiar API and syntactic sugar
Smooth UI1,590over 4 years agoUI Library / Design System
rendition214almost 2 years agoA powerful component library for quickly building modern web apps
styled-icons2,094about 2 years agoIcons from popular icon packs (Font Awesome, Material, Octicons, etc)
@hackclub/design-system157almost 3 years agoFlexible, reusable set of web UI components, built by
react-styled-select108over 5 years agoLightweight Select control component
react-microlink588about 2 years agoConvert your links into beautiful previews
ReaKit7,926almost 2 years agoToolkit for building interactive UIs
Rebass7,941about 3 years agoFunctional React UI component library
react-css-loaders396over 6 years agoA collection of pure CSS loading components
react-simple-chatbot1,742almost 2 years agoSimple chatbot / conversational-ui component
reactour3,859almost 2 years agoTourist Guide into your Components
uiGradients229almost 7 years agoDrop-in component for gradients
react-aria-tooltip57almost 4 years agoAccessible ReactJS tooltip component
grommet-icons334almost 2 years agoIconography for grommet apps
bedrock-layout-primitives444almost 2 years agoFoundational Layout Primitives for your React App
Atomic Layout1,129over 3 years agoLayout composition as a physical React component
react-raster80over 4 years agoAdvanced Grid-System, highly customizable and ready for SSR
react-flex-ready60over 4 years agoFlexBox grid system with property
Cinch Layout23over 3 years agoReact Native grid system inspired by Hedron
react-awesome-styled-grid218about 2 years agoResponsive grid system layout
styled-bootstrap-grid167over 3 years agoTwitter Bootstrap v4 (grid system only)
neat-components32almost 3 years agoImplementation of ThoughtBot's Neat grid system
styled-css-gridA tiny CSS grid layout
react-flexa132almost 4 years agoImplementing the flexbox CSS API responsively
react-styled-flexboxgrid557over 2 years agoGrid system based on flexbox
HedronNo-frills flex-box grid system
MetaComponent37about 6 years agoMigrate legacy HTML and CSS to styled components
styco95over 3 years agoVS Code extension to easily refactor JSX inline styles to styled components
react-components-cli15almost 4 years agoClient to generate styled components
theme-minerMakes it very easy and readable to create complex design systems in React with styled-components
styless65over 3 years agoStyle your components declaratively with familiar Less syntax
css-in-js-media141over 3 years agoDeal with responsive design
spacing-helper46over 3 years agoStandalone helper for creating consistent spacing between the elements
styled-components-extractor27almost 2 years agoExtracts unbound tags in VS Code
styled-media-helper76over 3 years agoWrite media queries
styled-tachyons16over 3 years agoMix tachyons style shorthands with normal css
styled-px2vw90about 6 years agoExtension of styled-components with features for convert px to vw units
styled-normalize447over 2 years agoAdd normalize.css
styled-email-components257almost 4 years agoExtension for building email-first components via inline styles
styled-breakpoints554almost 2 years agoSimple and powerful custom breakpoints
styled-reboot27almost 2 years agoBootstrap v4 reboot.css
polished7,637almost 2 years agoLightweight set of Sass/Compass-style mixins/helpers
styled-reset390over 2 years agoEric Meyer's Reset CSS
styled-transition-group160almost 4 years agoCreate animations
shevyjs317over 3 years agoCreate and manage global typography and vertical rhythm
design-system-utils539over 6 years agoUtilities to give better access to your design system
styled-components-modifiers297over 3 years agoEnables BEM flavored modifiers (and responsive modifiers)
webstorm-styled-components375almost 2 years agoHighlighting support in IntelliJ editors
styled-theming1,169almost 5 years agoCreate themes for your app
styled-system7,872over 2 years agoDesign system utilities
styled-map592over 4 years agoSuper simple lib to map props to styles
styled-tools802almost 4 years agoUseful interpolated functions
jest-styled-components1,585over 2 years agoJest utilities
styled-react-boilerplate212about 6 years agoModern & minimal boilerplate
Generator create-redux-app139over 3 years agoAdds Redux and other useful libraries, on top of create-react-app
Superstylin'170over 3 years agoA Gatsby starter
react-boilerplate29,490over 3 years agoHighly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices
ARc2,917over 4 years agoAtomic React App boilerplate

Awesome Styled Components / Contents / Real Apps

EarnerYour number one resource to the Finnish employment community
NulogySupply chain management software built with open-source
Nyxo iOS & Android AppPersonalized sleep coaching mobile app
VimeoVideo collaboration, video distribution and video everything else
Orbit Components1,391almost 2 years agoComponent library of Orbit Design System, built by and for
PageXLNo code website builder to create landing pages and online stores in minutes
TaskadeThe 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 Panel64,232almost 2 years agoStrapi built-in admin panel to build content APIs
JaneDaily deal site offering the latest trends in fashion and home decor
Sweetgreen Android AppSweetgreen is an American fast casual restaurant chain that serves salads. It already using Styled Components for the React Native Android Application
WebGazerUptime monitoring and analytics service
CloverleafReveal insights on your team's hidden qualities
The Players TribuneThe Voice of the Game
MoleskineMoleskine Digital Studio
FortniteMaster.comProfessional Fortnite Battle Royale Stats
PrismaOpen-Source GraphQL ORM for GraphQL Servers ( )
InVisionDigital product design, workflow & collaboration
TSMOfficial TSM Site
Swipe LifeTinder Swipe Life
AutodeskOnline CAD Editor & Viewer
VogueFashion, Trends, Beauty and People
SpectrumThe community platform for the future ( )
CasperBetter Sleep For All
CoinbaseBuy & Sell Bitcoin, Ethereum, and more with trust
TypeformTurn data collection into an experience
AtlaskitAtlaskit by Atlassian ( )
ticketmaster.co.ukTickets for concerts, theatre, football, family days out
shop.lego.comLEGO shop
PatreonBest way for artists and creators to get sustainable income and connect with fans
TargetExpect More. Pay Less
DutchieOnline Cannabis Ordering & Delivery
Tab IpsumGenerate fake content easily ( )
Booben106over 7 years agoDesign, develop, connect data, get source code - all in one place
React Native ExplorerExplorer React Native packages and examples effortlessly
Coinbase ProUS based digital asset exchange with trading UI, FIX API and REST API
rick-morty-app13over 7 years agoRick and Morty Information Portal
Hack ClubWebsite for a global, non-profit community of high school coding clubs ( )
Helsinki Food GuideWebsite featuring only the best dishes in Helsinki
Atlas of of Economic ComplexityResearch and data visualization tool to explore global trade flows across markets, track these dynamics over time and discover new growth opportunities for every country
OutlineWiki for your team ( )
Count MinutesApplication helping to be in control of time
GitPointGitPoint is the most feature-rich unofficial GitHub client that is 100% free
en.kachkaev.ruPersonal homepage built with ; also uses GraphQL, Docker, CI and microservice architecture ( )
WutTheLintSearchable catalog of linters
GetShitDoneTimer to track your work tasks ( )
Swat.ioSocial Media Managment for Teams by
Grabient.comA beautiful and simple UI for generating web gradients. ( )
CodeSandboxAn online editor tailored for React development ( )
rosesdaycare.centerMarketing website with theme colors that change on refresh ( )
joeireland.comPortfolio of Joseph Ireland ( )
michaelhsu.twA simple static homepage built with CRA pre-renderer ( )
ReactifluxReactiflux community home build with ( )
Dirtyredz.comDavid McClain | Dirtyredz * About me, Latest projects and Contact ( )
sachagreif.comPersonal homepage built with ( )
spaceexperience.clubBrings you each day a stunning picture of our universe, Astronomy Picture of the Day. ( )
PostCSS.partsSearchable catalog of PostCSS plugins

Awesome Styled Components / Contents / Further Reading

The styled-components Happy Path
The state of CSS, CSS in JS & how styled-components is solving the problems we’ve had for decades
How styled-components works
Getting Sassy with styled-components
Writing Scalable React Apps with the Component Folder Pattern
Building a Blog With Next.js and styled-components
How to create responsive UI with styled-components
How to build a simple HackerNews feed with styled-components
Creating truly universal React component systems
Ryan Florence - Ryan's Random Thoughts on Inline Styles
Rendering Khan Academy’s Learn Menu Wherever I Please
The Future of Reusable CSS
"Scale" FUD and Style Components
The magic behind 💅 styled-components
The road to styled components, and the road ahead - Glen Maddern, Front End Center
⚡️ - Max Stoiber - The Road to Styled Components - React Conf 2017
ColdFront16 • Glenn Maddern: The Future of Reusable CSS
Create a style guide using NPM & styled-components
How to Use Styled Components in React Applications
CSS in JavaScript

Awesome Styled Components / Contents / Archived

sugUI Components Library18over 7 years agoA UI components library and design system template
react-awesome-notifications29over 7 years agoA beautiful fully customizable React + Redux notification system built with styled-components
styled-bootstrap155over 7 years agoBootstrap 4 Components implementation with customization in mind
react-super-styled79almost 8 years agoBuild responsive, semantic layouts fast with this design-agnostic toolkit
styled-flex-component209over 5 years agoFlex Element for not writing any more custom flex styles
styled-grid-component23almost 7 years agoGrid Element for not writing any more custom grid styles
react-styled-flexbox30about 8 years agoEffortlessly add flexbox styles to your components using minimal code
Reactackle279almost 4 years agoOpen-source component library built with React and Styled Components
react-styled-box40almost 8 years agoSpeed up prototyping layouts with ready flex powered Box
styled-loaders208almost 6 years agoLoaders Built with Preact and Styled Components
colors-show26over 9 years agoPresent your application colors with style
react-adminlte-dash167almost 8 years agoAdminLTE dashboard components in React
react-presentsHighly customizable React slideshow framework with syntax highlighting and mobile support
react-progressive-bg-image227almost 2 years agoMedium style progressive background image
mcs-lite-ui75almost 2 years agoAn on-premises Internet of Things cloud platform, which can be quickly built and is fast to get started with
last-draft218over 8 years agoA Draft.js Editor
reshake275about 3 years agoCSShake as a React Functional Component
react-teleportation96over 7 years agoTeleport your components to the foreground
react-enhanced-form133over 7 years agoform component
react-create-component-from-tag-prop18about 8 years agoCreate a React component from a tag prop. Lets your users to choose which HTML elements get styled
animated-styled-component139almost 4 years agoReact Animated Styled Components
react-rasta91almost 4 years agoResponsive 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-responsive26over 8 years agoResponsive, fluid, deeply nestable, non-flexbox grid system with default or custom breakpoints
styled-components-spacing213almost 4 years agoResponsive margin and padding components
griz103about 8 years agoThe simplest grid system you'd ever see. Using grids with a flexbox fallback
styled-components-grid220about 3 years agoResponsive grid components
Rebass Grid2,039about 7 years agoResponsive React grid system built with styled-system
super-query30almost 4 years agoSuper media-query intuitive and easy of use
styled-container-query52over 3 years agoUse / with an easy syntax
subatomic61almost 8 years agoAdd inline style props to your styled components
with-styled-class-names28over 8 years agoTiny (666 bytes gzip size) helper function/high order component to help style custom classNames props like , etc. on 3rd party components using
normalized-styled-components50almost 4 years agonormalize.css with a styled-components mindset
styled-is210over 3 years agoFlag utility for styled-components
styled-components-ts150almost 8 years agostyled-components for TypeScript
styled-by134over 4 years agoSimple and powerful lib to handle styled props
styled-media-queryEasily and beautifully use media queries with custom breakpoints,
styled-shortcut-components13over 4 years agoA convenience package that wraps with
styled-shortcuts88over 8 years agoUse simple string notation to access props. No functions necessary
styled-components-theme305almost 7 years agoRefers to theme colors and modifying them inline
styled-ax23over 9 years agoFunctional theme property accessor(s)
styled-theme181almost 9 years agoExtensible theming system
styled-components-breakpoint243almost 5 years agoUtility function for using breakpoints
styled-props241about 7 years agoAllows you to set styled props in your styled-components without stress
styled-components-test-utils46about 2 years agoUtils for styled-components compatible with jest, expect, chai and jasmine
ReactQL1,818almost 2 years agoUniversal 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!2,216almost 2 years agoProduction-ready boilerplate with support for GraphQL, SSR, Hot-reload, and caching
Razzle Material UI Styled Example114almost 2 years agoRazzle Material UI example using Express with compression
react-redux-styled-hot-universal146over 9 years agoSSR, Universal Webpack, Redux, React-router, Babel

Backlinks from these awesome lists:

More related projects: