BigBlocks

Theme Token Provider

On-chain theme picker using @theme-token/sdk with provider context and settings panel for blockchain-inscribed ThemeTokens

Theme Token

Apply an on-chain theme by entering its origin (txid_vout format).

Origin

The origin outpoint of an inscribed ThemeToken.

"use client"

import {
  ThemeTokenProvider,
  ThemeTokenSettings,
} from "@/registry/bigblocks/blocks/theme-token-provider"

/**
 * Demo showing the ThemeTokenProvider and ThemeTokenSettings panel.
 *
 * Enter an on-chain ThemeToken origin to fetch and apply the theme.
 * The provider persists the selection to localStorage.
 */
export function ThemeTokenProviderDemo() {
  return (
    <ThemeTokenProvider
      onThemeApplied={(origin) =>
        console.log("[ThemeToken] Applied:", origin)
      }
      onThemeCleared={() => console.log("[ThemeToken] Cleared")}
    >
      <div className="flex flex-col items-center gap-4 p-4">
        <ThemeTokenSettings
          onApply={(origin) =>
            console.log("[Demo] Theme applied:", origin)
          }
          onClear={() => console.log("[Demo] Theme cleared")}
        />
      </div>
    </ThemeTokenProvider>
  )
}

Installation

bunx shadcn@latest add https://registry.bigblocks.dev/r/theme-token-provider.json

Usage

Wrap your app with ThemeTokenProvider to enable on-chain theme fetching. Use ThemeTokenSettings to render the settings panel, and useThemeTokenContext to access theme state from any child component.

import {
  ThemeTokenProvider,
  ThemeTokenSettings,
} from "@/components/blocks/theme-token-provider"
 
export function App() {
  return (
    <ThemeTokenProvider
      onThemeApplied={(origin) => console.log("Applied:", origin)}
      onThemeCleared={() => console.log("Cleared")}
    >
      <ThemeTokenSettings />
      <main>{/* Your app content */}</main>
    </ThemeTokenProvider>
  )
}

Props

ThemeTokenProvider

Prop	Type	Default	Description
`defaultOrigin`	`string`	--	Default ThemeToken origin to apply on mount
`storageKey`	`string`	--	localStorage key for persisting the selected theme origin
`onThemeApplied`	`(origin: string) => void`	--	Called after a theme is applied
`onThemeCleared`	`() => void`	--	Called when the theme is cleared
`onError`	`(error: Error) => void`	--	Called on error
`children`	`ReactNode`	--	Child elements to wrap
`className`	`string`	--	Additional CSS classes on the wrapper

ThemeTokenSettings

Prop	Type	Default	Description
`onApply`	`(origin: string) => void`	--	Called after a theme is applied
`onClear`	`() => void`	--	Called when the theme is cleared
`className`	`string`	--	Additional CSS classes

useThemeTokenContext

Access the theme state from any child of ThemeTokenProvider:

const { origin, theme, status, error, setOrigin, clearOrigin } =
  useThemeTokenContext()

Sync Terminal Token List