GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → rebassjs → rebass

rebassjs / rebass

Licence: MIT license
⚛️ React primitive UI components built with styled-system.

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

reactcssthemecomponentscoloruigridstyled-componentslayoutreact-componentstypographyemotiondesign-systemstyled-systemrebass

Projects that are alternatives of or similar to rebass

Styled Bootstrap Components
The bootstrap components made with styled-components 💅
Stars: ✭ 196 (-97.5%)
Mutual labels:  grid, styled-components, layout, react-components, design-system
Grid
This package has moved and renamed
Stars: ✭ 2,079 (-73.5%)
Mutual labels:  grid, styled-components, layout, emotion, styled-system
Theme Ui
Build consistent, themeable React apps based on constraint-based design principles
Stars: ✭ 4,150 (-47.09%)
Mutual labels:  color, layout, typography, emotion, design-system
Interior
Design system for the modern web.
Stars: ✭ 77 (-99.02%)
Mutual labels:  grid, layout, typography, design-system
Styled System
⬢ Style props for rapid UI development
Stars: ✭ 7,126 (-9.15%)
Mutual labels:  styled-components, layout, typography, emotion
Fluid System
Fluid System is a style props function transformer for generating fluid styles. 💦
Stars: ✭ 130 (-98.34%)
Mutual labels:  styled-components, typography, emotion, design-system
theme-ui-native
Build consistent, themeable React Native apps based on constraint-based design principles
Stars: ✭ 67 (-99.15%)
Mutual labels:  color, layout, typography, design-system
Doric
Protocol oriented, type safe, scalable design system foundation swift framework for iOS.
Stars: ✭ 75 (-99.04%)
Mutual labels:  color, typography, design-system
lab-cli
Command line utilities and exporting module for Compositor Lab
Stars: ✭ 52 (-99.34%)
Mutual labels:  styled-components, emotion, design-system
smores-react
🍭 Marshmallow React components
Stars: ✭ 34 (-99.57%)
Mutual labels:  styled-components, react-components, design-system
standard-components
A specification for functional UI components
Stars: ✭ 52 (-99.34%)
Mutual labels:  color, layout, typography
Xstyled
A utility-first CSS-in-JS framework built for React. 💅👩‍🎤⚡️
Stars: ✭ 1,835 (-76.61%)
Mutual labels:  styled-components, emotion, styled-system
Gatsby V2 Tutorial Starter
Gatsby V2 Starter - product of step by step tutorial
Stars: ✭ 139 (-98.23%)
Mutual labels:  styled-components, typography, emotion
Re Jok
A React UI Component library built with styled-components
Stars: ✭ 102 (-98.7%)
Mutual labels:  grid, styled-components, react-components
Layouts
Grab-and-go layouts for React
Stars: ✭ 202 (-97.42%)
Mutual labels:  styled-components, layout, emotion
Leerraum.js
A PDF typesetting library with exact positioning and hyphenated line breaking
Stars: ✭ 233 (-97.03%)
Mutual labels:  grid, layout, typography
basis
Basis Design System
Stars: ✭ 55 (-99.3%)
Mutual labels:  emotion, design-system
sha-el-design
React components for easier customization and smooth development flow.
Stars: ✭ 33 (-99.58%)
Mutual labels:  react-components, design-system
react-color
🎨 Is a tiny color picker widget component for React apps.
Stars: ✭ 50 (-99.36%)
Mutual labels:  color, react-components
moon-design
Moon Design System for React
Stars: ✭ 209 (-97.34%)
Mutual labels:  react-components, design-system
View All Similar Projects ➔

Rebass

React primitive UI components built with Styled System. https://rebassjs.org

Build Status Coverage Downloads Version MIT License

npm i rebass

Getting Started

import React from 'react'
import { Box, Heading, Button } from 'rebass'

export default props =>
  <Box>
    <Heading>Hello</Heading>
    <Button>Rebass</Button>
  </Box>

Features

  • Start your design system without boiling the ocean
  • Build consistent UI with design constraints and user-defined scales
  • Best-in-class developer ergonomics with Styled System props
  • First-class support for theming & fully compatible with Theme UI
  • Quick, mobile-first responsive styles with array-based syntax
  • Flexbox layout with the Box and Flex components
  • Flexibility built in for high design & development velocity
  • Minimal footprint at about 4KB

"One of the best React component libs out there"

– Max Stoiber

"Rebass is the Bootstrap of React."

– Jori Lallo

"A whopper component library built on styled-components. Responsive, systematic, scalable...the business!"

– Colm Tuite

Principles

Rebass is intended to be:

  • Minimal
  • Useful
  • Unopinionated
  • Flexible
  • Consistent
  • Extensible
  • Themeable

Do one thing, and do it well

– Unix philosophy

See Patterns for Style Composition in React for more on some of the thought behind Rebass.

Documentation

CodeSandbox

Try it out: https://codesandbox.io/s/github/rebassjs/rebass/tree/master/examples/sandbox

Related

Upgrading from v3

See the Migration Guide.

Previous Versions

Contributing | MIT License

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].