Components

Components are reusable MDX blocks you can include in articles. Build once, use everywhere.

What are components?

MDX components are React components embedded in your content. Use them for:

• Callouts and alerts
• Code examples with tabs
• Interactive elements
• Standardized formatting

Accessing components

Go to Components in the left sidebar to see your component library.

Using components in articles

In the editor, insert a component:

<Callout type="info">
  This is an informational callout.
</Callout>

Components render when the article is viewed.

Creating components

1. Go to Components in the sidebar
2. Click Create component
3. Enter:
   • Name: How you'll reference it (e.g., Callout)
   • Code: The component implementation
4. Click Save

Component structure

A basic component:

export function Callout({ type, children }) {
  const styles = {
    info: 'bg-blue-50 border-blue-200',
    warning: 'bg-yellow-50 border-yellow-200',
    error: 'bg-red-50 border-red-200',
  };
  
  return (
    <div className={`p-4 border rounded ${styles[type]}`}>
      {children}
    </div>
  );
}

Built-in components

Boki provides default components:

Managing components

Edit a component

1. Find the component in the library
2. Click to open
3. Edit the code
4. Save

Warning: Editing a component affects all articles using it.

Delete a component

1. Open the component
2. Click Delete

Warning: Deleting a component breaks articles that use it.

Best practices

Name clearly: InfoCallout is better than Box1.

Keep them simple: Components should do one thing well.

Document props: Add comments explaining what props do.

Test before using: Preview components before adding to articles.

Related

• Editor — Writing with MDX
• Articles — Where components are used