# Ui References

## GitBook UI Components – Quick Reference

Welcome to the **GitBook Components Showcase** \
This page helps new editors understand and try out all **UI blocks** available in GitBook’s Notion-style editor.

***

###  Stepper (Process / Flow Guide)

/stepper

**1️⃣ Add a Stepper Block**\
Type `/stepper` and hit Enter. You’ll get a vertical numbered layout like this.

**2️⃣ Add Your Steps**\
Each step can include text, images, lists, and even code blocks.

**3️⃣ Add More Steps**\
Press the **+** button below the step or hit **Enter twice** to add another step.

💡 *Use Stepper for process flows, setup instructions, or multi-step guides.*

/stepper

***

###  Tabs (Switchable Views)

/tabs

**User View**\
You can use `/tabs` to create multiple views for different audiences — like **User** vs **Developer** content.

**Developer View**\
Tabs help organize long guides. Perfect for “API” vs “UI” instructions.

/tabs

💡 *Use Tabs for “Quick Verify / Bulk Verify” or “Frontend / Backend” type comparisons.*

***

### Columns (Side-by-Side Layout)

/columns

####  Left Column

Add text, bullet points, or lists here. Great for instructions.

#### Right Column

Add an image or table here using `/image` or `/table`.

💡 *Use Columns to show screenshots next to explanations!*

/columns

***

###  Hints (formerly Callouts)

/hint{"type":"info","title":"Info Hint"}\
Used for helpful notes, tips, or neutral context.

💡 Example: “You can get your API key under Settings → API.”\
/hint

/hint{"type":"success","title":"Success Hint"}\
Used to highlight success or completion messages.\
/hint

/hint{"type":"warning","title":"Warning Hint"}\
Used to show potential issues or cautionary notes.\
/hint

/hint{"type":"danger","title":"Danger Hint"}\
Used to highlight critical issues or errors.\
/hint

***

###  Table

/table

| Column 1 | Column 2        | Column 3         |
| -------- | --------------- | ---------------- |
| ✅ Valid  | ⚠️ Catch-All    | ❌ Invalid        |
| 200 OK   | 400 Bad Request | 500 Server Error |
| /table   |                 |                  |

💡 *Use `/table` for small data summaries or API status codes.*

***

###  Code Blocks

/code

```javascript
fetch("https://api.clearout.io/v2/email_verify/instant", {
  method: "POST",
  headers: { "Authorization": "Bearer YOUR_API_KEY" },
  body: JSON.stringify({ email: "test@domain.com" }),
});
```

/code

💡 *Use `/code` for API examples or command snippets.*

***

###  Image

/image\
Use `/image` to upload screenshots or product visuals.\
💡 *Recommended for showing dashboards, extensions, or plugin interfaces.*

***

###  Quotes

/quote

> “Clear, visual documentation builds trust and improves onboarding.”\
> /quote

💡 *Use for short reminders or best practices.*

***

###  Combining Components

You can even **mix components** for richer layouts:

* Use `/columns` inside a `/stepper` step to show image + description
* Put `/hint` inside `/tabs` for contextual info
* Add `/table` inside `/columns` to show side-by-side comparison

***

### 🧠 Example Layout Idea

/columns

####  Stepper on Left

Use `/stepper` for:

* Install
* Connect
* Test
* Deploy

####  Hints on Right

/hint{"type":"success","title":"Pro Tip"}\
Add hints on the right column to keep your layout interactive.\
/hint

/columns

***

###  Best Practices

* Keep one concept per section
* Don’t overuse tabs (3–4 max per block)
* Prefer `/hint` for short info — not long paragraphs
* Add screenshots often
* Use consistent emoji/icons per block type

***

###  Summary Table

/table

| Block   | Command    | Use Case                |
| ------- | ---------- | ----------------------- |
| Stepper | `/stepper` | Multi-step tutorials    |
| Tabs    | `/tabs`    | Switchable content      |
| Hint    | `/hint`    | Notes, tips, warnings   |
| Columns | `/columns` | Side-by-side layouts    |
| Table   | `/table`   | Data or comparisons     |
| Code    | `/code`    | Snippets                |
| Quote   | `/quote`   | Inspiration or guidance |
| Image   | `/image`   | Visuals or screenshots  |
| /table  |            |                         |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.clearout.io/developers/ui-references.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.