### Collection Configuration Example

Source: https://github.com/statamic/cms/blob/6.x/tests/__fixtures__/fieldtype_tests/bard/expected.txt

YAML configuration for a collection, demonstrating how to inject a view model.

```yaml
# content/collections/articles.yaml
title: Articles
inject:
  view_model: App\ViewModels\ArticleStats
```

--------------------------------

### Stack Introduction

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Stack.mdx

Basic usage example of the Stack component.

```javascript
<Canvas of={StackStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Customizing PublishContainer Layout with Vue

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/PublishContainer.mdx

Example showing the script setup and template structure for a custom PublishContainer layout.

```js
<script setup>
import { ref } from 'vue';
import { PublishContainer, PublishComponents, PublishTabs, Button } from '@statamic/cms/ui';

const props = defineProps({
    permalink: String,
    blueprint: Object,
    initialMeta: Object,
    initialValues: Object,
});

const meta = ref(props.initialMeta);
const values = ref(props.initialValues);
</script>
```

```html
<template>
    <PublishContainer :meta :blueprint v-model="values">
        <PublishComponents />

        <PublishTabs>
            <template #actions>
                <Button
                    :href="permalink"
                    :text="__('Visit URL')"
                    icon="external-link"
                    target="_blank"
                />
            </template>
        </PublishTabs>
    </PublishContainer>
