# easeful

> A dependency-free CSS layer that adds enter and exit animations to any component that already signals open and closed state. One HTML attribute, zero JavaScript in the browser.

Every page below is also available as markdown by appending `.md` to its path. The whole site as one file is at https://easeful.sanyam.sh/llms-full.txt.

## Get Started

- [Overview](https://easeful.sanyam.sh/docs/overview.md): What the library is, the whole of its API, and what it deliberately leaves to the host component.
- [Introduction](https://easeful.sanyam.sh/docs.md): A dependency-free CSS layer that animates any component already signalling open and closed state. One attribute, zero JavaScript.
- [Installation](https://easeful.sanyam.sh/docs/installation.md): Import the layer once and declare the layer order before Tailwind. Getting that order wrong is the single most common failure.
- [How it works](https://easeful.sanyam.sh/docs/how-it-works.md): Three mechanisms behind one attribute: keyframes for Radix, transitions for Base UI, and native open state for dialog and popover.
- [TypeScript](https://easeful.sanyam.sh/docs/typescript.md): Add easeful/types to your tsconfig so data-motion is checked against the preset vocabulary instead of accepting any string.
- [Reference](https://easeful.sanyam.sh/docs/reference.md): Every attribute and every token in one place, generated from the same manifest entry the TypeScript types are.
- [Coverage](https://easeful.sanyam.sh/docs/coverage.md): Every component against every value that works on it, built from the manifest rather than counted by hand.
- [Questions](https://easeful.sanyam.sh/docs/faq.md): Why a Radix exit does not play, why nothing animates under Tailwind v4, and how to animate a height the browser refuses to interpolate.

## Presets

- [fade](https://easeful.sanyam.sh/docs/presets/fade.md): Fades opacity only. Overlays, backdrops, and anything where movement would distract.
- [scale-fade](https://easeful.sanyam.sh/docs/presets/scale-fade.md): Fades in while scaling up slightly. Default choice for dialogs, dropdowns, and popovers.
- [slide-up](https://easeful.sanyam.sh/docs/presets/slide-up.md): Fades in while sliding up from slightly below. Menus and content anchored above their trigger.
- [collapse](https://easeful.sanyam.sh/docs/presets/collapse.md): Animates a panel between zero and its natural height. The preset for accordions and collapsibles, where fading alone leaves the layout jumping. Takes a single element child.

## Radix UI

- [Dialog](https://easeful.sanyam.sh/radix/dialog.md): Dialog with and without easeful, showing what the host writes and what easeful matches on.
- [Alert dialog](https://easeful.sanyam.sh/radix/alert-dialog.md): Alert dialog with and without easeful, showing what the host writes and what easeful matches on.
- [Popover](https://easeful.sanyam.sh/radix/popover.md): Popover with and without easeful, showing what the host writes and what easeful matches on.
- [Dropdown menu](https://easeful.sanyam.sh/radix/dropdown-menu.md): Dropdown menu with and without easeful, showing what the host writes and what easeful matches on.
- [Context menu](https://easeful.sanyam.sh/radix/context-menu.md): Context menu with and without easeful, showing what the host writes and what easeful matches on.
- [Menubar](https://easeful.sanyam.sh/radix/menubar.md): Menubar with and without easeful, showing what the host writes and what easeful matches on.
- [Hover card](https://easeful.sanyam.sh/radix/hover-card.md): Hover card with and without easeful, showing what the host writes and what easeful matches on.
- [Tooltip](https://easeful.sanyam.sh/radix/tooltip.md): Tooltip with and without easeful, showing what the host writes and what easeful matches on.
- [Select](https://easeful.sanyam.sh/radix/select.md): Select with and without easeful, showing what the host writes and what easeful matches on.
- [Navigation menu](https://easeful.sanyam.sh/radix/navigation-menu.md): Navigation menu with and without easeful, showing what the host writes and what easeful matches on.
- [Toast](https://easeful.sanyam.sh/radix/toast.md): Toast with and without easeful, showing what the host writes and what easeful matches on.
- [Collapsible](https://easeful.sanyam.sh/radix/collapsible.md): Collapsible with and without easeful, showing what the host writes and what easeful matches on.
- [Accordion](https://easeful.sanyam.sh/radix/accordion.md): Accordion with and without easeful, showing what the host writes and what easeful matches on.
- [Tabs](https://easeful.sanyam.sh/radix/tabs.md): Tabs with and without easeful, showing what the host writes and what easeful matches on.
- [Scroll area](https://easeful.sanyam.sh/radix/scroll-area.md): Scroll area with and without easeful, showing what the host writes and what easeful matches on.

## Base UI

- [Dialog](https://easeful.sanyam.sh/base-ui/dialog.md): Dialog with and without easeful, showing what the host writes and what easeful matches on.
- [Alert dialog](https://easeful.sanyam.sh/base-ui/alert-dialog.md): Alert dialog with and without easeful, showing what the host writes and what easeful matches on.
- [Popover](https://easeful.sanyam.sh/base-ui/popover.md): Popover with and without easeful, showing what the host writes and what easeful matches on.
- [Menu](https://easeful.sanyam.sh/base-ui/menu.md): Menu with and without easeful, showing what the host writes and what easeful matches on.
- [Context menu](https://easeful.sanyam.sh/base-ui/context-menu.md): Context menu with and without easeful, showing what the host writes and what easeful matches on.
- [Preview card](https://easeful.sanyam.sh/base-ui/preview-card.md): Preview card with and without easeful, showing what the host writes and what easeful matches on.
- [Tooltip](https://easeful.sanyam.sh/base-ui/tooltip.md): Tooltip with and without easeful, showing what the host writes and what easeful matches on.
- [Select](https://easeful.sanyam.sh/base-ui/select.md): Select with and without easeful, showing what the host writes and what easeful matches on.
- [Navigation menu](https://easeful.sanyam.sh/base-ui/navigation-menu.md): Navigation menu with and without easeful, showing what the host writes and what easeful matches on.
- [Toast](https://easeful.sanyam.sh/base-ui/toast.md): Toast with and without easeful, showing what the host writes and what easeful matches on.
- [Collapsible](https://easeful.sanyam.sh/base-ui/collapsible.md): Collapsible with and without easeful, showing what the host writes and what easeful matches on.
- [Accordion](https://easeful.sanyam.sh/base-ui/accordion.md): Accordion with and without easeful, showing what the host writes and what easeful matches on.
- [Tabs](https://easeful.sanyam.sh/base-ui/tabs.md): Tabs with and without easeful, showing what the host writes and what easeful matches on.
- [Scroll area](https://easeful.sanyam.sh/base-ui/scroll-area.md): Scroll area with and without easeful, showing what the host writes and what easeful matches on.

## No library

- [Native dialog](https://easeful.sanyam.sh/native/dialog.md): Native dialog with and without easeful, showing what the host writes and what easeful matches on.
- [Native popover](https://easeful.sanyam.sh/native/popover.md): Native popover with and without easeful, showing what the host writes and what easeful matches on.
- [Plain [hidden]](https://easeful.sanyam.sh/native/hidden.md): Plain [hidden] with and without easeful, showing what the host writes and what easeful matches on.