👋 Welcome to Chikara UI
About the library Chikara UI
Chikara UI is a library for get automatically the font color.
Also you can get some design about this library, where you can customize all.
NOTE: Chikara UI work in Next Js App Router. We are working for more compatibilities.
⚙ How Install
npm i chikara-ui🤓 Using the library
Input
The properties for Input, for example is:
label: Text of label of component
name: Name attribute of tag
type: It is the type of input
bgColor: It is for add background-color. You need add the background-color
onChange: You can add the event onChange
textAlign: Change the align of text, by default is to left
import {Input} from 'chikara-ui';
export default function Home() {
return (
<>
<Input type="text" label={"myText"} bgColor={"darkblue"}/>
</>
);
}Title
The properties for Title is:
text: Text of label of component
bgColor: It is for add background-color. You need add the background-color
className: You can add the className
id: You can add the id
import {Title} from 'chikara-ui';
export default function Home() {
return (
<>
<Title bgColor="#000" text="Hola como estas?" />
</>
);
}Button
The properties for Button is:
text: Text of label of component
bgColor: It is for add background-color. You need add the background-color
className: You can add the className
id: You can add the id
import {Button} from 'chikara-ui';
export default function Home() {
return (
<>
<Button bgColor="darkblue">Click here</Button>
</>
);
}Dropdown
The properties for Dropdown is:
name: name of component
bgColor: It is for add background-color. You need add the background-color
className: You can add the className
id: You can add the id
borderRadius: It is the border radius of component
import {Dropdown} from 'chikara-ui';
export default function Home() {
return (
<>
<Dropdown bgColor="white" name={"drp"} borderRadius="10px">
<option>Select your number</option>
<option>1</option>
<option>2</option>
<option>3</option>
</Dropdown>
</>
);
}Divider
The properties for Divider is:
width: width of component
style: set your style of component
className: You can add the className
id: You can add the id
import {Divider} from 'chikara-ui';
export default function Home() {
return (
<>
<Divider width="30%"/>
</>
);
}Sketch (P5)
The properties for Sketch is:
sketch: code for P5, it is a code normal, using the property "p"
style: set your style of component
className: You can add the className
id: You can add the id
import {Sketch} from 'chikara-ui/P5';
export default function Home() {
return (
<>
<Sketch sketch={
(p)=>{
p.setup = () => {
p.createCanvas(500, 500);
}
p.draw = () => {
p.background("#e9e2d7")
p.circle(120, 120, 90);
p.rect(120, 120, 120,12);
}
}} />
</>
);
}Modal
The properties for Modal is:
isOpen: it is a boolean, it is for do visible or hide the modal
autoScroll: it is a boolean, it is for when you use the component Main
className: You can add the className
id: You can add the id
import { useState } from "react"
import { Input, Button, Divider, Modal, ModalContainer, ModalHeader, ModalBody, ModalFooter, Main } from 'chikara-ui';
export default function Home() {
const [isOpen, setIsOpen] = useState(false);
return (
<Main>
Click here for more information
<Button bgColor="rgb(12,99,99)" onClick={() => setIsOpen(true)}>Open Modal</Button>
<Modal isOpen={isOpen} autoScroll={true}>
<ModalContainer onClick={() => setIsOpen(false)}>
<ModalHeader>My Header</ModalHeader>
<Divider />
<ModalBody>
<Input type="text" label={"Nombre"} bgColor={"red"} />
<Input type="text" label={"Apellido"} bgColor={"red"} />
<Input type="number" label={"Edad"} bgColor={"red"} />
<Input type="email" label={"Email"} bgColor={"red"} />
<Input type="password" label={"Contraseña"} bgColor={"red"} />
</ModalBody>
<ModalFooter>
<Button bgColor="rgba(255,0,0,0.4)" onClick={() => setIsOpen(false)}>Close</Button>
<Button bgColor="rgba(0,205,0,0.4)" onClick={() => setIsOpen(false)}>Save</Button>
</ModalFooter>
</ModalContainer>
</Modal>
</Main>
);
}Main
The properties for Main is:
className: You can add the className
id: You can add the id
import { Main } from 'chikara-ui';
export default function Home() {
return (
<Main>
Click here for more information
</Main>
);
}Dialog
The properties for Dialog is:
title: It is the title of header
text: It is the title of body
lan: It is the language of button
onClose: It is of function for close the dialog
bgColor: It is for add background-color. You need add the background-color
import { useState } from "react"
import { Button, Dialog, Main } from '../../../chikara-ui/index';
export default function Home() {
const [isOpen, setIsOpen] = useState(false);
const [isOpenDialog, setIsOpenDialog] = useState(false);
return (
<Main>
<Button bgColor="white" onClick={()=>{setIsOpenDialog(true)}}>Open Dialog</Button>
<Dialog isOpen={isOpenDialog}
text={"Estas teniendo un problema con el servidor, revise su conexion"} title="header"
lan="es"
bgColor="white"
onClose={()=>{setIsOpenDialog(false)}}
/>
</Main>
);
}📝 Version 1.3.0
Improve adding color custom on font text for:
Input
Title
Dropdown
Button
ModalContainer
Improve Naural Network
Add component Dialog
📝 Version 1.2.0
Improve the Input adding new property
NOTE: Sketch P5 have a minor bug, we are working for fix this one.
📝 Version 1.1.9
Add follow components:
Modal
ModalContainer
ModalHeader
ModalBody
ModalFooter
Main
Improve the Input component style
Improve the Divider component style
NOTE: Sketch P5 have a minor bug, we are working for fix this one.