Skip to content
JustDocs

Built-in Components

JustDocs provides several built-in components to enhance your documentation.

Code Blocks

Syntax Highlighting

Automatic syntax highlighting for multiple languages:

```typescript
interface User {
  name: string;
  age: number;
}
```

Supported Languages

  • JavaScript / TypeScript
  • Python
  • Rust
  • Go
  • HTML / CSS
  • JSON / YAML
  • Bash / Shell
  • And many more…

Callouts

Note

> **Note:** This is an informational note.

Warning

> **Warning:** Be careful with this operation.

Tip

> **Tip:** Here's a helpful tip!

Danger

> **Danger:** This action cannot be undone.

Cards

Feature Card

<div class="card">
  <h3>Feature Title</h3>
  <p>Feature description goes here.</p>
</div>

Grid Layout

<div class="grid md:grid-cols-2 gap-6">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
</div>

Tabs

Basic Tabs

::tabs
:::tab JavaScript
```javascript
console.log('Hello from JS');

:::

:::tab TypeScript

console.log('Hello from TS');

::: ::


## Badges

### Status Badges

```markdown
<span class="badge">New</span>
<span class="badge badge-warning">Beta</span>
<span class="badge badge-danger">Deprecated</span>

Icons

Using Icons

<svg class="w-5 h-5">
  <!-- SVG path -->
</svg>

Icon Libraries

JustDocs uses Phosphor Icons. You can add any icon from:

Buttons

Primary Button

<button class="btn btn-primary">
  Click Me
</button>

Secondary Button

<button class="btn btn-secondary">
  Learn More
</button>

Accordions

Expandable Content

<details>
  <summary>Click to expand</summary>
  Hidden content goes here.
</details>

Progress Bars

<div class="progress">
  <div class="progress-bar" style="width: 75%">75%</div>
</div>

On This Page