Installation

Get up and running with Toffee Interactions in your React or Next.js project.

1Install the package

Toffee uses Emotion for CSS-in-JS. Install both:

bash

npm install @toffee.studio/ai-interaction-design @emotion/react

2Add the Provider (Next.js App Router)

Wrap your root layout with ToffeeProvider. This handles Emotion SSR style injection so there is no flash of unstyled content.

tsx

// app/layout.tsx
'use client'

import { useServerInsertedHTML } from 'next/navigation'
import { ToffeeProvider } from '@toffee.studio/ai-interaction-design'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <ToffeeProvider
          useServerInsertedHTML={useServerInsertedHTML}
        >
          {children}
        </ToffeeProvider>
      </body>
    </html>
  )
}

3Use a component

All animated components are client-only. Import from @toffee.studio/ai-interaction-design/client.

tsx

'use client'

import { ShimmerText } from '@toffee.studio/ai-interaction-design/client'

export function LoadingLabel() {
  return (
    <ShimmerText tone="brand" speed="slow">
      Generating response...
    </ShimmerText>
  )
}

Vite / Create React App

For non-Next.js setups, use ToffeeProvider without the useServerInsertedHTML prop — it works as a plain Emotion provider.

tsx

import { ToffeeProvider } from '@toffee.studio/ai-interaction-design'

function App() {
  return (
    <ToffeeProvider>
      <YourApp />
    </ToffeeProvider>
  )
}

Two entry points:
@toffee.studio/ai-interaction-design — server-safe exports (ToffeeProvider, types, tokens)
@toffee.studio/ai-interaction-design/client — client-only components and hooks