Sera UI

⚠️ Note

Hello everyone, give it a ⭐ star — I will release this as open source on GitHub very soon!
Github Link

Beautifully designed components you can copy and paste into your apps. Accessible. Customizable. Open Source.

Sera UI is a reusable component library for React, Next.js, and other JSX-based libraries. Currently, we support React and Next.js only. Our goal is to create next-level UI with minimal code, optimal performance, and a modern feel.

💡 Why Sera UI?

“I’m a JavaScript library creator from Bangladesh, not a professional designer. But after building several front-end projects, I realized I needed my own UI system to streamline everything.”

Sera UI is born from real development needs — built by a developer, for developers.

✨ Features

• 🎨 Modern Design: Clean and beautiful UI components.
• ⚡ High Performance: Built with performance and accessibility in mind.
• 🧱 Easy to Customize: Easily themeable with Tailwind CSS.
• 🔄 Smooth Animations: Powered by the excellent framer-motion library.
• 🧩 Icons Included: lucide-react icons are integrated out of the box.

🚀 Getting Started

You can add Sera UI components to your project in two ways: using our CLI for a quick setup or by manually copying the component code for more control.

CLI Installation

Our CLI will guide you through the process of adding components to your project. Here is an example of how to add the Button component:

npm

npx shadcn@latest add "https://seraui.seraprogrammer.com/registry/button.json"

pnpm

pnpm dlx shadcn@latest add "https://seraui.seraprogrammer.com/registry/button.json"

yarn

yarn dlx shadcn@latest add "https://seraui.seraprogrammer.com/registry/button.json"

bun

bunx shadcn@latest add "https://seraui.seraprogrammer.com/registry/button.json"

Manual Installation

For manual installation, you can copy and paste the component code directly from our documentation into your project.

1. Choose a Component: Browse our component library and find what you need.
2. Copy the Code: You can view and copy the source code for each component.
3. Paste and Customize: Paste the code into your project and customize it to fit your needs.

🧩 Available Components

We are constantly growing our library of components. Here are some of the components currently available:

• Accordion
• Alert
• Avatar
• Badge
• Button
• Card
• Checkbox
• Dialog (Modal)
• Input
• Label
• Select
• Tabs
• Textarea
• Tooltip

...and more are on the way!

🎨 Theming

Sera UI is built on top of Tailwind CSS, making it incredibly easy to customize the look and feel to match your brand. You can customize colors, fonts, spacing, and more by simply modifying your tailwind.config.js file. The components are unstyled by default and will automatically adapt to your theme.

📜 License

Sera UI is an open-source project released under the MIT License. This means you are free to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the software.

💬 Community & Support

Have a question or want to get involved?

• GitHub Discussions: The best place to ask questions, share ideas, and get help from the community.
• Report an Issue: If you find a bug, please report it on our GitHub Issues page.