EERP Suite

Components

Clearify ships with a set of built-in MDX components you can use in any .mdx file.

Callout

Use callouts to highlight important information.

Information

This is an informational callout for general notes.

Warning

This is a warning callout for things to watch out for.

Error

This is an error callout for critical issues.

Tip

This is a tip callout for helpful suggestions.

Tabs

Use tabs to show alternative content side by side.

npm install @marlinjai/clearify

Steps

Use steps for sequential instructions.

1
Install Clearify

Add Clearify to your project as a dev dependency.

2
Create docs folder

Create a docs/ directory and add your first markdown file.

3
Start the dev server

Run npx clearify dev to see your docs at http://localhost:4747.

Cards

Use cards to link to related pages or highlight features.

Getting Started

Learn how to set up Clearify in your project.

Configuration

Customize your docs with clearify.config.ts.

MDX Support

Use React components inside your markdown files.

Dark Mode

Automatic light and dark theme switching.

CodeGroup

Use code groups to show the same concept in multiple languages.

function greet(name) {
  return `Hello, ${name}!`;
}

Mermaid Diagrams

Use fenced code blocks with the mermaid language to render diagrams.

graph TD
A[Write Markdown] --> B[Clearify Builds]
B --> C[Static Site]
B --> D[Dev Server]
C --> E[Deploy Anywhere]
D --> F[Live Reload]
sequenceDiagram
participant U as User
participant C as Clearify CLI
participant V as Vite
U->>C: clearify dev
C->>V: createServer()
V-->>U: http://localhost:4747
U->>V: Edit .md file
V-->>U: Hot reload

StatusBadge

Display a color-coded project status pill.

Active Beta Planned Deprecated

ProjectCard

A card component for displaying project information with an optional status badge, tags, and links.

Storage Brain
File storage & processing service with OCR and thumbnail generation.
cloudflarer2

ProjectGrid

A responsive grid layout for project cards. Renders 3 columns by default, collapsing to 2 and then 1 on smaller screens.

🧠
Active
Storage Brain
File storage & processing service.
cloudflare
📊
Beta
Data Table
Notion-like database component.
react