Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jferrettiboke/cairo
[WIP] 🚧🚧🚧 🔺 The Design System Framework — Build consistent, themeable, type-safe, accessible React apps and websites with ease, confidence, and speed.
https://github.com/jferrettiboke/cairo
component-library components css-in-js design-patterns design-system design-tokens design-tools frontend frontend-framework react reactjs styled-system theme-ui
Last synced: about 1 month ago
JSON representation
[WIP] 🚧🚧🚧 🔺 The Design System Framework — Build consistent, themeable, type-safe, accessible React apps and websites with ease, confidence, and speed.
- Host: GitHub
- URL: https://github.com/jferrettiboke/cairo
- Owner: jferrettiboke
- License: mit
- Created: 2019-06-29T11:55:41.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T11:29:48.000Z (almost 2 years ago)
- Last Synced: 2024-04-24T16:59:03.344Z (8 months ago)
- Topics: component-library, components, css-in-js, design-patterns, design-system, design-tokens, design-tools, frontend, frontend-framework, react, reactjs, styled-system, theme-ui
- Language: TypeScript
- Homepage: https://cairo.now.sh
- Size: 1.98 MB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://cairo.now.sh)
## Description
Cairo helps you generate a production-ready React.js component library from your specs, with a command.
Build consistent, themeable, type-safe, accessible React apps and websites with ease, confidence, and speed.
Make all your components look like how you want, let Cairo handles the rest, including functionality, accessibility, API design, auto-generated code with TypeScript support, and much more. Superior DX and UX. Always.
## Features
- Great UX
- Superior DX with a great API design
- Type-safe (TypeScript)
- Rapid and easy customization
- Accessible and responsive by default
## Why
When building products, it is tedious to write and maintain components across products, ensure best practices, and many more things. Having one central design system improves the workflow drastically.
- Build products and iterate faster
- Waste less time maintaining design systems for each product
- Be more productive
- Keep consistency across products
- User experience: ensuring great UX to the end user
- Accessibility: ensuring content is usable by and for everyone
- Performance: ensuring fast load times for the end user
- Developer experience: ensuring superior DX
## TODOs
**CLI**
- [x] Generate components (styling, prop types, TypeScript support...)
- [ ] Generate Styleguide (theme, components, playground...): `cairo generate --styleguide`
- [ ] 🤔 Generate and publish to NPM: `cairo generate --npm`
- [ ] 🤔 Lint (theme, components...): `cairo lint`
**Primitives**
- [x] Define first components
- [x] Make custom props responsive
- [ ] Give good defaults (WIP)
- [ ] Make components accessible (WIP)
**Examples**
- [ ] Replicate Vercel Design
- [ ] Replicate Stripe Design
## Contribute
Please, do not hesitate to contribute to this project (it does not matter how small your contribution could look like — everything counts in some way).
## FAQs
TODO
## Creator
Made with ❤️ by [Jesús Ferretti](https://twitter.com/jferrettiboke)
---
## Documentation
### Getting Started
#### Installation
Use `npm i -D cairo` or `yarn add -D cairo` to install Cairo as a dev dependency.
#### Specs file
TODO
#### Generate
You just need to indicate the main entry point for the theme.
`cairo generate -i theme/`
With a specific output path:
`cairo generate -i theme/ -o /components`
This will generate all components at `components/generated/`. If you don't specify the output path, it will generate all files at the current working directory, `generated/`.
To check all options, please execute `cairo --help` in your terminal.
#### Usage
After generating all components, you can use them easily.
First, be sure to use the provider component.
```jsx
import { Provider as CairoProvider } from "../components/generated";
import theme from "../theme";
export default function App({ children }) {
return {children};
}
```
And then, use any generated component you want.
```jsx
import { Button, Box, Text } from "../components/generated";
export default function HomePage() {
return (
Hello world!
My awesome button
);
}
```