# @studiometa/ui

> Build accessible interfaces from meaningful markup

Composable TypeScript behavior and server-rendered templates, designed for progressive enhancement and application-owned styling.

## Table of Contents

### Reference

- [Reference](/reference.md)
- [All exports](/reference/all-exports.md)
- [Types](/reference/types.md)

### Components

#### Trigger an action

- [Action <Badges :texts="$frontmatter.badges" />](/reference/items/Action.md)
- [Button <Badges :texts="$frontmatter.badges" />](/reference/items/Button.md)
- [Hoverable <Badges :texts="$frontmatter.badges" />](/reference/items/Hoverable.md)

##### Action

- [Action examples](/reference/items/Action/examples.md)
- [Action JS API](/reference/items/Action/js-api.md)

##### Button

- [Button examples](/reference/items/Button/examples.md)
- [Button Twig API](/reference/items/Button/twig-api.md)

##### Hoverable

- [Hoverable examples](/reference/items/Hoverable/examples.md)
- [Hoverable JS API](/reference/items/Hoverable/js-api.md)

#### Animate content

- [CircularMarquee <Badges :texts="$frontmatter.badges" />](/reference/items/CircularMarquee.md)
- [Cursor <Badges :texts="$frontmatter.badges" />](/reference/items/Cursor.md)
- [Motion <Badges :texts="$frontmatter.badges" />](/reference/items/Motion.md)
- [MotionScrollTimeline <Badges :texts="$frontmatter.badges" />](/reference/items/MotionScrollTimeline.md)
- [MotionSequence <Badges :texts="$frontmatter.badges" />](/reference/items/MotionSequence.md)
- [MotionView <Badges :texts="$frontmatter.badges" />](/reference/items/MotionView.md)
- [ScrollAnimation <Badges :texts="$frontmatter.badges" />](/reference/items/ScrollAnimation.md)
- [ScrollReveal <Badges :texts="$frontmatter.badges" />](/reference/items/ScrollReveal.md)

##### CircularMarquee

- [Examples](/reference/items/CircularMarquee/examples.md)
- [CircularMarquee Twig API](/reference/items/CircularMarquee/twig-api.md)

##### Cursor

- [Cursor examples](/reference/items/Cursor/examples.md)
- [Cursor JS API](/reference/items/Cursor/js-api.md)
- [Cursor Twig API](/reference/items/Cursor/twig-api.md)

##### Motion

- [Motion examples](/reference/items/Motion/examples.md)
- [Motion JS API](/reference/items/Motion/js-api.md)

##### MotionScrollTimeline

- [MotionScrollTimeline examples](/reference/items/MotionScrollTimeline/examples.md)
- [MotionScrollTimeline JS API](/reference/items/MotionScrollTimeline/js-api.md)

##### MotionSequence

- [MotionSequence examples](/reference/items/MotionSequence/examples.md)
- [MotionSequence JS API](/reference/items/MotionSequence/js-api.md)

##### MotionView

- [MotionView examples](/reference/items/MotionView/examples.md)
- [MotionView JS API](/reference/items/MotionView/js-api.md)

##### ScrollAnimation

- [ScrollAnimation examples](/reference/items/ScrollAnimation/examples.md)
- [ScrollAnimation JS API](/reference/items/ScrollAnimation/js-api.md)

##### ScrollReveal

- [ScrollReveal examples](/reference/items/ScrollReveal/examples.md)
- [ScrollReveal JS API](/reference/items/ScrollReveal/js-api.md)

#### Bind reactive data

- [DataBind <Badges :texts="$frontmatter.badges" />](/reference/items/DataBind.md)
- [DataComputed <Badges :texts="$frontmatter.badges" />](/reference/items/DataComputed.md)
- [DataEffect <Badges :texts="$frontmatter.badges" />](/reference/items/DataEffect.md)
- [DataModel <Badges :texts="$frontmatter.badges" />](/reference/items/DataModel.md)
- [DataScope <Badges :texts="$frontmatter.badges" />](/reference/items/DataScope.md)

##### DataBind

- [DataBind, DataModel, DataEffect and DataComputed examples](/reference/items/DataBind/examples.md)
- [DataBind JavaScript API](/reference/items/DataBind/js-api.md)

##### DataComputed

