

Overview
React Design System. I'm certainly crazy but I want to create my own UI Framework to develop React applications faster. I will regularly update this readme to show the new components. I'll see what it gives. I'm not in a hurry. A better documentation will come soon. If you like it, feel free to star this repo ! :3
Demo
Check this out and have fun : https://codesandbox.io/s/n15n00o8z4
Screenshots
Installation and usage
Install package :
npm install a119
Import one component :
import { Avatar } from "a119";
Or multiple components :
import { Avatar, AvatarGroup } from "a119";
Props
Avatar
Prop | Default | Required | Type | Example |
---|
src | X | Yes | string | X |
alt | X | Yes | string | X |
size | medium | No | string | tiny small medium large big |
variant | circle | No | string | square circle |
presence | X | No | string | online busy away focus offline |
onClick | X | No | function | () => alert("Hello world !"); |
className | X | No | string | X |
AvatarGroup
Soon !
Badge
Prop | Default | Required | Type | Example |
---|
value | X | Yes | number | X |
type | secondary | No | string | primary secondary success warning danger help |
Button
Prop | Default | Required | Type | Example |
---|
text | X | Yes | string | X |
type | secondary | No | string | primary secondary success warning danger help |
variant | X | No | string | outlined dashed link |
className | X | No | string | X |
isDisabled | false | No | boolean | true false |
isLoading | false | No | boolean | true false |
onClick | X | No | function | () => alert("Hello world !"); |
fullwidth | false | No | boolean | true false |
ButtonGroup
Soon !
Switch
Soon !
Star, Fork, Clone & Contribute
Feel free to contribute on this repository. If my work helps you, please give me back with a star. This means a lot to me and keeps me going!