nowt-ui-library

🌿 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

npm install nowt-ui-library

---

🖼️ Components

• Button Component
• Input Component
• Card Component
• TextArea Component

📦 Usage

Button Component

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'`
variant	`'primary'	'secondary'	'danger'
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

<Button label="Primary" />

🔴 Danger with Large Size

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

⏳ Loading State

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

⚫ Disabled Button

<Button label="Disabled" disabled />

🌈 Custom Colors

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

⬜ Outline Style

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

🔄 Full Width

<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

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="[e-mail]"
        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

npm install nowt-ui-library

---

🚀 Usage

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

npm install nowt-ui-library

---

🚀 Usage

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
• 🐦 Twitter (X): @itscrazylokesh

---