- [DataBind, DataModel, DataEffect and DataComputed examples](/reference/items/DataComputed/examples.md)
- [DataComputed JavaScript API](/reference/items/DataComputed/js-api.md)

##### DataEffect

- [DataEffect JavaScript API](/reference/items/DataEffect/js-api.md)

##### DataModel

- [DataModel JavaScript API](/reference/items/DataModel/js-api.md)
- [DataBind, DataModel, DataEffect and DataComputed examples](/reference/items/DataModel/examples.md)

##### DataScope

- [DataScope anatomy](/reference/items/DataScope/anatomy.md)
- [DataScope examples](/reference/items/DataScope/examples.md)
- [DataScope JavaScript API](/reference/items/DataScope/js-api.md)

#### Show and hide content

- [Accordion <Badges :texts="$frontmatter.badges" />](/reference/items/Accordion.md)
- [Disclosure <Badges :texts="$frontmatter.badges" />](/reference/items/Disclosure.md)

##### Accordion

- [Accordion anatomy](/reference/items/Accordion/anatomy.md)
- [Accordion examples](/reference/items/Accordion/examples.md)
- [Accordion Twig API](/reference/items/Accordion/twig-api.md)

##### Disclosure

- [Disclosure anatomy](/reference/items/Disclosure/anatomy.md)
- [Disclosure examples](/reference/items/Disclosure/examples.md)
- [Disclosure JS API](/reference/items/Disclosure/js-api.md)
- [Disclosure Twig API](/reference/items/Disclosure/twig-api.md)

#### Handle dragging

- [Draggable <Badges :texts="$frontmatter.badges" />](/reference/items/Draggable.md)

##### Draggable

- [Draggable examples](/reference/items/Draggable/examples.md)
- [Draggable JS API](/reference/items/Draggable/js-api.md)

#### Build a layout

- [Hero <Badges :texts="$frontmatter.badges" />](/reference/items/Hero.md)
- [IconList <Badges :texts="$frontmatter.badges" />](/reference/items/IconList.md)
- [ImageGrid <Badges :texts="$frontmatter.badges" />](/reference/items/ImageGrid.md)
- [LargeText <Badges :texts="$frontmatter.badges" />](/reference/items/LargeText.md)
- [Reinsurance <Badges :texts="$frontmatter.badges" />](/reference/items/Reinsurance.md)
- [Sticky <Badges :texts="$frontmatter.badges" />](/reference/items/Sticky.md)

##### Hero

- [Hero examples](/reference/items/Hero/examples.md)
- [Hero Twig API](/reference/items/Hero/twig-api.md)

##### IconList

- [IconList examples](/reference/items/IconList/examples.md)
- [IconList Twig API](/reference/items/IconList/twig-api.md)

##### ImageGrid

- [ImageGrid examples](/reference/items/ImageGrid/examples.md)
- [ImageGrid Twig API](/reference/items/ImageGrid/twig-api.md)

##### LargeText

- [LargeText examples](/reference/items/LargeText/examples.md)
- [LargeText JS API](/reference/items/LargeText/js-api.md)
- [LargeText Twig API](/reference/items/LargeText/twig-api.md)

##### Reinsurance

- [Reinsurance examples](/reference/items/Reinsurance/examples.md)
- [Reinsurance Twig API](/reference/items/Reinsurance/twig-api.md)

##### Sticky

- [Sticky examples](/reference/items/Sticky/examples.md)
- [Sticky JS API](/reference/items/Sticky/js-api.md)
- [Sticky Twig API](/reference/items/Sticky/twig-api.md)

#### Load content

- [Fetch <Badges :texts="$frontmatter.badges" />](/reference/items/Fetch.md)
- [FetchShopifyPartial <Badges :texts="$frontmatter.badges" />](/reference/items/FetchShopifyPartial.md)
- [FetchShopifySection <Badges :texts="$frontmatter.badges" />](/reference/items/FetchShopifySection.md)
- [Frame <Badges :texts="$frontmatter.badges" />](/reference/items/Frame.md)
- [LazyInclude <Badges :texts="$frontmatter.badges" />](/reference/items/LazyInclude.md)
- [Prefetch <Badges :texts="$frontmatter.badges" />](/reference/items/Prefetch.md)

##### Fetch

