Simple progressive design system and documentation for personal projects.
- โ๏ธ Simple: Less is better. Simple to maintain, compose and evolve.
- ๐ Intuitive: UI and animations should provide intuitive feedback to users.
- ๐ Progressive: Favor rapid progressive development over features.
- Colors
- Typography
- Iconography
- Animations
- React components
octicons
react
react-spring
rebass
styled-components
typography
Components are progressively documented in markdown (mdx
) format using docz
.
To run the documented examples:
yarn add @chrisrzhou/ui
cd ui
yarn
yarn dev
Progress
(line/donut with color)Modal
Drawer
(like modal)Collapse
Badge
Hug
Anchor
Provider
Banner
Timeline
Carousel
Breadcrumb
Checkbox
CheckboxList
FormField
(usesInput
,Label
, similar toFormRow
)Form
(usesFormField
)Input
(number, string, email, password, textarea, validation)Label
Rate
Radio
RadioList
Select
SelectOption
Slider
TabSet
Toggle
ButtonList
DatePicker
ColorPicker
- Add documentation for
css.js
. - Group components (data, input, display, navigation etc)