nowt-ui-library
Version:
Nothing unnecessary. Just clean UI.A lightweight and customizable UI component library built for speed and simplicity for React and Next.js.
427 lines (320 loc) • 13.8 kB
Markdown
# 🌿 nowt-ui
> **Nothing unnecessary. Just clean UI.**
A lightweight and customizable UI component library built for speed and simplicity.
## 🚀 Features
- 🎯 **Minimal & Performant** – Designed with performance in mind.
- 🎨 **Themeable** – Customize styles to fit your brand.
- 🧱 **Reusable Components** – Common building blocks like Button, Input, Modal, etc.
- ⚛️ **Framework Friendly** – Works great with React and modern JS frameworks.
- 🛠️ **Easy to Extend** – Build on top of it or fork it easily.
## ❤️ Why "nowt-ui"?
“Nowt” is British slang for “nothing” — because this library adds nothing unnecessary. Just clean, reusable components that work.
## 🛠️ Getting Started
> ⚠️ This library is currently under development. Only the `Button , Input , Card` component is available for now. More components coming soon!
## 🚀 Installation
```bash
npm install nowt-ui-library
```
# 🖼️ Components
- [Button Component](#button-component)
- [Input Component](#input-component)
- [Card Component](#card-component)
- [TextArea Component](#textarea-component)
## 📦 Usage
## Button Component
```tsx
import React from 'react';
import { Button } from 'nowt-ui-library';
const App = () => {
return (
<Button label="Click me" onClick={() => alert('Hi')} />
);
};
```
## ⚙️ Props
| Prop | Type | Default | Description |
|-------------|------------------------------------------------------------|-------------|--------------------------------------------------|
| `label` | `string` | — | Button text |
| `onClick` | `() => void` | — | Function to call on button click |
| `size` | `'small' | 'medium' | 'large'` | `'medium'` | Size of the button |
| `variant` | `'primary' | 'secondary' | 'danger' | 'outline'` | `'primary'` | Visual style of the button |
| `loading` | `boolean` | `false` | Shows a loading spinner if `true` |
| `disabled` | `boolean` | `false` | Disables the button |
| `fullWidth` | `boolean` | `false` | Makes the button take full width |
| `bgColor` | `string` | — | Custom background color (overrides variant) |
| `textColor` | `string` | — | Custom text color |
## 📚 Examples
### 🔵 Primary Button
```tsx
<Button label="Primary" />
```
### 🔴 Danger with Large Size
```tsx
<Button label="Delete" variant="danger" size="large" />
```
### ⏳ Loading State
```tsx
<Button label="Loading..." loading />
```
### ⚫ Disabled Button
```tsx
<Button label="Disabled" disabled />
```
### 🌈 Custom Colors
```tsx
<Button label="Custom" bgColor="#222" textColor="#0f0" />
```
### ⬜ Outline Style
```tsx
<Button label="Outline" variant="outline" />
```
### 🔄 Full Width
```tsx
<Button label="Full Width" fullWidth />
```
## Input Component
This version includes a powerful and reusable `<Input />` component with full TypeScript support.
```
npm install nowt-ui-library
```
## 🔥 Features
- ✅ Fully typed with TypeScript
- 🎯 Easy to customize with icons, styles, and classNames
- ⚠️ Supports validation + error handling
- 🧠 Works in React & Next.js
- 🎨 Lightweight and reusable
### 💡 All Features Example
```tsx
import React, { useState } from 'react';
// import from your UI lib
import { Mail, Lock, User } from 'lucide-react'; // optional icons
import { Input } from 'nowt-ui-library';
export default function Example() {
const [value, setValue] = useState('');
return (
<div style={{ padding: 32, maxWidth: 450, margin: 'auto' }}>
{/* ✅ label */}
<Input
label="Email"
placeholder="Enter your email"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
{/* ✅ labelClassName */}
<Input
label="Styled Label"
labelClassName="custom-label"
placeholder="With custom label"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
{/* ✅ containerClassName */}
<Input
label="Container Class"
containerClassName="custom-container"
placeholder="Styled container"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
{/* ✅ containerStyle */}
<Input
label="Container Style"
containerStyle={{ backgroundColor: '#f3f4f6', padding: 10 }}
placeholder="Styled container"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
{/* ✅ helperText */}
<Input
label="Username"
placeholder="e.g. lokesh_dev"
helperText="Must be unique"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
{/* ✅ error */}
<Input
label="Invalid Email"
placeholder="example.com"
error="This is not a valid email"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
{/* ✅ leftIcon */}
<Input
label="With Left Icon"
placeholder="example@email.com"
leftIcon={<Mail size={16} />}
value={value}
onChange={(e) => setValue(e.target.value)}
/>
{/* ✅ rightIcon */}
<Input
label="With Right Icon"
placeholder="Enter password"
type="password"
rightIcon={<span style={{ fontSize: 12 }}>👁️</span>}
value={value}
onChange={(e) => setValue(e.target.value)}
/>
{/* ✅ Combined all */}
<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)}
/>
</div>
);
}
```
### 🎨 Custom Styles
You can easily style the `<Input />` component using CSS. Here's an example of how you can style the label and container:
```
.custom-label {
font-weight: bold;
color: green;
}
.custom-container {
background: #fff0f0;
padding: 10px;
border-radius: 6px;
color: #333;
}
```
## 📘 Props
| Prop | Type | Description |
|--------------------|-------------------------------|----------------------------------------|
| `label` | `string` | Label displayed above the input |
| `labelClassName` | `string` | Class for styling the label |
| `containerClassName`| `string` | Custom class for the input container |
| `containerStyle` | `React.CSSProperties` | Inline styles for the input container |
| `helperText` | `string` | Info/help message under the input |
| `error` | `string` | Error message (turns text red) |
| `leftIcon` | `React.ReactNode` | Icon to show inside input on the left |
| `rightIcon` | `React.ReactNode` | Icon to show inside input on the right |
| `...rest` | Native `<input>` props | Supports all native input props |
## Card Component
A clean, modern, and highly customizable React component for displaying premium cards — ideal for SaaS apps, dashboards, e-commerce, portfolios, testimonials, and more.
> Built with ❤️ for developers who care about design and usability.
## 🔥 Features
- ⚡ Production-ready card UI
- 💅 Customizable props (themes, actions, avatars, tags, etc.)
- 🎨 Light & dark themes
- 📱 Responsive & mobile-friendly
- 🧩 Supports cover images, avatars, progress bars, badges, status icons & more
## 📦 Installation
```bash
npm install nowt-ui-library
```
## 🚀 Usage
```tsx
import React from 'react';
import {Card} from 'nowt-ui-library';
const App = () => {
return (
<Card
title="AI Conference 2025"
subtitle="Starts April 14, 2025"
image="https://images.pexels.com/photos/1181316/pexels-photo-1181316.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
description="Join over 10,000 developers and learn about the future of AI and ML."
tag="Online"
tags={['AI', 'ML', 'Future Tech']}
theme="dark"
width={400}
hlight
status="success"
badge="Live"
footer={<span style={{ fontWeight: 500 }}>Save your seat →</span>}
/>
);
};
```
## ✨ 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 |
## 🎨 Custom Styling
Wrap the component in your own layout or apply Tailwind/CSS classes via container.
You can also extend it with your own `theme`, `animation`, or even slot-based customization.
## TextArea Component
## 📦 Installation
```bash
npm install nowt-ui-library
```
## 🚀 Usage
```tsx
import React from 'react';
import {TextArea} from 'nowt-ui-library';
const App = () => {
return (
<TextArea
label="Leave Feedback"
theme="dark"
autosize
maxLength={300}
onChange={(e) => setText(e.target.value)}
value={text}
emoji={true}
width="100%"
height={120}
placeholder="Tell us what you think..."
isMic={true}
/>
);
};
```
## ✨ 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 used to save textarea content as draft |
| `width` | `string` \| `number` | Width of the textarea |
| `height` | `string` \| `number` | Height of the textarea |
| `emoji` | `boolean` | Enable emoji input inside textarea |
| `isMic` | `boolean` | Show microphone icon for voice input |
| `...rest` | `React.TextareaHTMLAttributes<HTMLTextAreaElement>` | All standard `<textarea>` HTML attributes |
## 🧑💻 Author
Made with ❤️ by **Lokesh Choudhary**
- 🐙 GitHub: [@lokesh-choudhary](https://github.com/lokeshchoudharyprogrammer)
- 🐦 Twitter (X): [@itscrazylokesh](https://x.com/itscrazylokesh)