Skip to main content

​
Welcome to Reflex UI

Reflex UI is a powerful collection of reusable UI components built on top of Base UI and Tailwind CSS, designed for seamless integration into any Reflex project. Create beautiful, accessible, and performant web applications with pre-built components that follow best practices.

​
What is Reflex UI?

Reflex UI provides a comprehensive set of production-ready components that work out of the box with Reflex, Python’s full-stack web framework. Whether you’re building a dashboard, a landing page, or a complex web application, Reflex UI gives you the building blocks you need.

​
Key Features

Pre-styled Components

Over 20 beautifully designed components with Tailwind CSS, including buttons, cards, dialogs, menus, and more.

Fully Accessible

Built on top of Base UI with accessibility in mind, following ARIA best practices.

Customizable

Easy to customize with Tailwind utility classes and component variants. Supports light and dark modes out of the box.

Type Safe

Full Python type hints and validated props for a better developer experience.

​
Component Library

Reflex UI includes a rich set of components:

​
Core Components

  • Button - Multiple variants (primary, secondary, outline, ghost, destructive)
  • Card - Flexible card layouts with header, content, and footer
  • Input - Text inputs with validation support
  • Select - Dropdown select menus
  • Checkbox - Styled checkboxes with labels
  • Switch - Toggle switches for binary choices
  • Slider - Range sliders for numeric inputs

​
Layout & Navigation

  • Tabs - Tabbed interfaces for content organization
  • Dialog - Modal dialogs and alerts
  • Drawer - Sliding panels from screen edges
  • Menu - Dropdown and context menus
  • Navigation Menu - Complex navigation structures
  • Accordion - Collapsible content sections

​
Feedback & Display

  • Tooltip - Contextual information on hover
  • Badge - Status indicators and labels
  • Avatar - User profile images
  • Skeleton - Loading placeholders
  • Scroll Area - Custom scrollable regions

​
Advanced Components

  • Gradient Profile - Dynamic gradient avatars with seed-based generation
  • Theme Switcher - Light/dark mode toggle
  • Preview Card - Rich preview cards with hover effects

​
Design System

Reflex UI uses a semantic color system based on Radix Colors:
  • Primary - Main brand color (Violet by default)
  • Secondary - Neutral colors (Slate by default)
  • Destructive - Error states (Red)
  • Success - Success states (Jade)
  • Warning - Warning states (Amber)
  • Info - Information states (Blue)
The design system includes 12-step color scales with alpha variants, providing fine-grained control over your UI.

Installation

Get started by installing Reflex UI in your project

Quickstart

Build your first component in minutes

Components

Explore the full component library

​
Why Reflex UI?

Reflex UI is built specifically for the Reflex ecosystem, providing a seamless integration experience with Python’s type system and Reflex’s reactive programming model.
Python-First: Write your entire application in Python, from frontend to backend, without touching JavaScript. Production Ready: All components are thoroughly tested and designed for production use. Modern Stack: Built with the latest web technologies including Tailwind CSS v4 and modern React patterns. Developer Experience: Intuitive API design with autocomplete support and clear documentation. Ready to get started? Head over to the Installation guide to add Reflex UI to your project.

Build docs developers (and LLMs) love

Get started for freeTalk to us