Documentation

Welcome to the docs for Nowt UI. Explore components and how to use them effectively.

Button

npm install nowt-ui-library

import { Button } from nowt-ui-library

🔵 Primary Button

<Button label="Click me" onClick={() => alert('Hi')} />

⏳ Loading

<Button label="Loading..." loading />

🔽 More button examples

🔴 Danger Large

<Button label="Delete" variant="danger" size="large" />

⚫ Disabled

<Button label="Disabled" disabled />

🌈 Custom Colors

<Button label="Custom" bgColor="#FF9B19" textColor="#0f0" />

⬜ Outline

<Button label="Outline" variant="outline" />

🔄 Full Width

<Button label="Full Width" fullWidth />

⚙️ Show Props

Prop	Type	Default	Description
label	string	—	Button text
onClick	() => void	—	Function on click
size	'small' \| 'medium' \| 'large'	'medium'	Size of the button
variant	'primary' \| 'secondary' \| 'danger' \| 'outline'	'primary'	Button style
loading	boolean	false	Shows spinner if true
disabled	boolean	false	Disables the button
fullWidth	boolean	false	Takes full width
bgColor	string	—	Custom background color
textColor	string	—	Custom text color

Input

npm install nowt-ui-library

import { Input } from nowt-ui-library

📥 Left Icon

With Left Icon

<Input label="With Left Icon" placeholder="example@email.com" leftIcon={<Mail size={16} />} value={value} onChange={(e) => setValue(e.target.value)} />

🔒 Right Icon

With Right Icon

👁️

<Input label="With Right Icon" placeholder="Enter password" type="password" rightIcon={<span style={{ fontSize: 12 }}>👁️</span>} value={value} onChange={(e) => setValue(e.target.value)} />

🔍 More Examples & Props

📧 Email Input

<Input label="Email" placeholder="Enter your email" value={value} onChange={(e) => setValue(e.target.value)} />

🎨 Styled Label

Styled Label

<Input label="Styled Label" labelClassName="custom-label" placeholder="With custom label" value={value} onChange={(e) => setValue(e.target.value)} />

📦 Container Class

Container Class

<Input label="Container Class" containerClassName="custom-container" placeholder="Styled container" value={value} onChange={(e) => setValue(e.target.value)} />

🎨 Inline Container Style

Container Style

<Input label="Container Style" containerStyle={{ backgroundColor: '#000', padding: 10 }} placeholder="Styled container" value={value} onChange={(e) => setValue(e.target.value)} />

ℹ️ With Helper Text

Username

Must be unique

<Input label="Username" placeholder="e.g. lokesh_dev" helperText="Must be unique" value={value} onChange={(e) => setValue(e.target.value)} />

❌ Error State

Invalid Email

This is not a valid email

<Input label="Invalid Email" placeholder="example.com" error="This is not a valid email" value={value} onChange={(e) => setValue(e.target.value)} />

✅ Full Combo

Full Combo

✅

Min 3 characters

<Input label="Full Combo" labelClassName="text-blue-500" containerClassName="rounded-md shadow" containerStyle={{ marginTop: 20 }} placeholder="All props together" helperText="Everything included" error={value.length < 3 ? 'Min 3 characters' : ''} leftIcon={<User size={16} />} rightIcon={<span style={{ fontSize: 12 }}>✅</span>} value={value} onChange={(e) => setValue(e.target.value)} />

📘 Show Input Props

Prop	Type	Default	Description
label	string	—	Text label shown above the input
placeholder	string	—	Placeholder text inside input
value	string	—	Input value
onChange	(e) => void	—	Callback on input change
helperText	string	—	Helper or description text
error	string	—	Error message (red text)
type	string	'text'	Input type (e.g. text, email, password)
labelClassName	string	—	Custom class for label
containerClassName	string	—	Custom class for wrapper div
containerStyle	CSSProperties	—	Inline styles for wrapper
leftIcon	ReactNode	—	Icon element on the left
rightIcon	ReactNode	—	Icon element on the right
...rest	InputHTMLAttributes	—	All native input props

Card

npm install nowt-ui-library

import { Card } from nowt-ui-library

🧾 Basic Card

🌈 Card with Avatar & Badge

🔽 More card examples

📊 Progress & Tags

📦 Image + Footer

🔘 With Status

⚙️ Actions & Highlight

✨ Props

Prop	Type	Description
title	string	Main title
subtitle	string	Subtitle text
description	string	Optional card description
image	string	Optional cover image
avatar	string	Optional avatar image (circular)
badge	string	Small badge on top-left (e.g., Pro, Beta)
tag	string	Highlighted tag above title
tags	string[]	Array of tags (displayed as chips)
status	"success" \| "warning" \| "error" \| "neutral"	Status dot beside avatar or tag
progress	number	Optional progress bar (0-100)
theme	"light" \| "dark"	Theme styling
width	number	Width of the card (default 320)
footer	ReactNode	Content shown at bottom
actions	ReactNode	Buttons, links, etc. for user action
hlight	boolean	Apply hover highlight effect

TextArea

npm install nowt-ui-library

import { TextArea } from nowt-ui-library

🔹 Full Demo

Leave Feedback

🔹 Width + Label

Blog Draft

🔽 More TextArea examples

🔹 Basic Textarea

🔹 Label + Dark Mode

Comment

🔹 MaxLength + Placeholder + Autosize

Bio

✨ Props

Prop	Type	Description
label	string \| null \| undefined	Optional label for the textarea
maxLength	number	Maximum number of characters allowed
autosize	boolean	Whether the textarea should auto-resize
theme	Theme	Custom theme object for styling
draftKey	string	Key for saving drafts locally
width	string \| number	Width of the textarea
height	string \| number	Height of the textarea
emoji	boolean	Enable emoji support inside textarea
isMic	boolean	Show microphone for voice input
...rest	React.TextareaHTMLAttributes<HTMLTextAreaElement>	All standard textarea attributes

Rating

npm install @nowt/rating

import { Rating } from npm i @nowt/rating

✨ Props

Prop	Type	Description
value	number	Current rating value (e.g., 3.5 for 3.5 stars)
max	number	Maximum number of stars/emojis
onChange	(rating: number) => void	Callback function triggered when the rating changes
size	number	Size of each star/emoji in pixels
color	string	Color of inactive stars/emojis (hex or CSS color)
activeColor	string	Color of active stars/emojis (hex or CSS color)
readonly	boolean	Disables interaction if true
allowHalf	boolean	Enables half-star ratings if true
className	string	Additional CSS class for the container div
emoji	string \| JSX.Element	Custom emoji (e.g., "❤️") or SVG element
tooltip	boolean	Shows rating tooltips on hover if true
theme	"default" \| "cosmic" \| "neon" \| "futuristic" \| "minimal"	Visual theme for glow, particles, and tooltip styles
animation	boolean	Enables animations (click, hover, particles) if true
glowIntensity	"low" \| "medium" \| "high"	Intensity of the glow effect