@styleglide/kit-view-provider

A React component that allows your app to integrate with StyleGlide when rendered in the kit view.

Installation

npm install @styleglide/kit-view-provider
# or
yarn add @styleglide/kit-view-provider
# or
pnpm add @styleglide/kit-view-provider

Prerequisites

This package requires the following peer dependencies:

npm install next-themes react react-dom
# or
yarn add next-themes react react-dom
# or
pnpm add next-themes react react-dom

Usage

First, make sure to set up next-themes in your application:

// In your app layout or provider component
import { ThemeProvider } from "next-themes";

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;

Then, add the StyleGlide KitViewProvider as a child of ThemeProvider:

// In your app layout or provider component
import { ThemeProvider } from "next-themes";
import { KitViewProvider } from "@styleglide/kit-view-provider";

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider>
      <KitViewProvider />
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;

Features

• Automatically listens for theme updates from StyleGlide
• Applies CSS variables to your app
• Handles light/dark mode switching
• Provides hotkey support for StyleGlide commands

License

MIT