</template>
```

--------------------------------

### Confirmation Modal Usage Example

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/ConfirmationModal.mdx

Displays the basic implementation of the Confirmation Modal component.

```javascript
<Canvas of={ConfirmationModalStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Configure Week Start Day

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Calendar.mdx

Use the week-starts-on prop to set the starting day of the week, where 0 is Sunday and 1 is Monday.

```javascript
<Canvas of={CalendarStories._WeekStartsOn} sourceState={'shown'} />
```

--------------------------------

### Registering Statamic Services in PHP

Source: https://github.com/statamic/cms/blob/6.x/tests/__fixtures__/fieldtype_tests/replicator/expected.txt

Standard Laravel ServiceProvider setup for registering Statamic assets or services.

```php
<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Statamic\Statamic;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        // Statamic::script('app', 'cp');
        // Statamic::style('app', 'cp');
    }
}
```

--------------------------------

### Text Prepend and Append

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Input.mdx

Adding static text content to the start or end of the input using prepend and append props.

```jsx
<Canvas of={InputStories._TextPrependAppend} sourceState={'shown'} />
```

--------------------------------

### Advanced Footer Composition

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Stack.mdx

Use start, end, and default slots within a custom footer for specific element positioning.

```javascript
<Canvas of={StackStories.FooterComposed} sourceState={'shown'} />
```

--------------------------------

### Select Component Sizes

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Select.mdx

Demonstrates the available size options: xs, sm, base, lg, and xl.

```jsx
<Canvas of={SelectStories._Sizes} sourceState={'shown'} />
```

--------------------------------

### Basic Listing Implementation

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Listing.mdx

Displays the default Listing component configuration.

```javascript
<Canvas of={ListingStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Configure Listing Routes and Component

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Listing.mdx

Define the route for the JSON endpoint and pass the URL to the Listing component.

```php
Route::get('team-members/json', [TeamMemberController::class, 'json']);
```

```vue
<Listing
    :url="cp_url('team-members/json')"
    ...
/>
```

--------------------------------

### Select Component Introduction

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Select.mdx

Basic implementation of the Select component.

```jsx
<Canvas of={SelectStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Timezones Range

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Timezones.mdx

Renders a date range by passing a start and end object, utilizing locale-aware formatting to collapse repeated date parts.

```javascript
<Canvas of={TimezonesStories._Range} sourceState={'shown'} />
```

--------------------------------

### CreateForm With Instructions

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/CreateForm.mdx

Includes custom instructions to provide guidance to users during form completion.

```javascript
<Canvas of={CreateFormStories._WithInstructions} sourceState={'shown'} />
```

--------------------------------

### Header Component Introduction

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Header.mdx

Displays the default Header component implementation.

```javascript
<Canvas of={HeaderStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Backend Development Commands

Source: https://github.com/statamic/cms/blob/6.x/CLAUDE.md

Common CLI commands for running tests and linting the codebase.

```bash
# Run PHPUnit tests
./vendor/bin/phpunit
# OR use the batch file on Windows
phpunit.bat

# Code style/linting (Laravel Pint)
./vendor/bin/pint

# Run specific test
./vendor/bin/phpunit tests/path/to/TestFile.php
```

--------------------------------

### Display Heading Introduction

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Heading.mdx

Displays the default Heading component usage.

```jsx
<Canvas of={HeadingStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Popover Introduction

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Popover.mdx

Basic implementation of the Popover component.

```javascript
<Canvas of={PopoverStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Badge Append and Prepend

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Badge.mdx

Shows how to add supporting text before or after the main content.

```jsx
<Canvas of={BadgeStories._AppendPrependDocs} sourceState={'shown'} />
```

--------------------------------

### TimePicker Introduction

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/TimePicker.mdx

Basic implementation of the TimePicker component.

```javascript
<Canvas of={TimePickerStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Managing Script Stacks with Push and Prepend

Source: https://github.com/statamic/cms/blob/6.x/tests/__fixtures__/views/partials/_stacks.antlers.html

Use these tags to add content to named stacks. Push appends content, while prepend adds it to the beginning of the stack.

```antlers
{{ push:scripts trim="true" }} Push 1 {{ /push:scripts trim="true" }} {{ prepend:scripts trim="true" }} Prepend 1 {{ /prepend:scripts }} {{ push:scripts trim="true" }} Push 2 {{ /push:scripts }} {{ prepend:scripts trim="true" }} Prepend 2 {{ /prepend:scripts }}
```

--------------------------------

### MiddleEllipsis Introduction

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/MiddleEllipsis.mdx

Basic implementation of the MiddleEllipsis component.

```javascript
<Canvas of={MiddleEllipsisStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Project Directory Structure

Source: https://github.com/statamic/cms/blob/6.x/CLAUDE.md

Visual representation of the core package file organization.

```text
├── src/                  # Core PHP source code (PSR-4: Statamic\)
│   ├── CP/               # Control Panel specific functionality  
│   └── ...               # Many other core modules
├── resources/
│   ├── js/               # Vue.js Control Panel frontend
│   │   ├── bootstrap/
│   │   │   ├── cms/      # Bootstraps the code necessary for the npm package
│   │   │   └── ...
│   ├── package/      # The @statamic/cms local npm package to be used by addons
│   │   ├── tests/        # JS test suite (Vitest)
│   │   └── ...
│   ├── css/              # Stylesheets
│   ├── views/            # Blade templates
│   └── lang/             # Translations
├── tests/                # PHPUnit test suite
├── config/               # Configuration files
└── routes/               # Route definitions
```

--------------------------------

### Toggle Component Introduction

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Toggle.mdx

Basic implementation of the Toggle component.

```javascript
<Canvas of={ToggleStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Third-party Documentation Link

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/DocsCallout.mdx

Demonstrates linking to an external site by providing an absolute URL.

```javascript
<Canvas of={DocsCalloutStories._ThirdParty} sourceState={'shown'} />
```

--------------------------------

### Setting default panel size

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Splitter.mdx

Configuring the initial size of a panel using the default-size property.

```javascript
<Canvas of={SplitterStories._DefaultSize} sourceState={'shown'} />
```

--------------------------------

### Basic Panel Usage

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Panel.mdx

Standard implementation of a content container.

```javascript
<Canvas of={PanelStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Configure Heading Sizes

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Heading.mdx

Demonstrates the three available sizes for the Heading component.

```jsx
<Canvas of={HeadingStories._Sizes} sourceState={'shown'} />
```

--------------------------------

### Custom Range Configuration

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Slider.mdx

Demonstrates how to configure minimum, maximum, and step values for the slider.

```javascript
<Canvas of={SliderStories._CustomRange} sourceState={'shown'} />
```

--------------------------------

### Customizing Listing Layout

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Listing.mdx

Illustrates how to provide custom markup in the default slot to control the Listing structure.

```javascript
<Canvas of={ListingStories._CustomLayout} sourceState={'shown'} />
```

--------------------------------

### Badge Icons

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Badge.mdx

Demonstrates adding icons using icon or icon-append props.

```jsx
<Canvas of={BadgeStories._IconDocs} sourceState={'shown'} />
```

--------------------------------

### Register Action Routes and Component Prop

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Listing.mdx

Define routes for action execution and pass the action URL to the Listing component.

```php
Route::post('team-members/actions', [TeamMemberActionController::class, 'run']);
Route::post('team-members/actions/list', [TeamMemberActionController::class, 'bulkActions']);
```

```vue
<Listing
    :url="cp_url('team-members/json')"
    :action-url="cp_url('team-members/actions')"
    ...
/>
```

--------------------------------

### Implement Action Controller

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Listing.mdx

Extend ActionController to handle bulk actions by looking up items via IDs.

```php
<?php

namespace App\Http\Controllers;

use App\Models\TeamMember;
use Statamic\Http\Controllers\CP\ActionController as Controller;

class TeamMemberActionController extends Controller
{
    protected static $key = 'team-members';

    protected function getSelectedItems($items, $context)
    {
        return $items->map(function ($item) {
            return TeamMember::find($item);
        });
    }
}
```

--------------------------------

### Use UI components with kebab-case syntax

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/Overview.mdx

Standard usage of UI components using the ui- prefix, compatible with both Blade and Vue templates.

```html
<ui-card>
    <ui-heading text="A lovely card" />
    <ui-button @click="doSomething" text="Click me" />
</ui-card>
```

--------------------------------

### Modal With Footer

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Modal.mdx

Shows how to define a custom footer using the #footer slot.

```javascript
<Canvas of={ModalStories._WithFooter} sourceState={'shown'} />
```

--------------------------------

### Context Component Icons

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Context.mdx

Demonstrates the inclusion of icons within the context menu items.

```javascript
<Canvas of={ContextStories._Icons} sourceState={'shown'} />
```

--------------------------------

### Implement Architectural Background

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/EmptyState.mdx

Use the useArchitecturalBackground composable to provide the appropriate background styling for empty state sections.

```js
import { useArchitecturalBackground } from '@statamic/cms/inertia';

useArchitecturalBackground();
```

--------------------------------

### Badge Sizes

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Badge.mdx

Demonstrates the available size variations using the size prop.

```jsx
<Canvas of={BadgeStories.Sizes} sourceState={'shown'} />
```

--------------------------------

### Field Component Introduction

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Field.mdx

Basic implementation of the Field wrapper component.

```jsx
<Canvas of={FieldStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Basic Modal Usage

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Modal.mdx

Displays a standard modal implementation.

```javascript
<Canvas of={ModalStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Compress vendor directory

Source: https://github.com/statamic/cms/blob/6.x/tests/Composer/__fixtures__/readme.md

Use this command to create a compressed archive of the vendor directory for distribution or testing.

```bash
tar -czvf vendor.tar.gz vendor
```

--------------------------------

### MiddleEllipsis Responsive Behavior

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/MiddleEllipsis.mdx

Demonstrates how the component handles different container widths.

```javascript
<Canvas of={MiddleEllipsisStories._DifferentWidths} sourceState={'shown'} />
```

--------------------------------

### Skeleton Sizing

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Skeleton.mdx

Demonstrates how to control dimensions using Tailwind CSS utility classes.

```jsx
<Canvas of={SkeletonStories.Sizes} sourceState={'shown'} />
```

--------------------------------

### Inline Configuration Layout

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Field.mdx

Styles fields for configuration settings using a two-column layout.

```jsx
<Canvas of={FieldStories._Inline} sourceState={'shown'} />
```

--------------------------------

### CodeEditor Basic Usage

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/CodeEditor.mdx

Initializes the CodeEditor component with default settings.

```javascript
<Canvas of={CodeEditorStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Displaying the Table component

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Table.mdx

Renders a basic responsive table using the TableStories._DocsIntro story.

```jsx
<Canvas of={TableStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Adding a Stack Header

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Stack.mdx

Configure the fixed header using title and icon props.

```javascript
<Canvas of={StackStories.AutomaticHeader} sourceState={'shown'} />
```

--------------------------------

### Create Link Heading

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Heading.mdx

Converts the heading into a link by providing an href prop.

```jsx
<Canvas of={HeadingStories._AsLink} sourceState={'shown'} />
```

--------------------------------

### Context Component Links

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Context.mdx

Render menu items as links by providing an href prop.

```javascript
<Canvas of={ContextStories._WithLinks} sourceState={'shown'} />
```

--------------------------------

### Opening a Stack via Prop

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Stack.mdx

Control the stack visibility using the v-modelable open prop.

```javascript
<Canvas of={StackStories.ViaProp} sourceState={'shown'} />
```

--------------------------------

### Implementing collapsible panels

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Splitter.mdx

Enabling collapsible behavior with the collapsible prop and defining minimum size constraints.

```javascript
<Canvas of={SplitterStories._Collapsible} sourceState={'shown'} />
```

--------------------------------

### Implement JSON Endpoint Controller

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Listing.mdx

Handle query parameters like search, sort, and pagination to return paginated data.

```php
use Illuminate	ung\Http\Request;

public function json(Request $request)
{
    $query = TeamMember::query();

    if ($search = $request->input('search')) {
        $query->where('name', 'like', "%{$search}%");
    }

    $query->orderBy(
        $request->input('sort', 'name'), // column
        $request->input('order', 'asc') // direction
    );

    return TeamMemberResource::collection($query->paginate($request->input('perPage')));
}
```

--------------------------------

### Basic Skeleton Usage

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Skeleton.mdx

Displays the default skeleton loader implementation.

```jsx
<Canvas of={SkeletonStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Select Component Variants

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Select.mdx

Demonstrates the available visual variants: default, filled, ghost, and subtle.

```jsx
<Canvas of={SelectStories._Variants} sourceState={'shown'} />
```

--------------------------------

### Toggle With Icons

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Toggle.mdx

Shows how to integrate icons into toggle items for improved visual recognition.

```javascript
<Canvas of={ToggleStories.WithIcons} sourceState={'shown'} />
```

--------------------------------

### Generate a new language file

Source: https://github.com/statamic/cms/wiki/Translating-the-Control-Panel

Creates a translation file for a specific new language.

```bash
php translator generate fr
```

--------------------------------

### Displaying the Splitter component

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Splitter.mdx

Basic implementation of the Splitter component using Storybook.

```javascript
<Canvas of={SplitterStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Displaying the Alert component

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Alert.mdx

Basic implementation of the Alert component.

```javascript
<Canvas of={AlertStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Field with Instructions Below

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Field.mdx

Positions instructions below the input control.

```jsx
<Canvas of={FieldStories._InstructionsBelow} sourceState={'shown'} />
```

--------------------------------

### Header with Actions

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Header.mdx

Demonstrates adding action buttons to the right side of the header using the default slot.

```javascript
<Canvas of={HeaderStories._WithActions} sourceState={'shown'} />
```

--------------------------------

### Toggle Sizes

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Toggle.mdx

Demonstrates the use of the size prop to adjust the dimensions of toggle items.

```javascript
<Canvas of={ToggleStories.Sizes} sourceState={'shown'} />
```

--------------------------------

### Render Dictionary Field Options

Source: https://github.com/statamic/cms/blob/6.x/resources/views/extend/forms/antlers/fields/dictionary.antlers.html

Displays a placeholder or the selected options based on the field configuration.

```antlers
{{ unless multiple }} {{ if placeholder }} {{ placeholder }} {{ else }} {{ trans key="Please select..." }} {{ /if }} {{ /unless }} {{ foreach:options as="option|label" }} {{ label !== null ? label : option }} {{ /foreach:options }}
```

--------------------------------

### Dropdown with Headers and Footers

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Dropdown.mdx

Utilize DropdownHeader and DropdownFooter components to structure the menu content.

```javascript
<Canvas of={DropdownStories._HeadersFooters} sourceState={'shown'} />
```

--------------------------------

### Generate translation files

Source: https://github.com/statamic/cms/wiki/Translating-the-Control-Panel

Generates translation files for existing languages in the project.

```bash
php translator generate
```

--------------------------------

### DateRangePicker Introduction

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/DateRangePicker.mdx

Basic usage of the DateRangePicker component.

```javascript
<Canvas of={DateRangePickerStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Separator with Text

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Separator.mdx

Shows how to include text within the separator using the text prop.

```javascript
<Canvas of={SeparatorStories._Text} sourceState={'shown'} />
```

--------------------------------

### Badge as a Link

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Badge.mdx

Demonstrates using the href prop to turn a badge into a link.

```jsx
<Canvas of={BadgeStories.Link} sourceState={'shown'} />
```

--------------------------------

### Visualize CharacterCounter States

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/CharacterCounter.mdx

Demonstrates the color-coded feedback states based on character usage thresholds.

```javascript
<Canvas of={CharacterCounterStories._States} sourceState={'shown'} />
```

--------------------------------

### Using slot content

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Alert.mdx

Provide custom HTML content via the default slot instead of props.

```javascript
<Canvas of={AlertStories.SlotContent} sourceState={'shown'} />
```

--------------------------------

### Labels and Descriptions

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Input.mdx

Custom assembly of input fields including labels and descriptive text.

```jsx
<Canvas of={InputStories._LabelsDescriptions} sourceState={'shown'} />
```

--------------------------------

### Badge Colors

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Badge.mdx

Demonstrates color customization using the color prop.

```jsx
<Canvas of={BadgeStories.Colors} sourceState={'shown'} />
```

--------------------------------

### Auto-translate using Google Translate

Source: https://github.com/statamic/cms/wiki/Translating-the-Control-Panel

Populates translation files using the Google Translate API; requires a valid API key.

```bash
php translator translate fr --key=123
```

--------------------------------

### CreateForm Default Usage

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/CreateForm.mdx

Displays the standard CreateForm component with title and handle fields.

```javascript
<Canvas of={CreateFormStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Iterate and display checkbox options

Source: https://github.com/statamic/cms/blob/6.x/resources/views/extend/forms/antlers/fields/checkboxes.antlers.html

Loops through the options array to output the label if it exists, otherwise falling back to the option value.

```antlers
{{ foreach:options as="option|label" }} {{ label !== null ? label : option }} {{ unless inline }}  
{{ /unless }} {{ /foreach:options }}
```

--------------------------------

### Context Component Headers and Footers

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Context.mdx

Utilize ContextHeader and ContextFooter components to add structural elements to the menu.

```javascript
<Canvas of={ContextStories._WithHeaderFooter} sourceState={'shown'} />
```

--------------------------------

### Basic Input Usage

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Input.mdx

The standard implementation of the text input component.

```jsx
<Canvas of={InputStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Dropdown Basic Usage

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Dropdown.mdx

The basic implementation requires a trigger slot to define the button that opens the menu.

```javascript
<Canvas of={DropdownStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Header with Title Slot

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Header.mdx

Demonstrates using the title slot for custom title content and formatting.

```javascript
<Canvas of={HeaderStories._WithTitleSlot} sourceState={'shown'} />
```

--------------------------------

### Skeleton Card Layout

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Skeleton.mdx

Shows how to combine multiple skeleton components to mimic a card-based layout.

```jsx
<Canvas of={SkeletonStories.CardExample} sourceState={'shown'} />
```

--------------------------------

### Badge Component Usage

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Badge.mdx

Basic implementation of the Badge component.

```jsx
<Canvas of={BadgeStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Import and namespace UI components in Vue

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/Overview.mdx

Importing components from @statamic/cms/ui enables IDE features like autocompletion and component linking.

```js
<script setup>
import { Card, Heading, Button } from '@statamic/cms/ui';
</script>

<template>
    <Card>
        <Heading text="A lovely card" />
        <Button @click="doSomething" text="Click me" />
    </Card>
</template>
```

--------------------------------

### Listing with Row Actions

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Listing.mdx

Shows how to inject custom dropdown items into the row actions menu using the prepended-row-actions slot.

```javascript
<Canvas of={ListingStories._WithActions} sourceState={'shown'} />
```

--------------------------------

### Checkbox Sizes

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Checkbox.mdx

Demonstrates different size variants for the checkbox component.

```javascript
<Canvas of={CheckboxStories.Sizes} sourceState={'shown'} />
```

--------------------------------

### Basic Switch Usage

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Switch.mdx

Standard implementation of the Switch component for binary toggles.

```javascript
<Canvas of={SwitchStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Radio with Descriptions

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Radio.mdx

Shows how to include descriptive text below radio labels.

```jsx
<Canvas of={RadioStories._Descriptions} sourceState={'shown'} />
```

--------------------------------

### Basic Calendar Usage

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Calendar.mdx

Displays the default calendar component.

```javascript
<Canvas of={CalendarStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Pagination Component Usage

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Pagination.mdx

Basic implementation of the pagination component.

```javascript
<Canvas of={PaginationStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Input Icons

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Input.mdx

Adding icons to inputs using the icon, icon-append, and icon-prepend props.

```jsx
<Canvas of={InputStories._Icons} sourceState={'shown'} />
```

--------------------------------

### Configuring Syntax Highlighting Modes

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/CodeEditor.mdx

Enables specific language syntax highlighting by setting the mode property.

```javascript
<Canvas of={CodeEditorStories._Modes} sourceState={'shown'} />
```

--------------------------------

### Textarea Component Usage

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Textarea.mdx

Basic implementation of the Textarea component.

```javascript
<Canvas of={TextareaStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Review and update translations

Source: https://github.com/statamic/cms/wiki/Translating-the-Control-Panel

Iterates through translation keys to review and manually update existing phrases.

```bash
php translator review fr messages
```

--------------------------------

### Timezones Overview

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Timezones.mdx

Displays a given instant rendered across the user's local timezone, the configured app timezone, and UTC.

```javascript
<Canvas of={TimezonesStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Display basic Card

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Card.mdx

Renders a standard card container for general content.

```jsx
<Canvas of={CardStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Basic Description Usage

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Description.mdx

Displays a standard description text below a form label.

```javascript
<Canvas of={DescriptionStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Implement Card Panels

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Card.mdx

Uses the card panel pattern to provide visual context and structure to interfaces.

```jsx
<Canvas of={CardStories._CardPanel} sourceState={'shown'} />
```

--------------------------------

### Stack Footer Slots

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Stack.mdx

Use footer-start and footer-end slots to position actions in the fixed footer.

```javascript
<Canvas of={StackStories.FooterBothSlots} sourceState={'shown'} />
```

--------------------------------

### Button Component Usage

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Button.mdx

Standard implementation of the Button component.

```jsx
<Canvas of={ButtonStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Input Slots

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Input.mdx

Using prepend and append slots for advanced content customization like adding buttons.

```jsx
<Canvas of={InputStories._Slots} sourceState={'shown'} />
```

--------------------------------

### Customizing Listing Cells

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Listing.mdx

Demonstrates how to override cell rendering using the #cell-{fieldName} slot pattern.

```javascript
<Canvas of={ListingStories._CustomCells} sourceState={'shown'} />
```

--------------------------------

### DocsCallout Component Usage

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/DocsCallout.mdx

Displays the default implementation of the DocsCallout component.

```javascript
<Canvas of={DocsCalloutStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Configure Submission Modes

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Editable.mdx

Define save triggers using the submit-mode prop, supporting blur, enter, or both.

```javascript
<Canvas of={EditableStories._SubmitModes} sourceState={'shown'} />
```

--------------------------------

### Set Custom Placeholder

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Editable.mdx

Display a custom placeholder text when the component value is empty.

```javascript
<Canvas of={EditableStories._CustomPlaceholder} sourceState={'shown'} />
```

--------------------------------

### Input Sizes

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Input.mdx

Controlling input height and scale using the size prop to align with button sizes.

```jsx
<Canvas of={InputStories._Sizes} sourceState={'shown'} />
```

--------------------------------

### Compose custom Card Panels

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Card.mdx

Combines smaller components, HTML, and Tailwind classes to create custom card panel layouts.

```jsx
<Canvas of={CardStories._Composed} sourceState={'shown'} />
```

--------------------------------

### MiddleEllipsis Live Resizing

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/MiddleEllipsis.mdx

Shows the component's ability to update truncation in real-time during container resizing.

```javascript
<Canvas of={MiddleEllipsisStories._Resizable} sourceState={'shown'} />
```

--------------------------------

### Dropdown with Icons

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Dropdown.mdx

Displays menu items with associated icons for better visual context.

```javascript
<Canvas of={DropdownStories._Icons} sourceState={'shown'} />
```

--------------------------------

### Input Types

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Input.mdx

Support for standard HTML input types such as text, email, and password.

```jsx
<Canvas of={InputStories._Types} sourceState={'shown'} />
```

--------------------------------

### Implement Filtering

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Listing.mdx

Use Scope::filters in the controller and pass the filters object to the Listing component.

```php
return Interia::render('team-members/Index', [
    'filters' => Scope::filters('team-members', [
        'company' => 'Statamic',
    ]),
    // ...
]);
```

```js
<script setup>
defineProps({
    filters: Object,
    // ...
});
</script>
```

```html
<template>
    <Listing
        :url="cp_url('team-members/json')"
        :filters="filters"
        ...
    />
</template>
```

--------------------------------

### Basic Separator Usage

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Separator.mdx

Displays the default separator style.

```javascript
<Canvas of={SeparatorStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Basic Editable Component Usage

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Editable.mdx

Standard implementation of the inline editable text component.

```javascript
<Canvas of={EditableStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Creating nested splitters

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Splitter.mdx

Nesting multiple Splitter components to achieve complex layout structures.

```javascript
<Canvas of={SplitterStories._Nested} sourceState={'shown'} />
```

--------------------------------

### Placeholder Textarea

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Textarea.mdx

Adds a placeholder text to the input.

```javascript
<Canvas of={TextareaStories._Placeholder} sourceState={'shown'} />
```

--------------------------------

### Composing a Custom Footer

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Stack.mdx

Use the StackFooter component for full control over the footer layout.

```javascript
<Canvas of={StackStories.Footer} sourceState={'shown'} />
```

--------------------------------

### Basic DatePicker Usage

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/DatePicker.mdx

Displays the default DatePicker component with a calendar popover.

```javascript
<Canvas of={DatePickerStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Copyable Input

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Input.mdx

Adding a copy-to-clipboard button using the copyable prop.

```jsx
<Canvas of={InputStories._Copyable} sourceState={'shown'} />
```

--------------------------------

### Custom Modal Title

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Modal.mdx

Demonstrates using the ModalTitle component for custom styling and content control.

```javascript
<Canvas of={ModalStories._CustomTitle} sourceState={'shown'} />
```

--------------------------------

### Separator Variants

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Separator.mdx

Demonstrates the available visual styles for the separator.

```javascript
<Canvas of={SeparatorStories._Variants} sourceState={'shown'} />
```

--------------------------------

### Select Component with Icon

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Select.mdx

Displays the select component with an integrated icon.

```jsx
<Canvas of={SelectStories._Icon} sourceState={'shown'} />
```

--------------------------------

### Display Avatar Component

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Avatar.mdx

Renders the Avatar component using the _DocsIntro story configuration.

```jsx
<Canvas of={AvatarStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### DragHandle Component Usage

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/DragHandle.mdx

Displays the default implementation of the DragHandle component.

```javascript
<Canvas of={DragHandleStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### DatePicker with Time Selection

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/DatePicker.mdx

Enables time selection by setting the granularity prop to minute or hour.

```javascript
<Canvas of={DatePickerStories._WithTime} sourceState={'shown'} />
```

--------------------------------

### Button Sizes

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Button.mdx

Adjust the button size using the size prop.

```jsx
<Canvas of={ButtonStories.Sizes} sourceState={'shown'} />
```

--------------------------------

### Opening a Stack via Trigger

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Stack.mdx

Use the trigger slot to define an element that opens the stack upon interaction.

```javascript
<Canvas of={StackStories.ViaTrigger} sourceState={'shown'} />
```

--------------------------------

### Stack Sizing

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Stack.mdx

Adjust stack dimensions using the narrow or full size options.

```javascript
<Canvas of={StackStories.Sizes} sourceState={'shown'} />
```

--------------------------------

### Label with Badge

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Label.mdx

Adds a badge to the label for displaying statuses or feature indicators.

```javascript
<Canvas of={LabelStories._WithBadge} sourceState={'shown'} />
```

--------------------------------

### Modal Close Button

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Modal.mdx

Shows how to implement a close button using the ModalClose component.

```javascript
<Canvas of={ModalStories._CloseButton} sourceState={'shown'} />
```

--------------------------------

### Basic Radio Usage

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Radio.mdx

Displays the default implementation of the Radio component.

```jsx
<Canvas of={RadioStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Enable Auto-Focus Edit Mode

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Editable.mdx

Automatically focus the input field upon component mounting by setting the start-with-edit-mode prop.

```javascript
<Canvas of={EditableStories._StartWithEditMode} sourceState={'shown'} />
```

--------------------------------

### Label with Input Connection

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Label.mdx

Links the label to a specific form input using the for prop for accessibility.

```javascript
<Canvas of={LabelStories._WithInput} sourceState={'shown'} />
```

--------------------------------

### Viewable Input

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Input.mdx

Adding a toggle button to reveal password text using the viewable prop.

```jsx
<Canvas of={InputStories._Viewable} sourceState={'shown'} />
```

--------------------------------

### Adaptive Width Configuration

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Select.mdx

Allows the dropdown to expand beyond the trigger width to accommodate longer labels.

```jsx
<Canvas of={SelectStories._AdaptiveWidth} sourceState={'shown'} />
```

--------------------------------

### Add Icon to Heading

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Heading.mdx

Appends an icon to the heading using the icon prop.

```jsx
<Canvas of={HeadingStories._Icon} sourceState={'shown'} />
```

--------------------------------

### Label Component Usage

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Label.mdx

Basic implementation of the Label component for form inputs.

```javascript
<Canvas of={LabelStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Link Buttons

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Button.mdx

Transform a button into a link by providing an href prop.

```jsx
<Canvas of={ButtonStories.Link} sourceState={'shown'} />
```

--------------------------------

### Slider Component Usage

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Slider.mdx

Displays the default implementation of the slider component.

```javascript
<Canvas of={SliderStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Injecting Publish Context

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/PublishContainer.mdx

Methods for accessing the publish container context within nested components using either the Composition or Options API.

```js
import { injectPublishContext } from '@statamic/cms/ui';
const { values, setFieldValue, etc } = injectPublishContext();

// Refs are provided, so you need to call `.value` to unwrap it.
const somethingFieldValue = values.value.something;
```

```js
import { publishContextKey } from '@statamic/cms/ui';

export default {
  inject: {
    publishContext: { from: publishContextKey }
  },
  methods: {
    getSomething() {
      return this.publishContext.values.something;
    }
  }
}
```

--------------------------------

### Rendering rich content

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Alert.mdx

Include complex structures like paragraphs and headings within the alert.

```javascript
<Canvas of={AlertStories.RichContent} sourceState={'shown'} />
```

--------------------------------

### TimePicker with Seconds

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/TimePicker.mdx

Implementation of the TimePicker with the granularity prop set to second.

```javascript
<Canvas of={TimePickerStories._WithSeconds} sourceState={'shown'} />
```

--------------------------------

### Handle Editable Events

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Editable.mdx

Respond to user interactions by listening for @submit, @cancel, and @edit events.

```javascript
<Canvas of={EditableStories._Events} sourceState={'shown'} />
```

--------------------------------

### Adding headings to Alerts

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Alert.mdx

Use the heading prop to include a title in the alert.

```javascript
<Canvas of={AlertStories.Headings} sourceState={'shown'} />
```

--------------------------------

### Setting Popover Direction

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Popover.mdx

Configure the popover position using the side prop, supporting top, bottom, left, and right.

```javascript
<Canvas of={PopoverStories._Direction} sourceState={'shown'} />
```

--------------------------------

### Display CharacterCounter Introduction

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/CharacterCounter.mdx

Displays the default CharacterCounter component within a Storybook canvas.

```javascript
<Canvas of={CharacterCounterStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Resize Controls

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Textarea.mdx

Restricts user resizing using the resize prop.

```javascript
<Canvas of={TextareaStories._ResizeControls} sourceState={'shown'} />
```

--------------------------------

### Nested Antlers Conditional Logic

Source: https://github.com/statamic/cms/blob/6.x/tests/__fixtures__/templates/nested-conditionals.antlers.html

Demonstrates complex conditional branching inside an articles loop using Antlers syntax.

```antlers
{{ articles }}

start

{{ if title == 'Nectar of the Gods' }}

Inner literal one.

{{ if true == true }} {{ if true == false }} {{ elseif false == true }} {{ if abc == 'abc' }} {{ /if }} {{ /if }} {{ else }} {{ /if }} {{ elseif 5 < 10 }}

Inner literal two.

{{ else }}

Else- inner literal three..

{{ /if }}

end

{{ /articles }}
```

--------------------------------

### Panel with Header Actions

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Panel.mdx

Utilizes the header-actions slot to inject interactive elements into the panel header.

```javascript
<Canvas of={PanelStories.WithHeaderActions} sourceState={'shown'} />
```

--------------------------------

### Checkbox Component Usage

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Checkbox.mdx

Basic implementation of the Checkbox component.

```javascript
<Canvas of={CheckboxStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Context Component Basic Usage

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Context.mdx

The component uses a template slot for the trigger element.

```javascript
<Canvas of={ContextStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Character Limit

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Input.mdx

Displaying a character count indicator for user feedback using the limit prop.

```jsx
<Canvas of={InputStories._CharacterLimit} sourceState={'shown'} />
```

--------------------------------

### Using Alert variants

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Alert.mdx

Apply the variant prop to set the semantic style of the alert.

```javascript
<Canvas of={AlertStories.Variants} sourceState={'shown'} />
```

--------------------------------

### Iterate and Render Replicator Blocks

Source: https://github.com/statamic/cms/blob/6.x/tests/__fixtures__/fieldtype_tests/replicator_blocks/template.antlers.html

Uses the replicator_blocks tag to loop through content and dynamically load partials based on the block type.

```antlers
{{ counter = 0 }} {{ replicator_blocks }} {{ partial:echo }} {{ counter += 1 }} {{ partial:components/{type} /}} {{ /partial:echo }} {{ /replicator_blocks }}
```

--------------------------------

### Panel with Subheading

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Panel.mdx

Includes a secondary text element below the main title for additional context.

```javascript
<Canvas of={PanelStories.WithSubheading} sourceState={'shown'} />
```

--------------------------------

### Context Component Labels

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Context.mdx

Use the ContextLabel component to group related menu items.

```javascript
<Canvas of={ContextStories._WithLabels} sourceState={'shown'} />
```

--------------------------------

### Accessing Grid Indices and Looping

Source: https://github.com/statamic/cms/blob/6.x/tests/__fixtures__/fieldtype_tests/grid_array_plucking/template.antlers.html

Access specific grid rows by index and use the loop tag to iterate through a range of grid items with fallback values.

```antlers
<{{ grid.0.grid_text_1 }}> <{{ grid.0.grid_text_2 }}> <{{ grid.2.grid_text_1 }}> <{{ grid.2.grid_text_2 }}> <{{ grid.4.grid_text_1 ?? 'Empty' }}> <{{ grid.4.grid_text_2 ?? 'Empty' }}> <{{ grid.3.grid_text_1 }}> <{{ grid.3.grid_text_2 }}> <{{ grid.1.grid_text_1 }}> <{{ grid.1.grid_text_2 }}> <{{ grid.10.grid_text_1 ?? 'Empty' }}> <{{ grid.10.grid_text_2 ?? 'Empty' }}> {{ loop from="0" to="4" }} <{{ grid.{value}.grid_text_1 ?? 'Empty' }}> {{ /loop }}
```

--------------------------------

### Configure Danger Zone Threshold

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/CharacterCounter.mdx

Uses the danger-zone prop to customize the character count at which the countdown becomes visible.

```javascript
<Canvas of={CharacterCounterStories._DangerZone} sourceState={'shown'} />
```

--------------------------------

### Slider Size Variants

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Slider.mdx

Shows the different size options available for the slider component.

```javascript
<Canvas of={SliderStories._Sizes} sourceState={'shown'} />
```

--------------------------------

### Customizing Header Actions

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Stack.mdx

Inject buttons or elements into the header using the header-actions slot.

```javascript
<Canvas of={StackStories.HeaderActionsSlot} sourceState={'shown'} />
```

--------------------------------

### Field with Badge

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Field.mdx

Adds a badge to the label for status or feature indicators.

```jsx
<Canvas of={FieldStories._WithBadge} sourceState={'shown'} />
```

--------------------------------

### Elastic Textarea

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Textarea.mdx

Enables auto-adjusting height based on content.

```javascript
<Canvas of={TextareaStories._Elastic} sourceState={'shown'} />
```

--------------------------------

### Implement CharacterCounter with Input

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/CharacterCounter.mdx

Automatically renders the counter when a limit prop is applied to Input or Textarea components.

```javascript
<Canvas of={CharacterCounterStories._WithInput} sourceState={'shown'} />
```

--------------------------------

### Modal With Icon

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Modal.mdx

Displays a modal with an icon added to the title via the icon prop.

```javascript
<Canvas of={ModalStories._WithIcon} sourceState={'shown'} />
```

--------------------------------

### Display Multiple Months

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Calendar.mdx

Use the number-of-months prop to render more than one month simultaneously.

```javascript
<Canvas of={CalendarStories._MultipleMonths} sourceState={'shown'} />
```

--------------------------------

### Rendering Statamic Fields with Antlers

Source: https://github.com/statamic/cms/blob/6.x/tests/__fixtures__/content/1996-11-18-dance.md

Template syntax for iterating through and displaying various Statamic field types, including grids, arrays, and conditional logic.

```antlers
```
{{# Bard - bard #}}
{{ bard }}

    
    {{ if type == 'new_set' }}
    
        {{# Array Dynamic - array #}}
        {{ foreach:array_dynamic }}
        
            {{ key }} - {{ value }}
        {{ /foreach:array_dynamic }}
        {{# Array Keyed - array #}}
        {{ array_keyed }}
        
            {{# Label1 #}}
            {{ key1 }}
            {{# Label2 #}}
            {{ key2 }}
            
        {{ /array_keyed }}
        {{# Button Group - button_group #}}
        {{ button_group }}
        {{# Checkboxes - checkboxes #}}
        {{ checkboxes }}
        {{# Code - code #}}
        {{ code }}
        {{# Color - color #}}
        {{ color }}
        {{# Float - float #}}
        {{ float }}
        {{# Grid - grid #}}
        {{ grid }}
        
            {{# Grid Text 1 - text #}}
            {{ grid_text_1 }}
            {{# Grid Text 2 - text #}}
            {{ grid_text_2 }}
            
        {{ /grid }}
        {{# Stacked Grid - grid #}}
        {{ stacked_grid }}
        
            {{# Stacked Grid Text 1 - text #}}
            {{ stacked_grid_text_1 }}
            {{# Stacked Grid Text 2 - text #}}
            {{ stacked_grid_text_2 }}
            
        {{ /stacked_grid }}
        {{# Hidden Field - hidden #}}
        {{ hidden_field }}
        {{# HTML Field - html #}}
        {{ html_field }}
        {{# Integer Field - integer #}}
        {{ integer_field }}
        {{# Link Field - link #}}
        {{ link_field }}
        {{# Markdown - markdown #}}
        {{ markdown }}
        {{# Radio - radio #}}
        {{ radio }}
        {{# Range Field - range #}}
        {{ range_field }}
        {{# Select Field - select #}}
        {{ select_field }}
        {{# Table - table #}}
        {{ table | table }}
        {{# Textarea - textarea #}}
        {{ textarea }}
        {{# Time - time #}}
        {{ time }}
        {{# Toggle - toggle #}}
        {{ if toggle }} Yes. {{ /if }}
        {{# Video - video #}}
        {{ video }}
        {{# Yaml - yaml #}}
        {{ yaml }}
            {{# Replace with your YAML keys. #}}
        {{ /yaml }}
        
    {{ /if }}
{{ /bard }}
```
```

--------------------------------

### Full Width Buttons

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Button.mdx

Expand the button to fill the available container width.

```jsx
<Canvas of={ButtonStories.FullWidth} sourceState={'shown'} />
```

--------------------------------

### Description with Slot Content

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Description.mdx

Allows for rich text, HTML, or links within the description area using the default slot.

```javascript
<Canvas of={DescriptionStories._WithSlot} sourceState={'shown'} />
```

--------------------------------

### ErrorMessage Default Usage

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/ErrorMessage.mdx

Displays the standard ErrorMessage component implementation.

```javascript
<Canvas of={ErrorMessageStories._DocsIntro} sourceState={'shown'} />
```

--------------------------------

### Panel without Header

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Panel.mdx

Displays a panel container without any header section for minimalist layouts.

```javascript
<Canvas of={PanelStories.NoHeader} sourceState={'shown'} />
```

--------------------------------

### Loading State

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Button.mdx

Display an animated loading indicator during asynchronous operations.

```jsx
<Canvas of={ButtonStories.Loading} sourceState={'shown'} />
```

--------------------------------

### ErrorMessage With Slot

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/ErrorMessage.mdx

Demonstrates using the default slot to inject custom HTML, links, or formatted text into the error message.

```javascript
<Canvas of={ErrorMessageStories._WithSlot} sourceState={'shown'} />
```

--------------------------------

### Checkbox with Description

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Checkbox.mdx

Displays a checkbox with an additional descriptive text block.

```javascript
<Canvas of={CheckboxStories.WithDescription} sourceState={'shown'} />
```

--------------------------------

### Switch Sizes

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Switch.mdx

Adjust the switch dimensions using the size property.

```javascript
<Canvas of={SwitchStories._Sizes} sourceState={'shown'} />
```

--------------------------------

### Set Heading Level

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Heading.mdx

Uses the level prop to define the HTML tag (e.g., h1, h2) for the heading.

```jsx
<Canvas of={HeadingStories._HeadingLevel} sourceState={'shown'} />
```

--------------------------------

### Antlers Template Logic

Source: https://github.com/statamic/cms/blob/6.x/tests/__fixtures__/views/nested_three.antlers.html

Displays asset class names, image variable types, and includes a nested partial with passed parameters.

```antlers
Nested Three Asset: {{ renamed_image_two | class_name }} Nested Three Image Var: {{ image }} - {{ image | type_of }} {{ partial:nested_four :image="renamed_image_two" }}
```

--------------------------------

### Nesting Stacks

Source: https://github.com/statamic/cms/blob/6.x/resources/js/stories/docs/Stack.mdx

Stacks support infinite nesting within other stacks or modals.

```javascript
<Canvas of={StackStories.Nesting} sourceState={'shown'} />
```