Theming

bunnpmpnpmyarn
$ pnpm dlx shadcn@latest add @termcn/ink/theme-provider
Copy

Copyimport { Spinner } from "@/components/ui/spinner";
import { defaultTheme } from "@/lib/terminal-themes/default";
import { ThemeProvider } from "@/providers/theme-provider";
 
export function Example() {
  return (
    <ThemeProvider theme={defaultTheme}>
      <Spinner label="Generating registry items" />
    </ThemeProvider>
  );
}

Copyimport { createTheme } from "@/providers/theme-provider";
 
export const oceanTheme = createTheme({
  name: "ocean",
  colors: {
    primary: "#0ea5e9",
    accent: "#22d3ee",
    background: "#0f172a",
    foreground: "#e2e8f0",
  },
});

bunnpmpnpmyarn
$ pnpm dlx shadcn@latest add @termcn/ink/motion-provider
Copy

Copyimport { MotionProvider } from "@/providers/motion-provider";
 
export function Example() {
  return (
    <MotionProvider reducedMotion>
      <App />
    </MotionProvider>
  );
}

bunnpmpnpmyarn
$ pnpm dlx shadcn@latest add @termcn/ink/unicode-provider
Copy

Copyimport { UnicodeProvider } from "@/providers/unicode-provider";
 
export function Example() {
  return (
    <UnicodeProvider unicode={false}>
      <App />
    </UnicodeProvider>
  );
}