grid-styled - Responsive React grid system built with styled-system

•    Javascript

---

The Box component handles width, margin and padding. All grid-styled components use styled-system for style props, which pick up values from a theme and allow for responsive styles to be passed as array values.

react grid styled-components flexbox css styled-system margin padding css-in-js layout responsive emotion

styled-system - Design system utilities for styled-components and other css-in-js libraries

•    Javascript

---

Design system utilities for styled-components, glamorous, and other css-in-js libraries

react css-in-js design-systems styled-components glamorous glamor typography layout emotion fela cxs responsive

Mantine - A fully featured React components library includes more than 120 customizable components and hooks

•    Typescript

---

Mantine is a fully featured React components library includes more than 120 customizable components and 40+ hooks to manage state and UI management. Mantine core library includes all essential components: inputs, buttons, modals, popovers, typography elements, layout management, etc.

react-components react-library react hooks typescript accessibility uikit a11y design-system

react-styled-flexboxgrid - Grid system based on styled-components and flexbox for React

•    Javascript

---

Set of React components that implement flexboxgrid.css but with styled-components. Furthermore, it allows to customize grid configuration like gutter width... Highly inspired by the excellent react-flexbox-grid which the API is nearly the same than this module.

flexbox grid react styled-components styled

smooth-ui - Modern React UI library 💅👩‍🎤🍭

•    Javascript

---

Modern React UI library. Code less, do more. Smooth UI is a style system / UI library for React. It works with Styled Components 💅 or Emotion 👩‍🎤.

styled-components ui ui-components react material-ui bootstrap ui-library

styled-css-grid - 🍱 A tiny CSS grid layout for React

•    Javascript

---

A tiny (~2kb) CSS grid layout for React, built with styled-components 💅. See the website.

react grid css styled-components

styled-components-theme - Defines themes via flexible color selectors for use with styled-components

•    Javascript

---

styled-components-theme generates selectors for colors in your styled-components theme that allows color manipulation, using the color library via calls on the selectors themselves. A selector, in this context, is defined as a function that looks like (props) => props.theme.myColor that the styled-components library accepts as a template variable.

styled-components css react js styles scss styling color-manipulation theme-color themes manipulation-methods sass selector theme theming colors

design-system - Priceline.com Design System

•    Javascript

---

If you'd like to contribute to the design system, we'd love to have your help. If you work at Priceline.com, please join the #design-system Slack channel and let us know what you'd like to work on. For all contributors, please be sure to read the Contributing doc.

design-system priceline react styled-components styled-system components ui design-systems css css-in-js

Tabler - A premium and open source dashboard template with a responsive and high-quality UI

•    Javascript

---

Tabler is fully responsive and compatible with all modern browsers. You can create a fully functional interface that users will love! Choose the layouts and components you need and customize them to make your design consistent and eye-catching. Every component has been created with attention to detail to make your interface beautiful.

css html jekyll sass bootstrap modular html5 dashboard sponsors uikit boilerplate-template scss admin-dashboard themes dashboards ui-kit adminpanel dashboard-templates bootstrap4-theme bootstrap5

styled-components - Visual primitives for the component age

•    Javascript

---

If you are looking for styled-components v4.0 (under active development), check out the roadmap and dev branch. styled-components is compatible with both React (for web) and React Native – meaning it's the perfect choice even for truly universal apps! See the documentation about React Native for more information.

react css-in-js styled-components css

Ant Design - An enterprise-class UI design language and React UI library

•    Typescript

---

Ant Design is an enterprise-class UI design language and React UI library. It provides plenty of UI components to enrich your web applications, and we will improve components experience consistently. It supports Server side rendering, Theme customization, Internationalization support and lot more.

react-framework css react ui-kit ui-design react-components antd design-systems frontend ant-design ant design react-component component components ui framework

argon-design-system-react - React version of Argon Design System

•    CSS

---

