API Reference

Exports, component props, and type definitions.

Package exports

Import Path	Export	Description
jc	ShowcaseApp	Main showcase UI component
jc	defineFixtures	Fixture plugin factory function
jc	JcMeta	TypeScript type for meta.json shape
jc	FixturePlugin	TypeScript type for fixture plugins
jc/config	defineConfig	Config factory with autocomplete
jc/config	resolveConfig	Merges user config with defaults
jc/config	defaultConfig	Default configuration object
jc/next	createShowcasePage	Next.js App Router page factory

ShowcaseApp props

Prop	Type	Required	Description
meta	JcMeta	Yes	Extracted component metadata from meta.json
registry	Record<string, () => Promise<...>>	Yes	Lazy component import map from registry.ts
fixtures	FixturePlugin[]	No	Array of fixture plugins for component-type props
defaultTheme	'auto' \| 'light' \| 'dark'	No	Initial theme (default: auto)
defaultViewport	'full' \| '375' \| '768' \| '1280'	No	Initial viewport width (default: full)

Wrapper detection

Some components must render inside a parent — like AccordionItem inside Accordion. jc detects this from @example JSDoc tags on the component:

tsx

/**
 * A single item within an Accordion.
 *
 * @example
 * <Accordion type="single" collapsible>
 *   <AccordionItem value="1" title="Title">Content</AccordionItem>
 * </Accordion>
 */
export function AccordionItem({ ... }: AccordionItemProps) { ... }

When the example JSX wraps the component in a parent element, jc extracts the wrapper component name and its props. The showcase renders the wrapper automatically around the preview.

Multiple examples

A component can have multiple @example tags. Each becomes a selectable preset in the showcase UI.

Type definitions

interface JcMeta {
  components: ComponentMeta[]
}

interface ComponentMeta {
  displayName: string
  filePath: string
  description?: string
  props: PropMeta[]
  examples?: Example[]
  wrapperComponents?: WrapperComponent[]
}

interface PropMeta {
  name: string
  type: string
  required: boolean
  defaultValue?: string
  description?: string
  enumValues?: string[]
  kind?: 'text' | 'icon' | 'element' | 'node'
}

interface Example {
  name?: string
  props: Record<string, unknown>
  wrapperProps?: Record<string, unknown>
}

interface WrapperComponent {
  name: string
  props: Record<string, unknown>
}