Hudoro Box

Hudoro Box is a strict and customizable Box component for web development projects, designed for simplicity and adherence to strict design guidelines.

Screenshots

Package instalation

Instal package using pnpm

  pnpm add @hudoro/box

Instal package using yarn

  yarn add @hudoro/box

Instal package using npm

  npm i @hudoro/box

Usage/Examples

import React from "react";
import {Box} from "@hudoro/box";
import ReactDOM from "react-dom/client";

const App = () => (
  <div>
    <Box
      shadow="shadow-2xl"
      display="flex"
      direction="row"
      justify="center"
      align="center"
      width="width-max"
      customWidth={"100px"}
      customMargin={"100px"}
      customPadding={"100px"}
      borderRadius="rounded-lg"
      customBorder={"1px solid red"}
      bg="blue-300"
    >
      Box
    </Box>
  </div>
);

ReactDOM.createRoot(document.getElementById("app")!).render(<App />);

Props @hudoro/toggle

Props that you can pass to <Toggle {...props} />

| Prop Name | Value | required | | :----------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------- | | fullWidth | boolean | false | | fullHeight | boolean | false | | display | "flex","block","inline-block","inline-flex","none", | false | | direction | "row","column","sm-row","sm-column","md-row","md-column","lg-row","lg-column","xl-row","xl-column", | false | | justify | "flex-start","flex-end","center","space-between","space-around","space-evenly", | false | | align | "flex-start","flex-end","center","baseline","stretch", | false | | gap / rowGap / margin / marginTop / marginBottom /marginLeft / marginRight / marginBlock / marginInline | "xs","sm","md","lg","auto","spacing-0","spacing-1","spacing-2","spacing-3","spacing-4","spacing-5","spacing-6","spacing-8","spacing-10","spacing-12","spacing-16","spacing-20","spacing-24","spacing-32","spacing-40","spacing-48","spacing-56","spacing-64", | false | | padding / paddingTop / paddingBottom / paddingLeft / paddingRight / paddingBlock / paddingInline | "xs","sm","md","lg","spacing-0","spacing-1","spacing-2","spacing-3","spacing-4","spacing-5","spacing-6","spacing-8","spacing-10","spacing-12","spacing-16","spacing-20","spacing-24","spacing-32","spacing-40","spacing-48","spacing-56","spacing-64", | false | | bg / borderColor | "primary", "secondary", "tertiary","success", "error", "warning", "info","text", "text-light", "text-muted", "text-dark","gray-50","gray-100","gray-200","gray-300","gray-400","gray-500","gray-600","gray-700","gray-800","gray-900","gray-950","red-50","red-100","red-200","red-300","red-400","red-500","red-600","red-700","red-800","red-900","red-950","orange-50","orange-100","orange-200","orange-300","orange-400","orange-500","orange-600","orange-700","orange-800","orange-900","orange-950","yellow-50","yellow-100","yellow-200","yellow-300","yellow-400","yellow-500","yellow-600","yellow-700","yellow-800","yellow-900","yellow-950","green-50","green-100","green-200","green-300","green-400","green-500","green-600","green-700","green-800","green-900","green-950","blue-50","blue-100","blue-200","blue-300","blue-400","blue-500","blue-600","blue-700","blue-800","blue-900","blue-950","purple-50","purple-100","purple-200","purple-300","purple-400","purple-500","purple-600","purple-700","purple-800","purple-900","purple-950" | false | | variant | "article" / "aside" / "header" / "main" / "nav" / "section" | false | | flex | "1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41","42","43","44","45" | false | | show / hide | "mobile" / "tablet" / "desktop" | false | | minWidth / width | "width-0","width-1","width-2","width-3","width-4","width-5","width-6","width-8","width-10","width-12","width-16","width-20","width-24","width-32","width-40","width-48","width-56","width-64","width-xs","width-sm","width-md","width-lg","width-auto","width-1-2","width-1-3","width-2-3","width-1-4","width-2-4","width-3-4","width-1-5","width-2-5","width-3-5","width-4-5","width-1-6","width-2-6","width-3-6","width-4-6","width-5-6","width-full","width-screen","width-min","width-max","width-fit ", | false | | shadow | "shadow-sm","shadow-md","shadow-lg","shadow-xl","shadow-2xl","shadow-inner","shadow", | false | | flexWrap / wrap | "nowrap","wrap","wrap-reverse","initial","inherit" | false | | height | "height-0","height-1","height-2","height-3","height-4","height-5","height-6","height-8","height-10","height-12","height-16","height-20","height-24","height-32","height-40","height-48","height-56","height-64","height-xs","height-sm","height-md","height-lg","height-auto","height-1-2","height-1-3","height-2-3","height-1-4","height-2-4","height-3-4","height-1-5","height-2-5","height-3-5","height-4-5","height-1-6","height-2-6","height-3-6","height-4-6","height-5-6","height-full","height-screen","height-min","height-max","height-fit", | false | | borderRadius / borderTopLeftRadius / borderTopRightRadius / borderBottomRightRadius / borderBottomLeftRadius | "rounded-none","rounded-xs","rounded-sm","rounded-base","rounded-md","rounded-lg","rounded-xl","rounded-2xl","rounded-3xl","rounded-4xl","rounded-full" | false | | borderWidth | "border-0","border-2","border-4","border-8","border","border-t-0","border-t-2","border-t-4","border-t-8","border-t","border-r-0","border-r-2","border-r-4","border-r-8","border-r","border-b-0","border-b-2","border-b-4","border-b-8,","border-b","border-l-0","border-l-2","border-l-4","border-l-8","border-l","border-x-0","border-x-2","border-x-4","border-x-8","border-x","border-y-0","border-y-2","border-y-4","border-y-8","border-y", | false | | borderStyle | "border-solid","border-dashed","border-dotted","border-double","border-hidden","border-none","border-solid-t","border-dashed-t","border-dotted-t","border-double-t","border-hidden-t","border-none-t","border-solid-r","border-dashed-r","border-dotted-r","border-double-r","border-hidden-r","border-none-r","border-solid-b","border-dashed-b","border-dotted-b","border-double-b","border-hidden-b","border-none-b","border-solid-l","border-dashed-l","border-dotted-l","border-double-l","border-hidden-l","border-none-l" | false | | position | "static","absolute","fixed","relative","sticky","initial","inherit" | false | | top | "top-0" | false | | left | "left-0" | false | | right | "right-0" | false | | bottom | "bottom-0" | false | | Translate | "translate-x-0","translate-y-0","translate-x-1","translate-y-1","translate-x-2","translate-y-2","translate-x-3","translate-y-3","translate-x-4","translate-y-4","translate-x-5","translate-y-5","translate-x-6","translate-y-6","translate-x-7","translate-y-7","translate-x-8","translate-y-8","translate-x-9","translate-y-9","translate-x-10","translate-y-10","translate-x-11","translate-y-11","translate-x-12","translate-y-12","translate-x-14","translate-y-14","translate-x-16","translate-y-16","translate-x-20","translate-y-20","translate-x-24","translate-y-24","translate-x-28","translate-y-28","translate-x-32","translate-y-32","translate-x-36","translate-y-36","translate-x-40","translate-y-40","translate-x-44","translate-y-44","translate-x-48","translate-y-48","translate-x-52","translate-y-52","translate-x-56","translate-y-56","translate-x-60","translate-y-60","translate-x-64","translate-y-64","translate-x-72","translate-y-72","translate-x-80","translate-y-80","translate-x-96","translate-y-96","translate-x-1-2","translate-x-1-3","translate-x-2-3","translate-x-1-4","translate-x-2-4","translate-x-3-4","translate-x-full","translate-y-1-2","translate-y-1-3","translate-y-2-3","translate-y-1-4","translate-y-2-4","translate-y-3-4","translate-y-full" | false | | overflow | "overflow-auto","overflow-hidden","overflow-clip","overflow-visible","overflow-scroll","overflow-x-auto","overflow-y-auto","overflow-x-hidden","overflow-y-hidden","overflow-x-clip","overflow-y-clip","overflow-x-visible","overflow-y-visible","overflow-x-scroll","overflow-y-scroll" | false | | cursor | "pointer" | false | | customBorder | CSSProperties["border"] | false | | customMaxHeight | CSSProperties["maxHeight"] | false | | customMinHeight | CSSProperties["minHeight"] | false | | customMaxWidth | CSSProperties["maxWidth"] | false | | customMinWidth | CSSProperties["minWidth"] | false | | customWidth | CSSProperties["width"] | false | | customHeight | CSSProperties["height"] | false | | customBackgroundColor | CSSProperties["backgroundColor"] | false | | customMargin | CSSProperties["margin"] | false | | customPadding | CSSProperties["padding"] | false |