<h1>Sera UI</h1>
<blockquote>
⚠️ Note 
Hello everyone, give it a ⭐ star — I will release this as open source on GitHub very soon!
<a href="https://github.com/seraui/seraui" target="_blank" rel="noopener nofollow">Github Link</a>
</blockquote>
<img src="https://media.daily.dev/image/upload/s--k9KJQP1I--/f_auto/v1752793534/ugc/content_7a123827-ff23-4c46-9d39-80b9674e2772?_a=BAMClqZW0" alt="Screenshot 2025-07-18 045827">
<img src="https://media.daily.dev/image/upload/s--YQ2PGPHk--/f_auto/v1752793542/ugc/content_f59a5d51-dd32-488b-b4f6-c1c5dfd4d6f5?_a=BAMClqZW0" alt="Screenshot 2025-07-18 045915">
<img src="https://media.daily.dev/image/upload/s--hIVZ4PWG--/f_auto/v1752793555/ugc/content_30f1368b-6e17-4df2-95c0-a3a580e5cce8?_a=BAMClqZW0" alt="Screenshot 2025-07-18 050129">
<img src="https://media.daily.dev/image/upload/s--Tva97pEn--/f_auto/v1752793549/ugc/content_13bff1b5-8f6b-45f5-8056-334d67864afa?_a=BAMClqZW0" alt="Screenshot 2025-07-18 045802">
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 <code>React</code> and <code>Next.js</code> only. Our goal is to create next-level UI with minimal code, optimal performance, and a modern feel.
<blockquote>
💡 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.
</blockquote>
<hr>
<h2>✨ Features</h2>
<ul>
<li>🎨 Modern Design: Clean and beautiful UI components.</li>
<li>⚡ High Performance: Built with performance and accessibility in mind.</li>
<li>🧱 Easy to Customize: Easily themeable with Tailwind CSS.</li>
<li>🔄 Smooth Animations: Powered by the excellent <code>framer-motion</code> library.</li>
<li>🧩 Icons Included: <code>lucide-react</code> icons are integrated out of the box.</li>
</ul>
<hr>
<h2>🚀 Getting Started</h2>
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.
<h3>CLI Installation</h3>
Our CLI will guide you through the process of adding components to your project. Here is an example of how to add the <code>Button</code> component:
npm
<pre><code class="language-bash">npx shadcn@latest add &quot;https://seraui.seraprogrammer.com/registry/button.json&quot;
</code></pre>
pnpm
<pre><code class="language-bash">pnpm dlx shadcn@latest add &quot;https://seraui.seraprogrammer.com/registry/button.json&quot;
</code></pre>
yarn
<pre><code class="language-bash">yarn dlx shadcn@latest add &quot;https://seraui.seraprogrammer.com/registry/button.json&quot;
</code></pre>
bun
<pre><code class="language-bash">bunx shadcn@latest add &quot;https://seraui.seraprogrammer.com/registry/button.json&quot;
</code></pre>
<h3>Manual Installation</h3>
For manual installation, you can copy and paste the component code directly from our documentation into your project.
<ol>
<li>Choose a Component: Browse our component library and find what you need.</li>
<li>Copy the Code: You can view and copy the source code for each component.</li>
<li>Paste and Customize: Paste the code into your project and customize it to fit your needs.</li>
</ol>
<hr>
<h2>🧩 Available Components</h2>
We are constantly growing our library of components. Here are some of the components currently available:
<ul>
<li>Accordion</li>
<li>Alert</li>
<li>Avatar</li>
<li>Badge</li>
<li>Button</li>
<li>Card</li>
<li>Checkbox</li>
<li>Dialog (Modal)</li>
<li>Input</li>
<li>Label</li>
<li>Select</li>
<li>Tabs</li>
<li>Textarea</li>
<li>Tooltip</li>
</ul>
…and more are on the way!
<hr>
<h2>🎨 Theming</h2>
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 <code>tailwind.config.js</code> file. The components are unstyled by default and will automatically adapt to your theme.
<hr>
<h2>📜 License</h2>
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.
<hr>
<h2>💬 Community &amp; Support</h2>
Have a question or want to get involved?
<ul>
<li>GitHub Discussions: The best place to ask questions, share ideas, and get help from the community.</li>
<li>Report an Issue: If you find a bug, please report it on our GitHub Issues page.</li>
</ul>

A community for all things frontend! Share tips, tutorials, and resources on HTML, CSS, JavaScript, frameworks (React, Vue, Next js, Angular, and more), performance, UI/UX, and more. Let’s code, learn, and grow together! 🚀👩‍💻👨‍💻


All Frontend

Sera UI - Modern React Component Library

You’re killing it! Keep up the good work! ⚔️

Hello good work! How much time to create this ?

Great work, we might try it on our website. I already see some components that we could use 🚀🎉