Components | DocuBase

DocuBase includes a set of reusable, framework-agnostic components designed for documentation and technical writing.

Callout

Callouts are used to highlight important information, warnings, tips, and notes.

Usage

import Callout from '@/components/Callout.astro';

<Callout type="note">
  This is a note callout.
</Callout>

Types

Note

Note: Use this for general information.

Tip

Tip: Use this for helpful suggestions.

Warning

Warning: Use this for potential issues.

Danger

Danger: Use this for critical warnings.

Info

Info: Use this for informational content.

Custom Title

<Callout type="tip" title="Pro Tip">
  You can customize the callout title!
</Callout>

Pro Tip

You can customize the callout title!

Tabs

Tabs allow you to organize content into switchable panels.

Usage

import Tabs from '@/components/Tabs.astro';

<Tabs labels={["Tab 1", "Tab 2", "Tab 3"]}>
  <div>Content for Tab 1</div>
  <div>Content for Tab 2</div>
  <div>Content for Tab 3</div>
</Tabs>

Example

function Button({ children }) {
  return <button>{children}</button>;
}

<template>
  <button><slot /></button>
</template>

<button>
  <slot />
</button>

Code Tabs

Use Tabs to show code snippets in multiple languages or package managers.

Usage

import Tabs from '@/components/Tabs.astro';

<Tabs labels={["npm", "pnpm", "yarn"]}>
  <div>```bash
npm install package-name
```</div>
  <div>```bash
pnpm add package-name
```</div>
  <div>```bash
yarn add package-name
```</div>
</Tabs>

Example

npm install astro

pnpm add astro

yarn add astro

Table

Tables display structured data in a clean, styled format with optional striped rows.

Usage

import Table from '@/components/Table.astro';

<Table
  headers={["Name", "Type", "Description"]}
  rows={[
    ["title", "string", "The page title"],
    ["description", "string", "A brief summary"],
    ["order", "number", "Sort order"]
  ]}
/>

Example

Feature	Status	Notes
MDX Support	Stable	Full component support
Dark Mode	Stable	Auto-detects system preference
Search	Beta	Coming soon

Props

Prop	Type	Default	Description
headers	string[]	required	Column header labels
rows	string[][]	required	Array of row data
striped	boolean	true	Alternate row backgrounds

Collapsible

Collapsible sections help hide content that isn’t immediately necessary.

Usage

import Collapsible from '@/components/Collapsible.astro';

<Collapsible title="Click to expand">
  This content is hidden by default.
</Collapsible>

Example

This section starts expanded because defaultOpen is set to true.

Steps

Steps are perfect for tutorials and guides that have sequential instructions.

Usage

import Steps from '@/components/Steps.astro';
import Step from '@/components/Step.astro';

<Steps>
  <Step title="First Step">
    Instructions for the first step.
  </Step>
  <Step title="Second Step">
    Instructions for the second step.
  </Step>
</Steps>

Example

Install the package

Run the installation command in your terminal.

Configure your project

Update your configuration file with the required settings.

Start building

You’re all set! Start creating amazing documentation.

Example

The Example component provides a container for showcasing interactive examples.

Usage

import Example from '@/components/Example.astro';

<Example title="Button Example" description="A simple button component">
  <button>Click me</button>
</Example>

Example

Interactive Counter

A demonstration of the Example component

Button with Tailwind styling

Creating Custom Components

You can create your own components by adding .astro files to src/components/:

---
// src/components/MyComponent.astro
interface Props {
  title: string;
}

const { title } = Astro.props;
---

<div class="my-component">
  <h3>{title}</h3>
  <slot />
</div>

Then import and use in your MDX:

import MyComponent from '../../components/MyComponent.astro';

<MyComponent title="Hello">
  Content goes here
</MyComponent>