---
title: Quick start
description: headless UI components for vanilla JavaScript.
---

<div className="ds-intro-tag">tiny · accessible · unstyled</div>

data-slot adds accessible behavior to your markup with a few attributes and a small JavaScript module. Bring your own styles, use your favorite framework, or use none at all.

## Install a component

Install only the packages you need. Each component is available separately.

**bun**

```bash
bun add @data-slot/tabs
```

**npm**

```bash
npm install @data-slot/tabs
```

**pnpm**

```bash
pnpm add @data-slot/tabs
```

## Assemble the markup

Use `data-slot` to identify each part. Related triggers and panels share a `data-value`.

```html
<div data-slot="tabs" data-default-value="one">
  <div data-slot="tabs-list" aria-label="Getting started">
    <button data-slot="tabs-trigger" data-value="one">Overview</button>
    <button data-slot="tabs-trigger" data-value="two">Details</button>
  </div>
  <div data-slot="tabs-content" data-value="one">Your overview.</div>
  <div data-slot="tabs-content" data-value="two">Your details.</div>
</div>
```

## Add the behavior

Import and call `create()` to make the tabs interactive:

```javascript
import { create } from '@data-slot/tabs';

// Find and initialize all [data-slot="tabs"] elements.
create();
```

The tabs now respond to clicks and keyboard navigation.

To target a specific element and control its tabs from JavaScript, use `createTabs()` instead:

```javascript
import { createTabs } from '@data-slot/tabs';

const element = document.querySelector('[data-slot="tabs"]');
const tabs = createTabs(element);

tabs.select('two'); // Show the Details panel.
```

Call `tabs.destroy()` before removing that element to clean up its listeners.

Run either setup after the markup is in the document. Use a bundler such as Vite to resolve package imports, and use `type="module"` if you add the code in a script tag.

## Make it yours

Components provide behavior and accessibility attributes. Styling is yours. Every example includes CSS and Tailwind versions, plus the initialization code.

<Example name="tabs" />

Tailwind examples use Tailwind CSS v4. Examples with animation utilities also use `tw-animate-css`. See the [styling guide](/handbook/styling) for setup.

## Explore the components

Pick a component in the sidebar. Every page follows the same structure: **Anatomy → Examples → API reference**.

**[Accordion](/components/accordion)**

Reveal one section or several.

**[Dialog](/components/dialog)**

Keep focus on the task at hand.

**[Select](/components/select)**

Choose from a list of options.

**[Tabs](/components/tabs)**

Switch between related panels.