rebass - :atom_symbol: React UI component library & design system, built with styled-components and styled-system

  •        238

React UI component library & design system, built with styled-system, with support for styled-components & emotion. Rebass is a library of highly-composable, primitive UI components for React, built with styled-components to keep styles isolated and reduce the need to write custom CSS in your application. Based upon a configurable design system, Rebassβ€˜s props API makes building consistent, responsive web apps simpler and faster.

https://github.com/jxnblk/rebass

Dependencies:

chroma-js : ^1.3.6
grid-styled : ^4.2.0
prop-types : ^15.6.0
styled-system : ^2.3.1
system-components : ^2.2.1

Tags
Implementation
License
Platform

   




Related Projects

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.

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-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.

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-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.

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.

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.

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.

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.

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.

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.

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].

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-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.

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.

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.

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.

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.

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.






We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.