hamon-ui

v0.0.14

Published

3 years ago

A minimal React component library.

Downloads

0High
0Medium
0Low

shiyaam

react ui typescript

Hamon UI - A minimal React component library.

Built using a CSS-in-JS with near-zero runtime library called @stitches/react.

How to install

npm install hamon-ui @stitches/react

Import

import { Button } from "hamon-ui";

Usage

<Button colorScheme="purple">Button</Button>

Usage with Next JS

Create _document.js file under /pages directory, and include the critical path CSS. Learn more about Custom Document.

import React from "react";
import NextDocument, { Html, Head, Main, NextScript } from "next/document";
import { getCssText } from "hamon-ui";

export default class Document extends NextDocument {
  render() {
    return (
      <Html lang="en">
        <Head>
          <style
            id="hamonui"
            dangerouslySetInnerHTML={{ __html: getCssText() }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

Components

Components that are available to work with.

Badge
Button
ButtonGroup
Box
Flex
Grid
HStack
VStack

Props

Most of the components have a colorScheme and a size prop.

colorScheme prop values:

"purple" | "red" | "green" | "yellow" | "pink" | "blue" | "indigo";

size prop values:

"small" | "medium" | "large";

Customizing the styles.

Since hamon-ui uses @stitches/react, we can leverage the css prop provided by them.

All Hamon UI elements have css prop which takes in styles as an object.

Example usage.

<Button
  css={{
    backgroundColor: "green",
    width: "200px",
    borderRadius: "9999px",
  }}
>
  Custom Button
</Button>

Theme customization

Right now hamon-ui consists of default colors and spacings which was inspired from TailwindCSS.

When using the css, you can access those default theme values with a $ prefix.

For a color:

"$[colorname][huevalue]";

<Box
  css={{
    backgroundColor: "$purple500",
    color: "$yellow700",
  }}
>
  Hello there.
</Box>

To learn more about the css prop checkout @stitches/react docs.

List of available colors:

Gray
Purple
Red
Yellow
Green
Blue
Indigo
Pink

Available hues are from 100 to 900.

Spacing Props

1 - "4px"
2 - "8px"
3 - "12px"
4 - "16px"
5 - "20px"
6 - "24px"
7 - "28px"
8 - "32px"
9 - "34px"
10 - "40px"
12 - "48px"
14 - "56px"
16 - "64px"
18 - "72px"
20 - "80px"
24 - "96px"
28 - "112px"

Check out @stitches/react docs here.