Tulip Logo IconTulip
App

Theming

Use Tulip's theme provider and package styles without hiding app-specific visual decisions.

Tulip apps use shared package styles plus app-level theme configuration.

The default Providers component includes ThemeProvider from next-themes, so screens can respond to light, dark, or system theme choices.

Style imports

Import package styles once from your root stylesheet:

@import "tailwindcss";
@import "@tulip-systems/ui/styles.css";
@import "@tulip-systems/app/styles.css";

Feature packages may expose additional styles, such as Drive or AI.

What your app owns

  • brand colors
  • page-specific composition
  • custom product layouts
  • which package styles are imported

Continue reading

On this page