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!