- [Fetch examples](/reference/items/Fetch/examples.md)
- [Fetch JS API](/reference/items/Fetch/js-api.md)

##### FetchShopifyPartial

- [FetchShopifyPartial examples](/reference/items/FetchShopifyPartial/examples.md)
- [FetchShopifyPartial JS API](/reference/items/FetchShopifyPartial/js-api.md)

##### FetchShopifySection

- [FetchShopifySection examples](/reference/items/FetchShopifySection/examples.md)
- [FetchShopifySection JS API](/reference/items/FetchShopifySection/js-api.md)

##### Frame

- [Frame examples](/reference/items/Frame/examples.md)
- [Frame JS API](/reference/items/Frame/js-api.md)

###### JS API

- [AbstractFrameTrigger](/reference/items/Frame/js-api/abstract-frame-trigger.md)
- [Frame](/reference/items/Frame/js-api/frame.md)
- [FrameAnchor](/reference/items/Frame/js-api/frame-anchor.md)
- [FrameForm](/reference/items/Frame/js-api/frame-form.md)
- [FrameLoader](/reference/items/Frame/js-api/frame-loader.md)
- [FrameTarget](/reference/items/Frame/js-api/frame-target.md)
- [FrameTriggerLoader](/reference/items/Frame/js-api/frame-trigger-loader.md)

##### LazyInclude

- [LazyInclude examples](/reference/items/LazyInclude/examples.md)
- [LazyInclude JS API](/reference/items/LazyInclude/js-api.md)

##### Prefetch

- [Prefetch JS API](/reference/items/Prefetch/js-api.md)

#### Build a map

- [MapboxMap <Badges :texts="$frontmatter.badges" />](/reference/items/MapboxMap.md)
- [MapboxStaticMap <Badges :texts="$frontmatter.badges" />](/reference/items/MapboxStaticMap.md)
- [StoreLocator <Badges :texts="$frontmatter.badges" />](/reference/items/StoreLocator.md)

##### MapboxMap

- [MapboxMap examples](/reference/items/MapboxMap/examples.md)
- [MapboxMap JS API](/reference/items/MapboxMap/js-api.md)

##### MapboxStaticMap

- [MapboxStaticMap examples](/reference/items/MapboxStaticMap/examples.md)
- [MapboxStaticMap Twig API](/reference/items/MapboxStaticMap/twig-api.md)

##### StoreLocator

- [StoreLocator examples](/reference/items/StoreLocator/examples.md)
- [StoreLocator JS API](/reference/items/StoreLocator/js-api.md)

#### Display media

- [Figure <Badges :texts="$frontmatter.badges" />](/reference/items/Figure.md)
- [FigureShopify <Badges :texts="$frontmatter.badges" />](/reference/items/FigureShopify.md)
- [FigureTwicpics <Badges :texts="$frontmatter.badges" />](/reference/items/FigureTwicpics.md)
- [FigureVideo <Badges :texts="$frontmatter.badges" />](/reference/items/FigureVideo.md)
- [FigureVideoTwicpics <Badges :texts="$frontmatter.badges" />](/reference/items/FigureVideoTwicpics.md)
- [Icon <Badges :texts="$frontmatter.badges" />](/reference/items/Icon.md)
- [IconImg <Badges :texts="$frontmatter.badges" />](/reference/items/IconImg.md)

##### Figure

- [Figure examples](/reference/items/Figure/examples.md)
- [Figure JS API](/reference/items/Figure/js-api.md)
- [Figure Twig API](/reference/items/Figure/twig-api.md)

##### FigureShopify

- [FigureShopify examples](/reference/items/FigureShopify/examples.md)
- [FigureShopify JS API](/reference/items/FigureShopify/js-api.md)

##### FigureTwicpics

- [FigureTwicpics examples](/reference/items/FigureTwicpics/examples.md)
- [FigureTwicpics JS API](/reference/items/FigureTwicpics/js-api.md)
- [FigureTwicpics Twig API](/reference/items/FigureTwicpics/twig-api.md)

##### FigureVideo

- [FigureVideo examples](/reference/items/FigureVideo/examples.md)
- [FigureVideo JS API](/reference/items/FigureVideo/js-api.md)
- [FigureVideo Twig API](/reference/items/FigureVideo/twig-api.md)

