Chikara-ui NPM

👋 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>
  );
}