Hudoro Text

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

Package installation

Instal package using pnpm

  pnpm add @hudoro/text

Instal package using yarn

  yarn add @hudoro/text

Instal package using npm

  npm i @hudoro/text

Usage/Examples

import React from "react";
import {Text} from "@hudoro/text";
import ReactDOM from "react-dom/client";

const App = () => (
  <div>
    <Text color="red-600" fontFamily="Montserrat" margin="spacing-10">
      hello
    </Text>
  </div>
);

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

Props @hudoro/tabs

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

Prop Name	Value	required
fontSize	"xs","sm","md","lg","xl","2xl","3xl","4xl","5xl","6xl",	false
fontWeight	"hairline","thin","light","normal","medium","semibold","bold","extrabold","black",	false
color	"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
align	"left", "center", "right"	false
margin / marginTop / marginBottom / marginLeft / marginRight	"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
children	React.ReactNode	true
lineHeight	"leading-3","leading-4","leading-5","leading-6","leading-7","leading-8","leading-9","leading-10","leading-none","leading-tight","leading-snug","leading-normal","leading-relaxed","leading-loose",	false
textAlign	"left", "center", "right"	false
fontFamily	"Poppins" / "Montserrat"	false
fontFamily	"0.03px", "0.21px", "0.252px", "0.04px", "0.24px", "0.18px"	false