##### FigureVideoTwicpics

- [FigureVideoTwicpics examples](/reference/items/FigureVideoTwicpics/examples.md)
- [FigureVideoTwicpics JS API](/reference/items/FigureVideoTwicpics/js-api.md)
- [FigureVideoTwicpics Twig API](/reference/items/FigureVideoTwicpics/twig-api.md)

##### Icon

- [Icon examples](/reference/items/Icon/examples.md)
- [Icon Inline Twig API](/reference/items/Icon/twig-api.md)

##### IconImg

- [IconImg examples](/reference/items/IconImg/examples.md)
- [IconImg Twig API](/reference/items/IconImg/twig-api.md)

#### Navigate content

- [AnchorNav <Badges :texts="$frontmatter.badges" />](/reference/items/AnchorNav.md)
- [AnchorScrollTo <Badges :texts="$frontmatter.badges" />](/reference/items/AnchorScrollTo.md)
- [Carousel <Badges :texts="$frontmatter.badges" />](/reference/items/Carousel.md)
- [Menu <Badges :texts="$frontmatter.badges" />](/reference/items/Menu.md)
- [Slider <Badges :texts="$frontmatter.badges" />](/reference/items/Slider.md)
- [Tabs <Badges :texts="$frontmatter.badges" />](/reference/items/Tabs.md)

##### AnchorNav

- [AnchorNav anatomy](/reference/items/AnchorNav/anatomy.md)
- [Examples](/reference/items/AnchorNav/examples.md)
- [AnchorNav JS API](/reference/items/AnchorNav/js-api.md)

##### AnchorScrollTo

- [AnchorScrollTo examples](/reference/items/AnchorScrollTo/examples.md)
- [AnchorScrollTo JS API](/reference/items/AnchorScrollTo/js-api.md)

##### Carousel

- [Carousel examples](/reference/items/Carousel/examples.md)
- [Carousel JS API](/reference/items/Carousel/js-api.md)

##### Menu

- [Menu anatomy](/reference/items/Menu/anatomy.md)
- [Menu examples](/reference/items/Menu/examples.md)
- [Menu JS API](/reference/items/Menu/js-api.md)

##### Slider

- [Slider anatomy](/reference/items/Slider/anatomy.md)
- [Slider examples](/reference/items/Slider/examples.md)
- [Slider JS API](/reference/items/Slider/js-api.md)

###### JS API

- [Slider](/reference/items/Slider/js-api/slider.md)
- [SliderBtn](/reference/items/Slider/js-api/slider-btn.md)
- [SliderCount](/reference/items/Slider/js-api/slider-count.md)
- [SliderDots](/reference/items/Slider/js-api/slider-dots.md)
- [SliderDrag](/reference/items/Slider/js-api/slider-drag.md)
- [SliderItem](/reference/items/Slider/js-api/slider-item.md)
- [SliderProgress](/reference/items/Slider/js-api/slider-progress.md)

##### Tabs

- [Tabs anatomy](/reference/items/Tabs/anatomy.md)
- [Tabs examples](/reference/items/Tabs/examples.md)
- [Tabs JS API](/reference/items/Tabs/js-api.md)
- [Tabs Twig API](/reference/items/Tabs/twig-api.md)

#### Open an overlay

- [Dialog <Badges :texts="$frontmatter.badges" />](/reference/items/Dialog.md)
- [Modal <Badges :texts="$frontmatter.badges" />](/reference/items/Modal.md)
- [Panel <Badges :texts="$frontmatter.badges" />](/reference/items/Panel.md)
- [Toaster <Badges :texts="$frontmatter.badges" />](/reference/items/Toaster.md)

##### Dialog

- [Dialog examples](/reference/items/Dialog/examples.md)
- [Dialog JS API](/reference/items/Dialog/js-api.md)

##### Modal

- [Modal anatomy](/reference/items/Modal/anatomy.md)
- [Modal examples](/reference/items/Modal/examples.md)
- [Modal JS API](/reference/items/Modal/js-api.md)
- [Modal Twig API](/reference/items/Modal/twig-api.md)

##### Panel

- [Panel examples](/reference/items/Panel/examples.md)
- [Panel JS API](/reference/items/Panel/js-api.md)
- [Panel Twig API](/reference/items/Panel/twig-api.md)

