Skip to content

Theming

Make it yours

Pick your brand's colors, corner radius and font. Every shade and the dark theme are worked out from each color, the whole site changes as you go, and the theme is remembered in this browser. Copy the CSS to ship it in globals.css.
Presets
Colors

Buttons, links, selection

Readable in light and dark (6.3:1)

Tags, categories, charts

Readable in light and dark (5.5:1)

One highlight per page

Readable in light and dark (6.0:1)

Backgrounds, borders and text take a hint of the primary color.
Shape
8px
0px20px

Buttons and inputs use this. Cards get 1.5×, panels 2×, tags half.

Font

Sen is Arise UI's typeface, self-hosted with the app.

Preview

Skyline Residency, 4B

2 BHK · Indiranagar, Bengaluru

Rent dueFurnishedNew
Lease7 of 11 months
Collected this month₹4,12,000+12%

Typeface

Sen

Aa

Regular · Semibold · Bold · ₹1,23,456

JDOnline

Jane Doe

Since March 2025

Charge the saved card on the 1st.

Use it in your app

Two ways. To fix the theme for everyone, paste the copied CSS after the tokens in globals.css. To let each person choose, add the script and provider below and render the customizer.

Setup
// app/layout.tsx: apply the saved theme before first paintimport { customThemeScript, themeScript } from "@/lib/theme"; <script dangerouslySetInnerHTML={{ __html: themeScript + customThemeScript }} /> // app/providers.tsx: registers uploaded fonts, follows other tabs<ThemeProvider>  <CustomThemeProvider>{children}</CustomThemeProvider></ThemeProvider> // Anywhere, e.g. a settings page<ThemeCustomizer /> // Or set a theme from codeconst { set } = useCustomTheme();set({ ...DEFAULT_THEME, primary: "#0b63ce", radius: 12 });