---
title: Introduction
description: A customizable, open-source component library for building modern, flexible user interfaces.
icon: house
search:
  keywords: [overview, introduction, redpanda ui]
  boost: 2
---

**Redpanda UI is a set of React components** built with [Tailwind CSS](https://tailwindcss.com/), and [Motion](https://motion.dev/), designed to create fluid and engaging user interfaces. Inspired by [shadcn/ui](https://ui.shadcn.com/) and [Magic UI](https://magicui.design/), Redpanda UI aims to complement these projects by offering a broad range of **animated components** that are easy to integrate and extend.
It contains references to other custom registries such as [Animate UI](https://animate-ui.com/).

Our goal is to continuously grow this collection so that React developers can quickly assemble modern, dynamic interfaces for their applications.

[Get started →](/docs/install)

## Not a Standard Library, but a Distribution of Components

In the same spirit as [shadcn/ui](https://ui.shadcn.com/), **Redpanda UI is not a typical “install-from-NPM” library**. Instead, we provide a **distribution of open-source components that you can copy, modify, and customize** according to your needs. This “open code” approach grants you maximum flexibility without having to rely on complex workarounds for styling or business logic adjustments.

## How is this different from the old component library Redpanda has?

1. **Works well with LLMs**: By offering direct access to the source code, LLM can **edit each component at its core** to fit your unique design system and requirements.

2. **Complementary to Magic UI, Animate UI and shadcn/ui**: Redpanda UI is designed to complement [Magic UI](https://magicui.design/), [Animate UI](https://animate-ui.com/) and [shadcn/ui](https://ui.shadcn.com/) by offering a broad range of animated components that are easy to integrate and extend.

3. **Built with Tailwind CSS and Motion**: Redpanda UI is built with [Tailwind CSS](https://tailwindcss.com/) and [Motion](https://motion.dev/), so you can easily integrate it with your existing projects.

4. **Easy to change theme**: [Tweakcn](https://tweakcn.com/) or their derivatives can also be used to modify the theme of Redpanda UI easily.

5. **No longer tied to legacy tech stack**: Redpanda UI does not use CSS-in-JS solutions like [Chakra](https://v2.chakra-ui.com/), which leads to a decreased bundle size, easier maintenance and simpler integration with AI overall.

6. **Plug and play with other directories**: The entire ecosystem around Tailwind/Shadcn enables building on top of existing components, such as [ShadcnBlocks](https://www.shadcnblocks.com/), [AceternityUI](https://ui.aceternity.com/), [Shadcn Form](https://www.shadcn-form.com/), [21st.dev](https://21st.dev/?tab=home), [Enhanced button](http://enhanced-button.vercel.app), [Modals](http://credenza.rdev.pro), [Drawers](https://vaul.emilkowal.ski)

7. **Safe to use for private repositories**: Fully compatible with [Zeta](https://zeta-registry.vercel.app/) authentication solutions, if we choose to do so in the future.

8. **Figma design system as source of truth**: A lot of Figma docs available, such as [UIPub](https://uipub.com/) or [SilkHQ](https://silkhq.co/access).

:::info
**Note:** This documentation is powered by [Blume](https://useblume.dev/) and was heavily inspired by [Animate UI](https://animate-ui.com/).
:::