CLI previewInstall commands shown on this site are not released yet.

DocsComponentsUncategorized

ThemeMenu

React example follows below.
ts
import { ThemeMenu } from "@grassroot/ui-react";
<ThemeMenu align="end" storageKey="my-app-theme" />
ts
<script setup lang="ts">
import { ThemeMenu } from "@grassroot/ui-vue";
</script>
<template>
<ThemeMenu align="end" storage-key="my-app-theme" />
</template>
ts
import { Component } from "@angular/core";
import { GrassrootThemeMenu } from "@grassroot/ui-angular";
@Component({
selector: "app-example",
standalone: true,
imports: [GrassrootThemeMenu],
template: `
<grassroot-theme-menu align="end" storageKey="my-app-theme" />
`,
})
export class ExampleComponent {
}
ts
<script lang="ts">
import { ThemeMenu } from "@grassroot/ui-svelte";
</script>
<ThemeMenu align="end" storageKey="my-app-theme" />
ts
import { ThemeMenu } from "@grassroot/ui-solid";
export function Example() {
return (
<>
<ThemeMenu align="end" storageKey="my-app-theme" />
</>
);
}

Installation

bash
pnpm dlx grassroot add ui/theme-menu
bash
npx grassroot@latest add ui/theme-menu
bash
yarn dlx grassroot add ui/theme-menu
bash
bunx grassroot add ui/theme-menu

API Reference

ThemeMenuProps
PropTypeDefault
align"start" | "end" | undefined
storageKeylocalStorage key the choice persists under. Per-origin, so standalone apps can safely share the default; override to isolate within one origin.string | undefined