# UI-Theme

> Documentation for the UI-Theme runtime and local theme controls.

Use the Markdown links below for individual guides. Component guides include installation commands, usage, API details, and source.

## Documentation

- [Introduction](/llms.mdx/docs): One runtime for React, Vue, Next.js, TanStack Start, and Nuxt 4.
- [Installation](/llms.mdx/docs/installation): Install the runtime, then add controls with the CLI or shadcn.
- [CLI](/llms.mdx/docs/cli): Set up your app, install component source, and review changes from the terminal.
- [Migrate to v2](/llms.mdx/docs/migration): Keep the runtime and move styled controls into your app.
- [LLM documentation](/llms.mdx/docs/llms): Read UI-Theme documentation as plain text or Markdown.
- [React](/llms.mdx/docs/guides/react): Add theme state and controls to a client-rendered React app.
- [Next.js](/llms.mdx/docs/guides/nextjs): Set up themes in a Next.js App Router application.
- [TanStack Start](/llms.mdx/docs/guides/tanstack-start): Choose client bootstrap or cookie-based rendering in TanStack Start.
- [Vue](/llms.mdx/docs/guides/vue): Add shared theme state to a Vue 3 application.
- [Nuxt](/llms.mdx/docs/guides/nuxt): Use the UITheme module in a Nuxt 4 application.
- [Expo and React Native](/llms.mdx/docs/guides/expo): Use UITheme with native StyleSheet controls and Expo Router.
- [NativeWind](/llms.mdx/docs/guides/nativewind): Connect UITheme native state to a NativeWind app.
- [Uniwind](/llms.mdx/docs/guides/uniwind): Connect UITheme native state to Uniwind and Tailwind 4.
- [All Components](/llms.mdx/docs/components): Choose a theme control. View examples and install editable source for React or Vue.
- [Theme Toggle](/llms.mdx/docs/components/base-ui/theme-toggle): Switch between light and dark with an animated transition.
- [Icon Theme Toggle](/llms.mdx/docs/components/base-ui/icon-theme-toggle): Animate between sun and moon icons while changing the UI theme.
- [Theme Switcher](/llms.mdx/docs/components/base-ui/theme-switcher): Choose system, light, or dark with a moving selection surface.
- [Theme Selector](/llms.mdx/docs/components/base-ui/theme-selector): Choose light, dark, or the system appearance.
- [Color Theme Selector](/llms.mdx/docs/components/base-ui/color-theme-selector): Choose a color palette without changing the appearance.
- [Theme Disclosure](/llms.mdx/docs/components/base-ui/theme-disclosure): Expand appearance choices within the page layout.
- [Color Theme Disclosure](/llms.mdx/docs/components/base-ui/color-theme-disclosure): Expand color palette choices within the page layout.
- [Theme Toggle · Radix UI](/llms.mdx/docs/components/radix/theme-toggle): Switch between light and dark with an animated transition.
- [Icon Theme Toggle · Radix UI](/llms.mdx/docs/components/radix/icon-theme-toggle): Animate between sun and moon icons while changing the UI theme.
- [Theme Switcher · Radix UI](/llms.mdx/docs/components/radix/theme-switcher): Choose system, light, or dark with a moving selection surface.
- [Theme Selector · Radix UI](/llms.mdx/docs/components/radix/theme-selector): Choose light, dark, or the system appearance.
- [Color Theme Selector · Radix UI](/llms.mdx/docs/components/radix/color-theme-selector): Choose a color palette without changing the appearance.
- [Theme Disclosure · Radix UI](/llms.mdx/docs/components/radix/theme-disclosure): Expand appearance choices within the page layout.
- [Color Theme Disclosure · Radix UI](/llms.mdx/docs/components/radix/color-theme-disclosure): Expand color palette choices within the page layout.
- [Theme Toggle · Vue / Reka](/llms.mdx/docs/components/reka/theme-toggle): Switch between light and dark with an animated transition.
- [Icon Theme Toggle · Vue / Reka](/llms.mdx/docs/components/reka/icon-theme-toggle): Animate between sun and moon icons while changing the UI theme.
- [Theme Switcher · Vue / Reka](/llms.mdx/docs/components/reka/theme-switcher): Choose system, light, or dark with a moving selection surface.
- [Theme Selector · Vue / Reka](/llms.mdx/docs/components/reka/theme-selector): Choose light, dark, or the system appearance.
- [Color Theme Selector · Vue / Reka](/llms.mdx/docs/components/reka/color-theme-selector): Choose a color palette without changing the appearance.
- [Theme Disclosure · Vue / Reka](/llms.mdx/docs/components/reka/theme-disclosure): Expand appearance choices within the page layout.
- [Color Theme Disclosure · Vue / Reka](/llms.mdx/docs/components/reka/color-theme-disclosure): Expand color palette choices within the page layout.

## Full documentation

- [Complete text](/llms-full.txt): All guides and component variants in one file.