A curated list of delightful styled-components packages and resources.
Please read the contribution guidelines before contributing.
- animate-css-styled-components - simple port of animate css for styled-components
- elm-styled - Styling your Html Elements with typed Css
- gfas-react-components - Global Financial Aid Services Layout and design Components
- last-draft - A Draft.js Editor (demo)
- material-styled - A collection of React components implementing Google's Material Design spec
- Mbtn - A set of extendable buttons
- progress-arc-component - Customizable progress arc for React
- react-aria-tooltip - Simple & accessible ReactJS tooltip component
- react-css-loaders: A collection of pure CSS React loading components (demo)
- react-components-kit - A collection of reusable and themable React UI components
- react-d3-treemap - Treemap based on d3.treemap built using React
- react-enhanced-form - The best react form component, on earth 🌍. It makes form inputs easy, finally !
- react-simple-chatbot: Simple chatbot / conversational-ui React component (demo)
- react-teleportation - Teleport your components to the foreground.
- reactour - Tourist Guide into your React Components (demo)
- reshake - CSShake as a React Functional Component (demo)
- styled-animated - Simple React Animation Library was made with styled-components like Animated.css
- styled-classnames - styled-components without the components
- styled-components-breakpoint - Utility function for using breakpoints with styled-components
- styled-components-spacing - Responsive margin and padding components for
styled-components. - styled-elements - Styled components for the DOM
- styled-mixin - Simple wrapper for creating styled-components mixins
- styled-placeload - Placeholder components based on styled-components
- uiGradients - Generate beautiful background gradients from the uigradients.com database.
- vim-styled-components - A Vim bundle for http://styled-components.com based javascript files
- grid-styled - Responsive grid system (demo)
- hedron - A no-frills flex-box grid system.
- styled-components-grid - Responsive grid components for
styled-components.
- babel-plugin-styled-components-require - Babel plugin that adds styled-components import declaration
- jest-styled-components-matcher - Jest matcher for styled components (React Native)
- styled-ax - Functional theme property accessor(s)
- styled-bootstrap-responsive-breakpoints - Utility functions for using Bootstrap's responsive breakpoints with
styled-components. - styled-components-breakpoint - Utility function for using breakpoints with
styled-components. - styled-props - Simple lib that allows you to set styled props in your styled-components without stress (demo)
- styled-theme - Extensible theming system for styled-components.
- styled-tools - Useful interpolated functions for styled-components.
- styled-map - Super simple lib to map props to styles with
styled-components
- ARc - Atomic React App boilerplate with styled components (demo)
- react-boilerplate - A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices
- react-redux-styled-hot-universal (SSR, Universal Webpack, Redux, React-router, Webpack 2, Babel, Styled Components and more...)
- react-styled-flexboxgrid - Grid system based on Flexbox (demo)
- Scalable React Boilerplate
- Scalable React TypeScript Boilerplate
- Superstylin' - A Gatsby starter with styled-components 💅 (demo)
- dirtyredz.com - David McClain | Dirtyredz - About me, Latest projects and Contact (source)
- postCSS.parts - A searchable catalog of PostCSS plugins
- reactiflux.com - Reactiflux community home build with Gatsby (source)
- sachagreif.com - personal homepage built with Gatsby (source)
- spaceexperience.club - Brings you each day a stunning picture of our universe, Astronomy Picture of the Day. (source)
- colors-show - Present your application colors with style. (demo)
- react-adminlte-dash - AdminLTE dashboard components in React (demo)
- react-presents - Highly customizable React slideshow framework with syntaxt highlighting and mobile support.
There is (currently experimental) support for stylelint – meaning you can take advantage of 150 rules to make sure your styled-components CSS is solid!
See the stylelint-processor-styled-components repository for installation instructions.
The one thing you lose when writing CSS in template literals is syntax highlighting. We're working hard on making proper syntax highlighting happening in all editors. We currently have support for Atom, Visual Studio Code, and soon Sublime Text.
This is what it looks like when properly highlighted:
@gandm, the creator of language-babel, has added support for styled-components in Atom!
To get proper syntax highlighting, all you have to do is install and use the language-babel package for your JavaScript files!
There is an open PR by @garetmckinley to add support for styled-components to babel-sublime! (if you want the PR to land, feel free to 👍 the initial comment to let the maintainers know there's a need for this!)
As soon as that PR is merged and a new version released, all you'll have to do is install and use babel-sublime to highlight your JavaScript files!
The vscode-styled-components extension provides syntax highlighting inside your Javascript files. You can install it as usual from the Marketplace.
The vim-styled-components plugin gives you syntax highlighting inside your Javascript files. Install it with your usual plugin manager like Plug, Vundle, Pathogen, etc.
Also if you're looking for an awesome javascript syntax package you can never go wrong with YAJS.vim.
We could use your help to get syntax highlighting support to other editors! If you want to start working on syntax highlighting for your editor, open an issue to let us know.
- A 5-minute Intro to Styled Components
- Animating SVG with styled-components
- Quick Tip: How to Style React Components with styled-components
To the extent possible under law, Romello Goodman has waived all copyright and related or neighboring rights to this work.