Theme Toggle
A round glass button that flips between light and dark mode, the new theme spreading from the button as a circle with a soft edge. It can own the theme itself, through the dark class on the page, or follow yours.
Loading preview…
Install
Steps for Next.js.
Install the package
One package carries every component and its effects, all original code.
bun add @poulo2/ai-componentsLoad the styles with Tailwind v4
Add both lines to your global stylesheet so Tailwind generates the classes the components use. If your app already defines the shadcn/ui tokens, skip the theme import to keep your own palette.
@import "@poulo2/ai-components/theme.css"; @source "../node_modules/@poulo2/ai-components/dist";Or load the prebuilt stylesheet
For apps without Tailwind. Import it once at the root; it includes Tailwind's base reset.
import "@poulo2/ai-components/styles.css";
Props
| Name | Type | Default | Description |
|---|---|---|---|
| theme | "light" | "dark" | — | The current theme, when your app owns it. Leave unset to let the button own it. |
| onThemeChange | (theme: "light" | "dark") => void | — | Called with the theme to switch to. Unset theme, the button also toggles the dark class on <html> and remembers the choice. |
| className | string | — | Classes for the root element. |