https://github.com/seraui/seraui

A helpful UI library for design engineers. Use cool animations and components with just a copy and paste. Free and open source
https://github.com/seraui/seraui

nextjs react seraui shadcn tailwindcss typescript ui ui-components ui-design uikit

Last synced: 3 months ago
JSON representation

A helpful UI library for design engineers. Use cool animations and components with just a copy and paste. Free and open source

• Host: GitHub
• URL: https://github.com/seraui/seraui
• Owner: seraui
• License: mit
• Created: 2025-07-15T00:30:52.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2025-08-07T03:25:18.000Z (3 months ago)
• Last Synced: 2025-08-07T05:26:53.870Z (3 months ago)
• Topics: nextjs, react, seraui, shadcn, tailwindcss, typescript, ui, ui-components, ui-design, uikit
• Language: TypeScript
• Homepage: https://seraui.seraprogrammer.com
• Size: 2.63 MB
• Stars: 622
• Watchers: 7
• Forks: 48
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Sera UI





  
🚀 Join Our Official Discord Server!

  
Stay connected with the community, get support, share ideas, and be part of something amazing!

  

    Join Discord

  



---



**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**

```bash

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

```

**pnpm**

```bash

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

```

**yarn**

```bash

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

```

**bun**

```bash

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.