chnsui v0.2.3

CHNsUI - React Reusable Component Library with TailwindCSS

CHNsUI is a collection of reusable React components built with TailwindCSS, providing a quick and easy way to create beautiful UIs for your web projects.

Getting Started

To use CHNsUI in your React project, you can install it via npm:

npm install chnsui

Once installed, you can import and use any component from CHNsUI in your project. (Don't forget to import css file)

import { Button } from 'chnsui';
import 'chnsui/dist/styles.css'

function MyComponent() {
  return <Button>Click me!</Button>;
}

Available Components

CHNsUI provides a variety of components that you can use in your projects:

<Button
<Heading/>
<Paragraph/>

Button

A customizable button component with various color and size options.

import { Button } from 'chnsui';
import 'chnsui/dist/styles.css'

function MyComponent() {
  return (
    <div>
      <Button>Click me!</Button>
      <Button color="red" size="sm">Click me!</Button>
      <Button color="blue" size="lg">Click me!</Button>
    </div>
  );
}

Props

The Button component supports several props that can be used to customize its appearance and behavior:

Examples

Here are some examples of how to use the Button component with different props:

import React from 'react';
import { Button } from 'chnsui';
import 'chnsui/dist/styles.css'

function App() {
  return (
    <div>
      <Button variant="default">Default Button</Button>
      <Button variant="destructive">Destructive Button</Button>
      <Button variant="outline">Outline Button</Button>
      <Button variant="subtle">Subtle Button</Button>
      <Button variant="ghost">Ghost Button</Button>
      <Button variant="link" href="https://google.com" target="_blank">
        Link Button
      </Button>
      <Button variant="withRing">Button with Ring</Button>
      <Button size="sm">Small Button</Button>
      <Button size="lg">Large Button</Button>
      <Button className="bg-yellow-500">Custom Class Button</Button>
      <Button disabled>Disabled Button</Button>
    </div>
  );
}

Heading

The Heading component is a reusable React component that renders a heading element with configurable styles. It provides a range of props that enable the customization of the element's text size, color, font weight, alignment, text transformation, decoration, width, animation, and more.

Here's a table documentation of the component's props:

And here's an example of how to use the Heading component:

import React from 'react';
import { Heading } from 'chnsui';
import 'chnsui/dist/styles.css'

const App = () => {
  return (
    <div>
      <Heading 
        variant="h1" 
        colors="primary" 
        weight="bold" 
        align="center" 
        transform="uppercase" 
        decoration="noUnderline" 
        quickie="q_grad_watermelone x_bounce" 
        animations="x_wave" 
        sectionWidth="full"
      >
        Hello, world!
      </Heading>
  )
}

In this example, we import the Heading component from the Chakra UI library and use it to render a heading on our website. We pass two props to the Heading component: as and size.

The as prop specifies what HTML tag the heading should be rendered as. In this case, we want the heading to be an <h1> tag, so we set as="h1".

The size prop specifies the size of the heading. In this case, we want the heading to be extra large, so we set size="xl".

Inside the Heading component, we provide the text we want to display as the heading. In this example, we're displaying the text "Welcome to my website!".

Paragraph

The Paragraph component is a versatile text component that can display text in various styles and colors. It is built using class-variance-authority for easy class management and comes with a variety of default and custom variants to choose from.

Props:

And here's an example of how to use the Paragraph component with some of its props:

import { Paragraph } from 'chnsui'
import 'chnsui/dist/styles.css'

function MyComponent() {
  return (
    <>
      <Paragraph variant={"transparent"} colors="warning" badge={"warning"}>
        This is a warning message.
      </Paragraph>
      <Paragraph sizes="lg" align="center" decoration="lineThrough">
        This paragraph has large font size, centered text, and a line-through decoration.
      </Paragraph>
    </>
  )
}

Example:

import { Paragraph } from 'chnsui'
import 'chnsui/dist/styles.css'

const App = () => {
  return (
    <>
      <Paragraph bg colors="secondary">
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit voluptatem 
          incidunt deleniti modi voluptate, hic cumque adipisci eveniet error exercitationem,
          vitae voluptatum ducimus. Maiores enim totam aperiam explicabo a quae. Lorem ipsum
          dolor sit amet consectetur, adipisicing elit. Sit voluptatem incidunt deleniti modi 
          voluptate, hic cumque adipisci eveniet error exercitationem, vitae voluptatum ducimus.
          Maiores enim totam aperiam explicabo a quae.
      </Paragraph>
      
      <div className="w-full flex flex-row gap-5">
        <Paragraph colors="dark" variant={"transparent"} badge={"dark"}>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum at consectetur. 
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum at consectetur.
        </Paragraph>
        <Paragraph colors="warning" badge={"warning"} variant={"transparent"}>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum at consectetur.
        </Paragraph>
      </div>
    </>
  )
}

Table

The Table component is a customizable Table wrapper that provides styling and variant options for creating tables in React applications.

Props:

Note: The ...rest prop in the Table component is used to pass any additional HTML attributes to the underlying <table> element.

Example:

import { Paragraph } from "chnsui";
import { Table, TableHead, TableBody, Td, Th, Tr } from "chnsui";
import 'chnsui/dist/styles.css'

export const TableRaw: React.FC = () => {
  return (
    <div className='flex flex-col gap-5'>
      <Paragraph>Default Table</Paragraph>
      <Table>
        <Tr>
            <Th>Kings Treasury</Th>
            <Th>Peoples happiness</Th>
        </Tr>
        <Tr>
            <Td>Empty</Td>
            <Td>Overflowing</Td>
        </Tr>
      </Table>
    </div>
  );
};
export const TableRawSecondary: React.FC = () => {
  return (
    <div className='flex flex-col gap-5'>
      <Paragraph>Default Table</Paragraph>
      <Table variant={"bg"}>
        <TableHead alignment="center">
            <Tr variant={"default"}>
                <Th>Kings Treasury</Th>
                <Th>Kings Treasury</Th>
                <Th>Peoples happiness</Th>
                <Th>Peoples happiness</Th>
            </Tr>
         </TableHead>
         <TableBody alignment="center">
            <Tr variant={"bg"}>
                <Td>Empty</Td>
                <Td>Overflowing</Td>
                <Td variant={"bg"}>.</Td>
                <Td>Overflowing</Td>
            </Tr>
            <Tr variant={"bg"}>
                <Td>Empty</Td>
                <Td>Overflowing</Td>
                <Td>Overflowing</Td>
            </Tr>
            <Tr variant={"bg"}>
                <Td variant={"bg"}>.</Td>
                <Td>Overflowing</Td>
                <Td>Overflowing</Td>
                <Td>Overflowing</Td>
            </Tr>
        </TableBody>
      </Table>
    </div>
  );
};

export const TableSimple = () => {
  return (
    <Table padding="all" alignmentment="center" variant="bg" className="custom-table">
      <TableHead variant="bg" alignment="center">
        <Tr>
          <Th>Header 1</Th>
          <Th>Header 2</Th>
        </Tr>
      </TableHead>
      <TableBody>
        <Tr>
          <Td>Cell 1</Td>
          <Td>Cell 2</Td>
        </Tr>
        <Tr>
          <Td>Cell 3</Td>
          <Td>Cell 4</Td>
        </Tr>
      </TableBody>
    </Table>
  );
};

And here's an example of how to use the Table component with some of its props:

Author

This React component library with TailwindCSS is created and maintained by Touhidul Islam Chayan.

License

CHNsUI is licensed under the MIT License. See the LICENSE file for more