All Projects β†’ lucastobrazil β†’ Cabana React

lucastobrazil / Cabana React

A design system built especially for both Sketch and React. πŸ’Žβš›οΈ

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Cabana React

Atomize
library for creating atomic react components
Stars: ✭ 54 (-6.9%)
Mutual labels:  styled-components, css-in-js
Glamorous Native
React Native component styling solvedπŸ’„
Stars: ✭ 566 (+875.86%)
Mutual labels:  styled-components, css-in-js
Styled Breakpoints
Simple and powerful tool for creating breakpoints in styled components and emotion. πŸ’…
Stars: ✭ 428 (+637.93%)
Mutual labels:  styled-components, css-in-js
Glamorous
DEPRECATED: πŸ’„ Maintainable CSS with React
Stars: ✭ 3,681 (+6246.55%)
Mutual labels:  styled-components, css-in-js
Styled Theming
Create themes for your app using styled-components
Stars: ✭ 1,067 (+1739.66%)
Mutual labels:  styled-components, css-in-js
Twin.macro
πŸ¦Ήβ€β™‚οΈ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, stitches and goober) at build time.
Stars: ✭ 5,137 (+8756.9%)
Mutual labels:  styled-components, css-in-js
React Redux Saga Boilerplate
Starter kit with react-router, react-helmet, redux, redux-saga and styled-components
Stars: ✭ 535 (+822.41%)
Mutual labels:  styled-components, css-in-js
react-native-css-in-js-benchmarks
CSS in JS Benchmarks for React Native
Stars: ✭ 46 (-20.69%)
Mutual labels:  styled-components, css-in-js
Styled System
β¬’ Style props for rapid UI development
Stars: ✭ 7,126 (+12186.21%)
Mutual labels:  styled-components, css-in-js
Styled Tools
Useful interpolated functions for CSS-in-JS
Stars: ✭ 761 (+1212.07%)
Mutual labels:  styled-components, css-in-js
Css In Js Benchmarks
Stars: ✭ 360 (+520.69%)
Mutual labels:  styled-components, css-in-js
Styled Components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress πŸ’…
Stars: ✭ 35,473 (+61060.34%)
Mutual labels:  styled-components, css-in-js
Reactackle
Open-source components library built with React and Styled-Components.
Stars: ✭ 278 (+379.31%)
Mutual labels:  styled-components, css-in-js
Cattous
CSS in JSX for lazy developers, built using styled-components and styled-system
Stars: ✭ 38 (-34.48%)
Mutual labels:  styled-components, css-in-js
Vscode Stylelint
A Visual Studio Code extension to lint CSS/SCSS/Less with stylelint
Stars: ✭ 260 (+348.28%)
Mutual labels:  styled-components, css-in-js
Design System Utils
πŸ‘©β€πŸŽ¨ Access your design tokens with ease
Stars: ✭ 465 (+701.72%)
Mutual labels:  styled-components, css-in-js
styled-components-docs-zh
πŸ’… styled-components δΈ­ζ–‡ζ–‡ζ‘£ηΏ»θ―‘ πŸ‡ζŒη»­ζ–½ε·₯δΈ­
Stars: ✭ 160 (+175.86%)
Mutual labels:  styled-components, css-in-js
satchel
The little bag of CSS-in-JS superpowers
Stars: ✭ 14 (-75.86%)
Mutual labels:  styled-components, css-in-js
Design System
Priceline.com Design System
Stars: ✭ 604 (+941.38%)
Mutual labels:  styled-components, css-in-js
Polished
A lightweight toolset for writing styles in JavaScript ✨
Stars: ✭ 7,074 (+12096.55%)
Mutual labels:  styled-components, css-in-js
A design system built especially for both Sketch and React.
This is an Alpha build of the Cabana Design System in React

Join the   community on Spectrum

Docs

See the documentation for more information about using cabana-react!

Example: Your first Cabana component

import { ThemeProvider } from 'styled-components';
import { Button } from 'cabana-react';
import myTheme from './theme.js';

const App = () => (
    <ThemeProvider theme={myTheme}>
        <Button bg="primary" color="white">Hi!</Button>
    </ThemeProvider>
);

This is what you'll see in your browser:

Theme File Starter

Use this theme file as a starting point to configure your Cabana config.

The Cabana Sketch Library

Cabana-React is the React counterpart of the Cabana Sketch Library. Check out the Cabana Design System website for a more in-depth rundown of how the design system works, and for access to the library.

Contributing

If you would like to contribute to cabana-react please see our contributing and community guidelines, they will help you get set up locally and explain the whole process. (Coming Soon)

License

Licensed under the MIT License, Copyright Β© 2018-present Marc Andrew and Lucas Arundell.

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