A lightweight, minimal React + Tailwind CSS UI component library for fast development.
- ⚡ Super lightweight
- 🎨 Tailwind CSS-based design tokens (theme, spacing, typography)
- ⚛️ Built with React and TypeScript
- 🧱 Composable and customizable
- 🎯 Developer-friendly setup with theming preset
npm install @mananjain31/feather-ui
# or
yarn add @mananjain31/feather-ui
Ensure the following are installed in your project:
npm install react react-dom tailwindcss@3 @tailwindcss/forms @tailwindcss/typography autoprefixer postcss
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:
// 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}"
]
};
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.
import { Button } from "@mananjain31/feather-ui";
function App() {
return <Button onClick={() => alert("Hello!")}>Click Me</Button>;
}
Button
- (More coming soon...)
Suggest a component? Open an issue.
feather-ui/
├── src/
│ ├── components/
│ │ └── Button.tsx
│ ├── tailwind.css
│ └── index.ts
├── dist/ ← Compiled output
├── tailwind.preset.js ← Theme and tokens
├── package.json
└── tsconfig.json
Coming soon on CodeSandbox or StackBlitz!
git clone https://github.com/mananjain31/feather-ui.git
cd feather-ui
npm install
npm run dev
npm run build
Contributions, suggestions, and PRs are welcome!
- Fork the repo
- Make your changes
- Submit a pull request
📋 Check open issues
MIT © Manan Jain