Skip to main content

​
Installation

Get started with Reflex UI by installing the package and configuring Tailwind CSS in your Reflex project.

​
Prerequisites

Before installing Reflex UI, ensure you have:
  • Python 3.11 or higher
  • Reflex 0.8.0 or higher
If you don’t have a Reflex project yet, follow the Reflex Getting Started guide first.

​
Install Reflex UI

1

Install the package

Choose your preferred package manager to install Reflex UI:
pip install reflex-ui
This will install Reflex UI and its dependencies, including Reflex itself.
2

Enable Tailwind CSS v4 Plugin

Reflex UI requires Tailwind CSS v4 for styling. Add the Tailwind plugin to your rxconfig.py:
rxconfig.py
import reflex as rx

config = rx.Config(
    app_name="your_app",
    plugins=[
        rx.plugins.TailwindV4Plugin(),
    ],
)
The TailwindV4Plugin is available in Reflex 0.8.0 and later.
3

Create your Tailwind CSS configuration

Create a globals.css file in your assets/css/ directory with the Reflex UI theme configuration:
assets/css/globals.css
@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

:root {
  /* Primary */
  --primary-1: var(--violet-1);
  --primary-2: var(--violet-2);
  --primary-3: var(--violet-3);
  --primary-4: var(--violet-4);
  --primary-5: var(--violet-5);
  --primary-6: var(--violet-6);
  --primary-7: var(--violet-7);
  --primary-8: var(--violet-8);
  --primary-9: var(--violet-9);
  --primary-10: var(--violet-10);
  --primary-11: var(--violet-11);
  --primary-12: var(--violet-12);
  /* Secondary */
  --secondary-1: var(--slate-1);
  --secondary-2: var(--slate-2);
  --secondary-3: var(--slate-3);
  --secondary-4: var(--slate-4);
  --secondary-5: var(--slate-5);
  --secondary-6: var(--slate-6);
  --secondary-7: var(--slate-7);
  --secondary-8: var(--slate-8);
  --secondary-9: var(--slate-9);
  --secondary-10: var(--slate-10);
  --secondary-11: var(--slate-11);
  --secondary-12: var(--slate-12);
  /* Destructive */
  --destructive-9: var(--red-9);
  --destructive-10: var(--red-10);
  /* Contrast */
  --primary-contrast: #ffffff;
  /* Radius */
  --radius: 0.5rem;
}

@theme {
  /* Primary */
  --color-primary-1: var(--primary-1);
  --color-primary-9: var(--primary-9);
  --color-primary-10: var(--primary-10);
  --color-primary-contrast: var(--primary-contrast);
  /* Secondary */
  --color-secondary-1: var(--secondary-1);
  --color-secondary-3: var(--secondary-3);
  --color-secondary-11: var(--secondary-11);
  --color-secondary-12: var(--secondary-12);
  --color-secondary-a4: var(--secondary-a4, #00000010);
  /* Destructive */
  --color-destructive-9: var(--destructive-9);
  --color-destructive-10: var(--destructive-10);
  /* Radius */
  --radius-ui-xs: calc(var(--radius) - 0.125rem);
  --radius-ui-sm: var(--radius);
  --radius-ui-md: calc(var(--radius) + 0.125rem);
  --radius-ui-lg: calc(var(--radius) + 0.25rem);
  --radius-ui-xl: calc(var(--radius) + 0.375rem);
}

@layer base {
  * {
    @apply border-secondary-6 outline-primary-6;
  }

  body {
    @apply bg-secondary-1 font-sans text-secondary-12 antialiased;
  }
}
This is a minimal configuration. For the complete configuration with all Radix color variables, check the demo globals.css file.
4

Link the stylesheet in your app

Add the globals.css stylesheet to your Reflex app:
import reflex as rx

app = rx.App(
    stylesheets=["css/globals.css"],
)
If you want to use custom fonts, you can also add them via head components:
app = rx.App(
    stylesheets=["css/globals.css"],
    head_components=[
        rx.el.link(
            rel="preconnect",
            href="https://fonts.googleapis.com",
        ),
        rx.el.link(
            href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap",
            rel="stylesheet",
        ),
    ],
)

​
Verify Installation

To verify that Reflex UI is installed correctly, try importing and using a component: 
import reflex as rx
import reflex_ui as ui

def index():
    return ui.button("Hello Reflex UI!")

app = rx.App(stylesheets=["css/globals.css"])
app.add_page(index)
Run your app: 
reflex run
You should see a styled button when you visit http://localhost:3000.

​
Customizing Your Theme

​
Changing the Primary Color

To change the primary color, modify the CSS variables in your globals.css: 
:root {
  /* Change from violet to blue */
  --primary-1: var(--blue-1);
  --primary-9: var(--blue-9);
  --primary-10: var(--blue-10);
  /* ... other primary color steps */
}
Available color palettes from Radix Colors include: gray, mauve, slate, sage, olive, sand, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, brown, orange, amber, yellow, lime, mint, sky.

​
Adjusting Border Radius

Change the --radius variable to adjust the border radius across all components: 
:root {
  --radius: 0.75rem; /* More rounded */
  /* or */
  --radius: 0.25rem; /* Less rounded */
}

​
Next Steps

Quickstart Guide

Build your first Reflex UI component

Browse Components

Explore all available components

​
Troubleshooting

Make sure you:
  1. Added the TailwindV4Plugin to your rxconfig.py
  2. Created the globals.css file with the theme configuration
  3. Linked the stylesheet in your app with stylesheets=["css/globals.css"]
  4. Restarted your Reflex development server
Verify that:
  1. You have Python 3.11 or higher
  2. Reflex 0.8.0 or higher is installed
  3. You’ve installed reflex-ui with pip install reflex-ui
Reflex UI supports dark mode out of the box. Use the theme_switcher component to toggle between light and dark modes. Make sure your CSS includes the @custom-variant dark rule.

Build docs developers (and LLMs) love

Get started for freeTalk to us