AstroAnimate Docs — Installation, Components & API

A CSS-first tab component with zero-hydration and smooth JavaScript-enhanced indicator transitions.

Preview/Playground

Created by

Barsan

Profile Content

Astro

---
import AnimatedTabs from "@astroanimate/core/AnimatedTabs";
---

<AnimatedTabs
  tabs={[
    { id: "profile", label: "Profile" },
    { id: "settings", label: "Settings" }
  ]}
  variant="pill"
>
  <div slot="panel:profile">Profile Content</div>
  <div slot="panel:settings">Settings Content</div>
</AnimatedTabs>

Installation

bash

npm install @astroanimate/core

Usage

---
import AnimatedTabs from "@astroanimate/core/AnimatedTabs";
---

<AnimatedTabs
  tabs={[
    { id: "profile", label: "Profile" },
    { id: "settings", label: "Settings" }
  ]}
  variant="pill"
>
  <div slot="panel:profile">Profile Content</div>
  <div slot="panel:settings">Settings Content</div>
</AnimatedTabs>

Renders a keyboard-accessible tablist and content panels defined via dynamic slots.

Props

Prop	Type	Default	Description
`tabs`	`TabDef[]`	`[]`	Array of tab definitions `{ id: string, label: string }`
`defaultTab`	`string`	`-`	The `id` of the initially active tab
`variant`	`"pill" \| "underline"`	`"pill"`	Visual style variant
`color`	`string`	`"#3b82f6"`	Accent color for the active indicator
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Tab sizing
`backgroundColor`	`string`	`"#f1f5f9"`	Background color for the tablist container
`inactiveTextColor`	`string`	`"#64748b"`	Text color for inactive tabs
`activeTextColor`	`string`	`-`	Text color for active tabs
`showBorder`	`boolean`	`true`	Show a border around the active panel
`fullWidth`	`boolean`	`true`	Make tabs evenly fill the available width
`class`	`string`	`""`	Additional CSS classes

Use When

Organizing related, mutually exclusive content into distinct views
Needing a robust, resilient tab solution that initially renders without JavaScript
Requiring multiple independent tab instances on the same page

Avoid When

Building primary site navigation (use standard links instead of tabs)
Content inside hidden panels requires immediate indexing by basic SEO bots

Accessibility

Implements full keyboard navigation (Arrow keys, Home, End)
Uses standard ARIA attributes (role="tablist", role="tab", role="tabpanel", aria-selected, tabindex)
Fully respects prefers-reduced-motion: reduce by disabling CSS animations and JS position updates

Performance

Zero Hydration: Requires no framework hydration overhead
CSS-First: Layout and initial state are driven strictly by data-attributes, avoiding Cumulative Layout Shift (CLS)

Credits

Credit to @Barsan

AnimatedTabs NEW