Content tabs

Organize alternatives into tabs: framework-specific examples, two ways to do the same thing, or any content that reads better one option at a time.

The container is framed by the 1.5px rule with 6px corners. Its header strip sits on the surface-muted tint above the rule, and the tabs are the same pills as in code groups: a hairline outline, ink fill for the selected tab, in the sans face rather than mono.

Basic example

This is the content for the first tab. It supports full markdown, including:

Lists
Bold and italic text
Links and more

Content for the second tab. You can include any markdown here.

Even blockquotes work inside tabs.

Framework documentation

A common use case is showing framework-specific implementations:

app.component.ts

import { Component, inject } from '@angular/core';
import { DcuplService } from './dcupl.service';

@Component({
  selector: 'app-root',
  template: `<div>{{ data() }}</div>`,
})
export class AppComponent {
  private dcupl = inject(DcuplService);
  data = this.dcupl.query('Product');
}

Angular uses signals and dependency injection for reactive data access.

App.tsx

import { useDcupl } from '@dcupl/react';

export function App() {
  const { items } = useDcupl('Product');

  return <div>{items.map(i => i.name)}</div>;
}

React uses hooks for data fetching and state management.

App.vue

<script setup>
import { useDcupl } from '@dcupl/vue';

const { items } = useDcupl('Product');
</script>

<template>
  <div v-for="item in items">{{ item.name }}</div>
</template>

Vue uses the Composition API with reactive refs.

Comparison tables

Feature	Included
Basic queries	Yes
Up to 1,000 items	Yes
Community support	Yes
API access	No

Feature	Included
Advanced queries	Yes
Unlimited items	Yes
Priority support	Yes
API access	Yes

Syntax reference

The tab syntax uses a container directive pattern:

:::tabs{key="unique-identifier"}
::tab[Tab Label]{key="tab-key"}
Tab content goes here with **markdown** support.
::
::tab[Another Tab]{key="another-key"}
More content here.
::
:::

Attributes

Attribute	Location	Required	Description
`key`	`:::tabs{}`	Optional	Unique identifier for the tab group. Auto-generated if omitted.
`key`	`::tab[]{}`	Optional	Unique key for each tab. Defaults to `tab-0`, `tab-1`, etc.
Label	`::tab[]`	Required	Display text for the tab button (inside brackets).

Notes

Content inside tabs supports full markdown including code blocks, lists, tables, and more
Each tab must end with :: on its own line; leave a blank line before it when the tab ends with a list or a blockquote, or markdown pulls the :: into it
The entire tabs block must end with :::
Tab keys should be unique within a group for proper accessibility