awesome-styled-components
A curated list of awesome styled-components resources 💅
3k stars
45 watching
280 forks
last commit: over 1 year ago
Linked from 1 awesome list
awesomeawesome-listcsscss-in-jsreactstyled-components
Awesome Styled Components / Contents / styled-components | |||
| Official Site | |||
| GitHub | 40,417 | about 1 month ago | |
| Spectrum | |||
| StackOverflow | |||
Awesome Styled Components / Contents / Built with styled-components | |||
| react-data-table-component | 2,042 | 11 days ago | Data Table with built in sorting, pagination, selection, expandable rows and customizable styling |
| oah-ui | 206 | over 3 years ago | Component library built with four themes, grid system, ltr and rtl directions, theme system to add and edit themes |
| react-styled-floating-label | 33 | almost 2 years ago | Floating label component which works with any HTML input |
| grape-ui | 40 | about 1 year ago | Component library using styled-system and other open source components |
| styled-off-canvas | 74 | 23 days ago | Simple one-off canvas menu |
| React95 | 6,623 | 9 months ago | Windows 95 style UI components |
| react-functional-select | 195 | almost 2 years ago | 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 | 335 | over 1 year ago | Reusable components for spinners |
| styled-react-modal | 213 | 7 months ago | Modal component with familiar API and syntactic sugar |
| Smooth UI | 1,592 | over 2 years ago | UI Library / Design System |
| rendition | 212 | 8 months ago | A powerful component library for quickly building modern web apps |
| styled-icons | 2,086 | 3 months ago | Icons from popular icon packs (Font Awesome, Material, Octicons, etc) |
| @hackclub/design-system | 157 | about 1 year ago | Flexible, reusable set of web UI components, built by |
| react-styled-select | 108 | over 3 years ago | Lightweight Select control component |
| react-microlink | 580 | 2 months ago | Convert your links into beautiful previews |
| ReaKit | 7,804 | 11 days ago | Toolkit for building interactive UIs |
| Rebass | 7,944 | about 1 year ago | Functional React UI component library |
| react-css-loaders | 395 | over 4 years ago | A collection of pure CSS loading components |
| react-simple-chatbot | 1,733 | 6 months ago | Simple chatbot / conversational-ui component |
| reactour | 3,823 | 26 days ago | Tourist Guide into your Components |
| uiGradients | 229 | almost 5 years ago | Drop-in component for gradients |
| react-aria-tooltip | 57 | almost 2 years ago | Accessible ReactJS tooltip component |
| grommet-icons | 333 | 3 months ago | Iconography for grommet apps |
| bedrock-layout-primitives | 442 | 12 days ago | Foundational Layout Primitives for your React App |
| Atomic Layout | 1,127 | over 1 year ago | Layout composition as a physical React component |
| react-raster | 80 | over 2 years ago | Advanced Grid-System, highly customizable and ready for SSR |
| react-flex-ready | 60 | over 2 years ago | FlexBox grid system with property |
| Cinch Layout | 23 | over 1 year ago | React Native grid system inspired by Hedron |
| react-awesome-styled-grid | 217 | 24 days ago | Responsive grid system layout |
| styled-bootstrap-grid | 167 | almost 2 years ago | Twitter Bootstrap v4 (grid system only) |
| neat-components | 32 | 12 months ago | Implementation of ThoughtBot's Neat grid system |
| styled-css-grid | A tiny CSS grid layout | ||
| react-flexa | 132 | almost 2 years ago | Implementing the flexbox CSS API responsively |
| react-styled-flexboxgrid | 560 | 6 months ago | Grid system based on flexbox |
| Hedron | No-frills flex-box grid system | ||
| MetaComponent | 36 | about 4 years ago | Migrate legacy HTML and CSS to styled components |
| styco | 94 | over 1 year ago | VS Code extension to easily refactor JSX inline styles to styled components |
| react-components-cli | 15 | almost 2 years ago | Client to generate styled components |
| theme-miner | Makes it very easy and readable to create complex design systems in React with styled-components | ||
| styless | 65 | almost 2 years ago | Style your components declaratively with familiar Less syntax |
| css-in-js-media | 141 | over 1 year ago | Deal with responsive design |
| spacing-helper | 46 | over 1 year ago | Standalone helper for creating consistent spacing between the elements |
| styled-components-extractor | 26 | almost 2 years ago | Extracts unbound tags in VS Code |
| styled-media-helper | 76 | over 1 year ago | Write media queries |
| styled-tachyons | 16 | over 1 year ago | Mix tachyons style shorthands with normal css |
| styled-px2vw | 90 | about 4 years ago | Extension of styled-components with features for convert px to vw units |
| styled-normalize | 445 | 8 months ago | Add normalize.css |
| styled-email-components | 257 | almost 2 years ago | Extension for building email-first components via inline styles |
| styled-breakpoints | 551 | 8 days ago | Simple and powerful custom breakpoints |
| styled-reboot | 27 | 9 days ago | Bootstrap v4 reboot.css |
| polished | 7,631 | 3 months ago | Lightweight set of Sass/Compass-style mixins/helpers |
| styled-reset | 389 | 4 months ago | Eric Meyer's Reset CSS |
| styled-transition-group | 160 | almost 2 years ago | Create animations |
| shevyjs | 318 | over 1 year ago | Create and manage global typography and vertical rhythm |
| design-system-utils | 539 | over 4 years ago | Utilities to give better access to your design system |
| styled-components-modifiers | 298 | over 1 year ago | Enables BEM flavored modifiers (and responsive modifiers) |
| webstorm-styled-components | 375 | 9 days ago | Highlighting support in IntelliJ editors |
| styled-theming | 1,170 | about 3 years ago | Create themes for your app |
| styled-system | 7,841 | 9 months ago | Design system utilities |
| styled-map | 593 | over 2 years ago | Super simple lib to map props to styles |
| styled-tools | 803 | almost 2 years ago | Useful interpolated functions |
| jest-styled-components | 1,585 | 4 months ago | Jest utilities |
| styled-react-boilerplate | 212 | about 4 years ago | Modern & minimal boilerplate |
| Generator create-redux-app | 139 | over 1 year ago | Adds Redux and other useful libraries, on top of create-react-app |
| Superstylin' | 169 | over 1 year ago | A Gatsby starter |
| react-boilerplate | 29,460 | over 1 year ago | Highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices |
| ARc | 2,916 | over 2 years ago | Atomic React App boilerplate |
Awesome Styled Components / 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 | 1,388 | 8 days ago | 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 | 63,103 | 3 days ago | 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 | 106 | over 5 years ago | 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 | 13 | over 5 years ago | 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 | ||
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 Library | 18 | over 5 years ago | A UI components library and design system template |
| react-awesome-notifications | 29 | almost 6 years ago | A beautiful fully customizable React + Redux notification system built with styled-components |
| styled-bootstrap | 155 | over 5 years ago | Bootstrap 4 Components implementation with customization in mind |
| react-super-styled | 79 | almost 6 years ago | Build responsive, semantic layouts fast with this design-agnostic toolkit |
| styled-flex-component | 209 | over 3 years ago | Flex Element for not writing any more custom flex styles |
| styled-grid-component | 23 | about 5 years ago | Grid Element for not writing any more custom grid styles |
| react-styled-flexbox | 30 | about 6 years ago | Effortlessly add flexbox styles to your components using minimal code |
| Reactackle | 280 | almost 2 years ago | Open-source component library built with React and Styled Components |
| react-styled-box | 40 | almost 6 years ago | Speed up prototyping layouts with ready flex powered Box |
| styled-loaders | 208 | about 4 years ago | Loaders Built with Preact and Styled Components |
| colors-show | 26 | over 7 years ago | Present your application colors with style |
| react-adminlte-dash | 167 | almost 6 years ago | AdminLTE dashboard components in React |
| react-presents | Highly customizable React slideshow framework with syntax highlighting and mobile support | ||
| react-progressive-bg-image | 227 | 22 days ago | Medium style progressive background image |
| mcs-lite-ui | 75 | 9 days ago | An on-premises Internet of Things cloud platform, which can be quickly built and is fast to get started with |
| last-draft | 218 | over 6 years ago | A Draft.js Editor |
| reshake | 273 | about 1 year ago | CSShake as a React Functional Component |
| react-teleportation | 96 | almost 6 years ago | Teleport your components to the foreground |
| react-enhanced-form | 133 | almost 6 years ago | form component |
| react-create-component-from-tag-prop | 18 | about 6 years ago | Create a React component from a tag prop. Lets your users to choose which HTML elements get styled |
| animated-styled-component | 139 | almost 2 years ago | React Animated Styled Components |
| react-rasta | 91 | almost 2 years ago | 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 | 26 | over 6 years ago | Responsive, fluid, deeply nestable, non-flexbox grid system with default or custom breakpoints |
| styled-components-spacing | 213 | almost 2 years ago | Responsive margin and padding components |
| griz | 103 | about 6 years ago | The simplest grid system you'd ever see. Using grids with a flexbox fallback |
| styled-components-grid | 220 | about 1 year ago | Responsive grid components |
| Rebass Grid | 2,039 | about 5 years ago | Responsive React grid system built with styled-system |
| super-query | 30 | almost 2 years ago | Super media-query intuitive and easy of use |
| styled-container-query | 51 | over 1 year ago | Use / with an easy syntax |
| subatomic | 61 | almost 6 years ago | Add inline style props to your styled components |
| with-styled-class-names | 28 | almost 7 years ago | 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 | 50 | almost 2 years ago | normalize.css with a styled-components mindset |
| styled-is | 210 | over 1 year ago | Flag utility for styled-components |
| styled-components-ts | 150 | almost 6 years ago | styled-components for TypeScript |
| styled-by | 134 | over 2 years ago | Simple and powerful lib to handle styled props |
| styled-media-query | Easily and beautifully use media queries with custom breakpoints, | ||
| styled-shortcut-components | 13 | over 2 years ago | A convenience package that wraps with |
| styled-shortcuts | 88 | over 6 years ago | Use simple string notation to access props. No functions necessary |
| styled-components-theme | 307 | almost 5 years ago | Refers to theme colors and modifying them inline |
| styled-ax | 23 | over 7 years ago | Functional theme property accessor(s) |
| styled-theme | 181 | almost 7 years ago | Extensible theming system |
| styled-components-breakpoint | 243 | almost 3 years ago | Utility function for using breakpoints |
| styled-props | 241 | about 5 years ago | Allows you to set styled props in your styled-components without stress |
| styled-components-test-utils | 46 | about 1 month ago | Utils for styled-components compatible with jest, expect, chai and jasmine |
| ReactQL | 1,819 | almost 2 years ago | 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! | 2,216 | 16 days ago | Production-ready boilerplate with support for GraphQL, SSR, Hot-reload, and caching |
| Razzle Material UI Styled Example | 114 | 16 days ago | Razzle Material UI example using Express with compression |
| react-redux-styled-hot-universal | 146 | over 7 years ago | SSR, Universal Webpack, Redux, React-router, Babel |
0ex/more-awesome