Themepicker — Frontfriend

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to Reka UI.

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download theme-picker -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { useColorMode } from "@vueuse/core";
import { watch } from "vue";
import { ThemePicker } from "@/components/ui/theme-picker";

const args = {
  "theme": "system",
} satisfies Partial<
  InstanceType<typeof ThemePicker> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & { theme?: "light" | "dark" | "system" };
const mode = useColorMode();
watch(
  () => args.theme,
  (value) => {
    mode.value = value === "system" ? "auto" : value;
  },
  { immediate: true },
);
</script>

<template>
  <ThemePicker />
</template>

No component-specific props are declared in registry metadata; inherited HTML/Radix/Reka props are supported by the component implementation.

Examples

Default

<script setup lang="ts">
import { ThemePicker } from "@/components/ui/theme-picker";

const args = {

} satisfies Partial<
  InstanceType<typeof ThemePicker> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <div class="p-6"><ThemePicker /></div>
</template>

In Toolbar

<script setup lang="ts">
import { ThemePicker } from "@/components/ui/theme-picker";

const args = {

} satisfies Partial<
  InstanceType<typeof ThemePicker> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <div
    class="flex w-[360px] items-center justify-between rounded-md border border-neutral-subtle px-4 py-2"
  >
    <span class="text-sm font-medium">Settings</span><ThemePicker />
  </div>
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.