Text Title Widgets

Text title widgets help you organize and structure your dashboard by adding titles, headers, and descriptive text blocks. They don’t display data but provide context and visual organization.

Section Title

Type: text_titles
Subtype: section_title (default)Large heading to mark dashboard sections

Text Block

Type: text_titles
Subtype: text_blockDescriptive text content for context

Section Title

Section titles are large headings that span the full width of your dashboard (2 columns). They help divide your dashboard into logical sections.

Configuration

{
  type: "text_titles",
  subtype: "section_title",
  title: string,        // The heading text (required)
  description?: string, // Optional subtitle or context
  configs: null
}

Examples

Basic Section Title

{
  "type": "text_titles",
  "subtype": "section_title",
  "title": "Sales Performance",
  "description": "Key metrics and trends for Q4 2024"
}

Section Without Description

{
  "type": "text_titles",
  "subtype": "section_title",
  "title": "Customer Analytics",
  "description": ""
}

Visual Appearance

<div className="flex gap-6 justify-between col-span-2">
  <div>
    <h2 className="text-2xl mb-2">Sales Performance</h2>
    <p className="text-sm text-muted-foreground">
      Key metrics and trends for Q4 2024
    </p>
  </div>
  {/* Settings menu */}
</div>

When to Use

Dashboard Organization
Visual Hierarchy
User Guidance

Use section titles to divide your dashboard into logical areas:Example Dashboard Structure:

📊 Dashboard
├─ Section Title: "Overview"
│  ├─ KPI Card: Total Revenue
│  └─ KPI Card: Active Users
├─ Section Title: "Sales Analytics"
│  ├─ Chart: Sales by Region
│  └─ Datatable: Recent Orders
└─ Section Title: "Customer Insights"
   ├─ Chart: Customer Growth
   └─ Datatable: Top Customers

Use descriptions to guide users:

{
  "title": "Real-Time Monitoring",
  "description": "Live data updated every 30 seconds"
}

{
  "title": "Historical Trends",
  "description": "Last 12 months of performance data"
}

Text Block

Text blocks are content widgets that display longer descriptive text. Unlike section titles, they require a description field.

Configuration

{
  type: "text_titles",
  subtype: "text_block",
  title: string,        // Block heading (required)
  description: string,  // Text content (required)
  configs: null
}

For text blocks, both title and description are required. The description contains the main content you want to display.

Examples

Documentation Block

{
  "type": "text_titles",
  "subtype": "text_block",
  "title": "How to Use This Dashboard",
  "description": "This dashboard shows real-time sales data. Click on any chart to drill down. Use the date picker in the top right to change the time period. All data is updated every 5 minutes."
}

Important Notice

{
  "type": "text_titles",
  "subtype": "text_block",
  "title": "⚠️ Maintenance Notice",
  "description": "The production database will undergo scheduled maintenance on Dec 15th from 2-4 AM UTC. During this time, data may be delayed or unavailable."
}

Context Block

{
  "type": "text_titles",
  "subtype": "text_block",
  "title": "About These Metrics",
  "description": "Revenue figures are calculated as gross sales minus returns and discounts. Customer counts include both active and inactive accounts. All currency is displayed in USD."
}

When to Use

Dashboard instructions

Provide guidance on how to interact with the dashboard:

How to filter data
What actions are available
How to interpret the visualizations
Tips for best use

Important notices

Communicate critical information:

Maintenance schedules
Data quality issues
Known limitations
Temporary changes

Context and definitions

Explain metrics and terminology:

How values are calculated
What definitions are used
Data sources and freshness
Currency or unit information

Compliance disclaimers

Display required legal or compliance text:

Data privacy notices
Terms of use
Regulatory disclaimers
Attribution requirements

Type Normalization

VizBoard accepts multiple variations of text widget type names:

// All of these are normalized to type: "text_titles"
[
  "text_titles",
  "text titles",
  "text",
  "title",
  "section_title",
  "section title"
]

Default subtype: section_title Source: src/lib/extractWidgetTypeInfo.ts:92-116

Features

Full Width

Text widgets span 2 columns for maximum visibility

No Data Connection

No database connection required - pure presentation

Markdown Support

Descriptions support basic text formatting

Quick Edit

Edit title and description through settings menu

Layout Considerations

Grid Behavior

Desktop (2 Column Grid)
Mobile (1 Column)

Text widgets always span the full width:

┌─────────────────────────────────────┐
│  Section Title Widget (col-span-2)  │
├──────────────────┬──────────────────┤
│   Chart Widget   │  Chart Widget    │
├──────────────────┴──────────────────┤
│  Text Block Widget (col-span-2)     │
├──────────────────┬──────────────────┤
│  Table Widget (col-span-2)          │
└─────────────────────────────────────┘

All widgets stack vertically:

