Component Demo

With the Component Demo, you can include any JSX/TSX file in an MDX page, render it and also display its source code.

Example

This is how it looks:

Small size

Large size (default)

Extra large size

import { ComponentExample } from './component-example'
 
/**
 * Example Component Demo
 */
export default function Demo() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
      <ComponentExample text='Small size' size='small' />
      <ComponentExample text='Large size (default)' />
      <ComponentExample text='Extra large size' size='extralarge' />
    </div>
  )
}

Usage

MDX

import { ComponentDemo } from '@republik/docs'
 
<ComponentDemo file='demos/my-demo.tsx' />

Where demos/my-demo.tsx needs to be located in the docs directory

About Props Table