Start your development with a Design System for Bootstrap 4, React and Reactstrap. It is open source, free and it features many components that can help you create amazing websites. Argon Design System React is built with over 100 individual components, giving you the freedom of choosing and combining. All components can take variations in color, that you can easily modify using SASS files.

react reactjs argon argon-react design design-react argon-design argon-design-react kit react-kit argon-design-system argon-design-system-react design-system-react

styled-tools - Useful interpolated functions for CSS-in-JS

•    Javascript

---

Useful interpolated functions for styled-components 💅, emotion 👩‍🎤, JSS and other CSS-in-JS libraries. Same as prop, except that it returns props.theme[path] instead of props[path].

styled-components react css-in-js lodash utilities emotion jss styled-tools

react-mdl - React Components for Material Design Lite

•    CSS

---

This library is now deprecated. It's higly recommended to use Material Design Components instead. Instead of using the official material.css and material.js files from the MDL project, you should use the files we provide in /extra. The reason to that is because the official Layout component is not fully compatible with React. We made a patch and we re-exported everything so people can still use it. If you're worried about the changes we made, you can take a look at the patch note or read about the issue in this ticket.

react react-component mdl material-design badge button card checkbox data-table fab-button icon icon-button icon-toggle radio radio-group switch textfield progress progress-bar spinner slider tooltip menu dropdown layout drawer grid tabs

react-fine-uploader - Easily integrate Fine Uploader or Fine Uploader S3 into a React app

•    Javascript

---

Makes using Fine Uploader in a React app simple. Drop-in high-level components for a turn-key UI. Use small focused components to build a more custom UI. These allow you to easily build a highly customizable and powerful UI for your upload widget, backed by Fine Uploader's core feature set. Most of these components are unstyled (i.e. ready to be styled by you). Focused component-specific stylesheets may be provided at a later date.

react fineuploader ui components drag-and-drop file blob file-uploader fine-uploader jsx upload widget

argon-react-native - Argon React Native

•    Javascript

---

Argon React Native is a fully coded app template built over Galio.io, React Native and Expo to allow you to create powerful and beautiful e-commerce mobile applications. We have redesigned all the usual components in Galio to make it look like Argon's Design System, minimalistic and easy to use. Start your development with a badass Design System for React Native inspired by Argon Design System. If you like Argon's Design System, you will love this react native app template! It features a huge number of components and screens built to fit together and look amazing.

argon-react-native argon-design-system argon-app-react-native argon-ios react-native-ios creative-tim argon-android react-native-ui-kit react-native-expo freebie react-native-argon-design react-native-galio galio-argon-free galio-react-native-free-app argon-expo-react-native react-native-ui-template

MUI (formerly Material-UI) - React UI library you always wanted

•    Javascript

---

MUI provides a robust, customizable, and accessible library of foundational and advanced components, enabling you to build your own design system and develop React applications faster. You can start your projects with Google's Material Design or build your own designs using the sophisticated theming features.

material-ui google-material react-components react material-design material react-component react-ui-library ui-ux components

tachyons-components - React UI components powered by Tachyons with a styled-components like API

•    Javascript

---

React UI components powered by Tachyons with a styled-components like API.

react tachyons components

Reach UI - The Accessible Foundation for React Apps and Design Systems

•    Typescript

---

Reach UI seeks to become the accessible foundation of your React-based design system. Each component is tested with Safari + VoiceOver, Firefox + NVDA, and Edge + JAWS. Its components include Accordion, Alert, AlertDialog, Checkbox, ComboBox, Dialog, Menu, Slider, Nav, Tooltip, Tabs etc.

react react-components react-ui ui-ux ui-components

components - Primer React components

•    Javascript

---

Our documentation site lives at primer.style/components. You'll be able to find the information listed in this README as well as detailed docs for each component, our theme, and system props. Primer Components come with all the necessary CSS built-in, so you don't need to worry about including Primer CSS.

primer react components library design-system