🪶 Feather UI

A lightweight, minimal React + Tailwind CSS UI component library for fast development.

✨ Features

• ⚡ Super lightweight
• 🎨 Tailwind CSS-based design tokens (theme, spacing, typography)
• ⚛️ Built with React and TypeScript
• 🧱 Composable and customizable
• 🎯 Developer-friendly setup with theming preset

📦 Installation

npm install @mananjain31/feather-ui
# or
yarn add @mananjain31/feather-ui

🔧 Peer Dependencies

Ensure the following are installed in your project:

npm install react react-dom tailwindcss@3 @tailwindcss/forms @tailwindcss/typography autoprefixer postcss

🧪 Mandatory Tailwind Setup

To ensure full theming support (like bg-muted, text-primary, etc.), you must add Feather UI’s preset and import its CSS in your tailwind.config.js and your main CSS entry:

1. Add Preset in Tailwind Config

// tailwind.config.js
const featherPreset = require("@mananjain31/feather-ui/preset");

module.exports = {
  presets: [featherPreset],
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@mananjain31/feather-ui/**/*.{js,ts,jsx,tsx}"
  ]
};

2. Import Component Styles

In your src/index.css or src/globals.css:

@import "@mananjain31/feather-ui/styles.css";

🔁 Don’t forget to restart your dev server after editing Tailwind config or CSS files.

🛠️ Usage

import { Button } from "@mananjain31/feather-ui";

function App() {
  return <Button onClick={() => alert("Hello!")}>Click Me</Button>;
}

📚 Available Components

• Button
• (More coming soon...)

Suggest a component? Open an issue.

📁 File Structure

feather-ui/
├── src/
│   ├── components/
│   │   └── Button.tsx
│   ├── tailwind.css
│   └── index.ts
├── dist/              ← Compiled output
├── tailwind.preset.js          ← Theme and tokens
├── package.json
└── tsconfig.json

🔗 Live Demo

Coming soon on CodeSandbox or StackBlitz!

🧪 Local Development

git clone https://github.com/mananjain31/feather-ui.git
cd feather-ui
npm install
npm run dev

📤 Build

npm run build

🤝 Contributing

Contributions, suggestions, and PRs are welcome!

1. Fork the repo
2. Make your changes
3. Submit a pull request

📋 Check open issues

🧩 License

MIT © Manan Jain