Design System

List of Conmponets

Button

1 <Button size="S|M|L" color="primary|secondary|yellow">

Input

1 <Input label="Labels" name="Name" type="text" />

Input

Grid

1 <Grid></Grid>

Flex

1 <Flex></Flex>

Card

1 <Card size='sm|md|lg|xl|2xl|3xl' />

Hello

Text

1 <Text size="xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" color="primary|secondary|yellow" formatting="underline" | "bold" | "italic" | "normal">

Yellow

primary

secondary

Yellow

Badge

1 <Text size="S" | "M" | "L" color="primary|secondary|yellow" >
Yellow
Yellow
Yellow

Heading

1 <Text size="xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" color="primary|secondary|yellow" >

Yellow

Yellow

Yellow

Yellow

Tag

1 <Text size= "sm" | "lg" color="primary|secondary|yellow" >

Yellow

Yellow

Yellow

Caption

1 <Text size="sm" | "lg">

Yellow

secondary

Range

1 <Range step={1} min={0} max={100} label="Year" value={countRange} onChange={(e) => setRange(e.target.value)} ext="Years" />

0 Years

InputSlider

1 <InputSlider step={1} min={0} max={100} label="Year" value={countRange} onChange={(e) => setRange(e.target.value)} />

Year

Alert

1 <Alert type="error"></Alert>
Error
Warning
Success

Alert

1 2 3 4 5 6 7 <Menu ButtonRender={<MenuButton>Options</MenuButton>}> <MenuItems> <MenuItem>Edit</MenuItem> <MenuItem>Edit</MenuItem> <MenuItem>Edit</MenuItem> </MenuItems> </Menu>

Alert

1 <Divider orientation='vertical|horizontal' />

Example

Select

1 2 3 <Select selected={select} setSelected={(e) => setSelect(e)}> <SelectLabel>Label</SelectLabel> <SelectButton>{select}</SelectButton> <SelectOptions> {SelectData.map((item, i) => ( <SelectOption key={i} value={item.value} name={item.name} /> ))} </SelectOptions> </Select>

Tooltip

1 <Tooltip title='This is Tooltip'>Basic Tooltip</Tooltip>
Basic Tooltip
This is Tooltip

Switch

1 <Switch enabled={enabled} setEnabled={setEnabled} />

Accordion

1 <Accordion title='This is Title'>This is description</Accordion>

Dropzone

1 <Dropzone changeFileUpload={(e) => {}} title='Drop Here' />

Drop Here

Tab

1 <Tab.Group> <Tab.List> <Tab>Tab 1</Tab> <Tab>Tab 2</Tab> <Tab>Tab 3</Tab> </Tab.List> <Tab.Panels> <Tab.Panel>Content 1</Tab.Panel> <Tab.Panel>Content 2</Tab.Panel> <Tab.Panel>Content 3</Tab.Panel> </Tab.Panels> </Tab.Group>

TextArea

1 <TextArea label="Labels" name="Name" type="text" />

TextArea