┌─────────────────┐
│ Section Title   │
├─────────────────┤
│ Chart Widget    │
├─────────────────┤
│ Chart Widget    │
├─────────────────┤
│ Text Block      │
├─────────────────┤
│ Table Widget    │
└─────────────────┘

Best Practices

Placement Tips:

Place section titles before groups of related widgets
Use text blocks sparingly to avoid overwhelming users
Consider widget order: titles should introduce, not follow
Keep descriptions concise (2-3 sentences ideal)

Styling

Text widgets use consistent styling from your dashboard theme:

/* Section Title */
.section-title {
  font-size: 1.5rem;           /* text-2xl */
  line-height: 2rem;
  margin-bottom: 0.5rem;
}

/* Description / Subtitle */
.description {
  font-size: 0.875rem;         /* text-sm */
  color: var(--muted-foreground);
}

/* Container */
.text-widget-container {
  display: flex;
  gap: 1.5rem;                 /* gap-6 */
  justify-content: space-between;
  grid-column: span 2;         /* col-span-2 */
}

Public Dashboards

On public dashboards (shared with external users), the settings menu is automatically hidden for text widgets, providing a cleaner read-only experience.

const isPublicDashboard = 
  projectData?.isPublic && pathname?.startsWith("/public/")

// Settings menu only shown on private dashboards
{!isPublicDashboard && <WidgetSettingsMenu widget={widget} />}

Configuration Dialog

The text widget configuration form is simple:

Section Title Form

┌─────────────────────────────────────────┐
│ Widget Title              [Required]     │
│ ┌─────────────────────────────────────┐ │
│ │                                     │ │
│ └─────────────────────────────────────┘ │
│                                          │
│ Widget Description        [Optional]     │
│ ┌─────────────────────────────────────┐ │
│ │                                     │ │
│ │                                     │ │
│ └─────────────────────────────────────┘ │
│                                          │
│              [Cancel]  [Create]          │
└─────────────────────────────────────────┘

Text Block Form

┌─────────────────────────────────────────┐
│ Widget Title              [Required]     │
│ ┌─────────────────────────────────────┐ │
│ │                                     │ │
│ └─────────────────────────────────────┘ │
│                                          │
│ Widget Description        [Required]     │
│ ┌─────────────────────────────────────┐ │
│ │                                     │ │
│ │                                     │ │
│ └─────────────────────────────────────┘ │
│                                          │
│              [Cancel]  [Create]          │
└─────────────────────────────────────────┘

Source: src/components/dashboard/widgets/textblocks/textBlocksConfig.tsx:25-153

Use Case Examples

[
  {
    "type": "text_titles",
    "subtype": "section_title",
    "title": "Executive Summary",
    "description": "Key performance indicators for Q4 2024"
  },
  {
    "type": "text_titles",
    "subtype": "text_block",
    "title": "Note",
    "description": "All figures are preliminary and subject to final audit. Currency in USD millions."
  }
]

Source Code Reference

Text widget implementation:

Configuration: src/components/dashboard/widgets/textblocks/textBlocksConfig.tsx:14-153
Section Title Rendering: src/components/dashboard/widgets/textblocks/sectionTitle.tsx:14-56
Text Block Rendering: src/components/dashboard/widgets/textblocks/textBlock.tsx
Type Normalization: src/lib/extractWidgetTypeInfo.ts:92-116

Validation

Section Title

✅ Title is required (max 100 characters)
✅ Description is optional
✅ No configs needed

Text Block

✅ Title is required (max 100 characters)
✅ Description is required (must not be empty)
✅ No configs needed

Dashboard Layout

Learn about grid system and widget positioning

Creating Widgets

Guide to adding widgets to your dashboard

Get Started

Core Features

Widget Types

Guides

​Widget Types

Section Title

Text Block

​Section Title

​Configuration

​Examples

​Basic Section Title

​Section Without Description

​Visual Appearance

​When to Use

​Text Block

​Configuration

​Examples

​Documentation Block

​Important Notice

​Context Block

​When to Use

​Type Normalization

​Features

Full Width

No Data Connection

Markdown Support

Quick Edit

​Layout Considerations

​Grid Behavior

​Best Practices

​Styling

​Public Dashboards

​Configuration Dialog

​Section Title Form

​Text Block Form

​Use Case Examples

​Source Code Reference

​Validation

​Section Title

​Text Block

​Related Documentation

Dashboard Layout

Creating Widgets

Build docs developers (and LLMs) love

Widget Types

Section Title

Configuration

Examples

Basic Section Title

Section Without Description

Visual Appearance

When to Use

Text Block

Configuration

Examples

Documentation Block

Important Notice

Context Block

When to Use

Type Normalization

Features

Layout Considerations

Grid Behavior

Best Practices

Styling

Public Dashboards

Configuration Dialog

Section Title Form

Text Block Form

Use Case Examples

Source Code Reference

Validation

Section Title

Text Block

Related Documentation