---
title: Component kitchen sink | Tiger Data Docs
description: Internal test page rendering every component and content element used in the docs, for visual and regression checks.
---

This page renders every component and content element used across the docs so that visual and interactivity regressions show up on one preview URL. It is hidden from search engines and from on-site search, and is not in the sidebar.

## Text and inline formatting

Body text with **bold**, *italic*, and `inline code`. A link to [the connection details page](/integrate/find-connection-details/index.md) and an external link to [Tiger Data](https://www.tigerdata.com/). Product names resolve from constants: PostgreSQL, Tiger Cloud, self-hosted TimescaleDB, TimescaleDB.

> A blockquote. Use it for quoted text or asides.

### Unordered list

- First item

- Second item with `code`

- Third item

  - Nested item
  - Another nested item

### Ordered list

1. First step
2. Second step
3. Third step

## Table

| Column      | Type               | Description       |
| ----------- | ------------------ | ----------------- |
| `time`      | `timestamptz`      | Sample timestamp  |
| `device_id` | `text`             | Device identifier |
| `value`     | `double precision` | Measured value    |

## Code blocks

```
SELECT time_bucket('1 hour', time) AS bucket, avg(value)
FROM metrics
GROUP BY bucket
ORDER BY bucket;
```

Terminal window

```
psql "postgres://user:pass@host:5432/dbname"
```

```
import { Pool } from "pg";
const pool = new Pool({ connectionString: process.env.DATABASE_URL });
```

```
const greet = (name: string): string => `Hello, ${name}`;
```

```
{ "host": "example.tsdb.cloud", "port": 5432 }
```

```
service:
  host: example.tsdb.cloud
  port: 5432
```

```
Plain text block with no syntax highlighting.
```

## Callouts

Tips

A tip callout for hints and best practices.

Note

A note callout for supplementary context.

Custom title

A note callout with an overridden title.

Important

An important callout for information that should not be skipped.

Warning

A warning callout for cautions and limitations.

Callout with button

A call-to-action callout with a button.

[Try for free](/index.md)

## Buttons

Button enabled[Download](/index.md)[Primary CTA](/index.md)Secondary defaultSecondary subtle

## Copy to clipboard

CopyCopy query

## Starlight tabs

- [Tiger Cloud](#tab-panel-624)
- [Self-hosted TimescaleDB](#tab-panel-625)

Content for the Tiger Cloud tab.

Content for the self-hosted TimescaleDB tab.

## Stainless sync tabs

- [First tab](#tab-panel-626)
- [Second tab](#tab-panel-627)

Content for the first tab.

Content for the second tab.

## Numbered list

1. **A step with a sub-sequence**

   Do the first thing, which has lettered sub-steps:

   1. Sub-step one.
   2. Sub-step two.
   3. Sub-step three.

2. **A step with a code block**

   Run the following:

   ```
   SELECT now();
   ```

   Confirm it returns the current time.

## Prerequisites

## Prerequisites for this integration guide

To follow these steps, you'll need:

- A [Tiger Cloud service](/get-started/quickstart/create-service/index.md), or a running instance of [self-hosted TimescaleDB](/get-started/choose-your-path/install-timescaledb/index.md).

* Your [connection details](/integrate/find-connection-details/index.md).

- Any additional tooling the page requires.

## Image

![Diagram of a hypertable](/_astro/hypertable-light.f-v6IDWg_Z1sntCn.webp)

## Author byline

![](https://avatars.githubusercontent.com/octocat?s=128)

Jane Doe

Developer advocate

[GitHub](https://github.com/octocat)

## Related content cards

[Find your connection details](/integrate/find-connection-details/index.md)

[Locate the host, port, database, user, and password for your service or database.](/integrate/find-connection-details/index.md)

[Connect your app](/integrate/code/connect-your-app/index.md)

[Connect to your database from your preferred programming language.](/integrate/code/connect-your-app/index.md)