##### Toaster

- [Toaster examples](/reference/items/Toaster/examples.md)
- [Toaster JS API](/reference/items/Toaster/js-api.md)

#### Track interactions

- [Track <Badges :texts="$frontmatter.badges" />](/reference/items/Track.md)

##### Track

- [Track anatomy](/reference/items/Track/anatomy.md)
- [Track examples](/reference/items/Track/examples.md)
- [Track JS API](/reference/items/Track/js-api.md)

### Primitives

- [ClickOutside <Badges :texts="$frontmatter.badges" />](/reference/items/ClickOutside.md)
- [Indexable <Badges :texts="$frontmatter.badges" />](/reference/items/Indexable.md)
- [InView <Badges :texts="$frontmatter.badges" />](/reference/items/InView.md)
- [InViewOnce <Badges :texts="$frontmatter.badges" />](/reference/items/InViewOnce.md)
- [Sentinel <Badges :texts="$frontmatter.badges" />](/reference/items/Sentinel.md)
- [Timer <Badges :texts="$frontmatter.badges" />](/reference/items/Timer.md)
- [Transition <Badges :texts="$frontmatter.badges" />](/reference/items/Transition.md)
- [ViewTransition <Badges :texts="$frontmatter.badges" />](/reference/items/ViewTransition.md)

#### ClickOutside

- [ClickOutside examples](/reference/items/ClickOutside/examples.md)
- [ClickOutside JS API](/reference/items/ClickOutside/js-api.md)

#### Indexable

- [Indexable examples](/reference/items/Indexable/examples.md)
- [Indexable JS API](/reference/items/Indexable/js-api.md)

#### InView

- [InView examples](/reference/items/InView/examples.md)
- [InView JS API](/reference/items/InView/js-api.md)

#### InViewOnce

- [InViewOnce examples](/reference/items/InViewOnce/examples.md)
- [InViewOnce JS API](/reference/items/InViewOnce/js-api.md)

#### Timer

- [Timer examples](/reference/items/Timer/examples.md)
- [Timer JS API](/reference/items/Timer/js-api.md)

#### Transition

- [Transition examples](/reference/items/Transition/examples.md)
- [Transition JS API](/reference/items/Transition/js-api.md)

#### ViewTransition

- [ViewTransition examples](/reference/items/ViewTransition/examples.md)
- [ViewTransition JS API](/reference/items/ViewTransition/js-api.md)

### Decorators

- [animationScrollWithEase <Badges :texts="$frontmatter.badges" />](/reference/items/animationScrollWithEase.md)
- [withDeprecation <Badges :texts="$frontmatter.badges" />](/reference/items/withDeprecation.md)
- [withIndex <Badges :texts="$frontmatter.badges" />](/reference/items/withIndex.md)
- [withScrollAnimationDebug <Badges :texts="$frontmatter.badges" />](/reference/items/withScrollAnimationDebug.md)
- [withTransition <Badges :texts="$frontmatter.badges" />](/reference/items/withTransition.md)

### Helpers and utilities

- [viewTransition <Badges :texts="$frontmatter.badges" />](/reference/items/view-transition-helper.md)

### Guide

- [Guide](/guide.md)
- [Concepts](/guide/concepts.md)
- [Installation](/guide/installation.md)
- [Autoloading](/guide/autoloading.md)
- [Usage](/guide/usage.md)
- [Contributing](/guide/contributing.md)
- [ESLint Plugin](/guide/eslint-plugin.md)

#### Concepts

- [Concepts](/guide/concepts.md)
- [Packages and surfaces](/guide/concepts/packages-and-surfaces.md)
- [Declarative runtime](/guide/concepts/declarative-runtime.md)
- [Composition](/guide/concepts/composition.md)
- [Templates and customization](/guide/concepts/templates-and-customization.md)

### Migration guides

- [v0.1.0 → v0.2.0](/migration-guides/0.1.0-0.2.0.md)
- [v0.2 → v1.0](/migration-guides/0.2-1.0.md)
- [v1.x → v2.x](/migration-guides/1.0-2.0.md)
- [@studiometa/vue-mapbox-gl → @studiometa/ui-mapbox](/migration-guides/vue-mapbox-gl.md)