Frameworks

jc works with any React 18+ project. Framework-specific setup below.

Next.js

Recommended

The jc/next adapter creates a showcase page with zero boilerplate:

tsx

// src/app/showcase/page.tsx
import { createShowcasePage } from 'jc/next'
import meta from '@/jc/generated/meta.json'
import { registry } from '@/jc/generated/registry'
import { lucideFixtures } from './fixtures'

export default createShowcasePage({
  meta,
  registry,
  fixtures: [lucideFixtures],
})

Or set it up manually if you need more control:

tsx

// src/app/showcase/page.tsx
'use client'

import type { JcMeta } from 'jc'
import { ShowcaseApp } from 'jc'
import meta from '@/jc/generated/meta.json'
import { registry } from '@/jc/generated/registry'

export default function ShowcasePage() {
  return (
    <ShowcaseApp
      meta={meta as unknown as JcMeta}
      registry={registry}
    />
  )
}

App Router only

The createShowcasePage adapter targets the App Router. For Pages Router, use the manual setup above.

Vite

Create a standard React component and mount it in your router:

tsx

// src/showcase.tsx
import type { JcMeta } from 'jc'
import { ShowcaseApp } from 'jc'
import meta from './jc/generated/meta.json'
import { registry } from './jc/generated/registry'

export function Showcase() {
  return (
    <ShowcaseApp
      meta={meta as unknown as JcMeta}
      registry={registry}
    />
  )
}

Mount it with React Router, TanStack Router, or any routing solution.

Other frameworks

For any React 18+ project with a bundler that supports dynamic imports:

tsx

import type { JcMeta } from 'jc'
import { ShowcaseApp } from 'jc'
import meta from './jc/generated/meta.json'
import { registry } from './jc/generated/registry'

function App() {
  return (
    <ShowcaseApp
      meta={meta as unknown as JcMeta}
      registry={registry}
    />
  )
}

Client component requirement

ShowcaseApp uses React hooks, browser APIs (localStorage, history.replaceState), and dynamic imports. It must render in a client context.

Next.js

Add 'use client' at the top of any file that renders ShowcaseApp. The jc package ships with the directive injected via a post-build step, but your page file needs it too.

In Vite and other SPA frameworks, everything is client-side by default — no directive needed.