# 4AF Components

> A personal library of React components built on Base UI, installed with the shadcn CLI.

Components install with the shadcn CLI, run in a project with a shadcn `components.json`
(`npx shadcn@latest init` creates one). The theme, shared utilities, and component
dependencies install with each component.

```bash
# List every component with its description and install URL
npx shadcn@latest search https://4af.selfsimilar.dev/r/registry.json -t ui

# Preview an install, then run it
npx shadcn@latest add https://4af.selfsimilar.dev/r/<name>.json --dry-run
npx shadcn@latest add https://4af.selfsimilar.dev/r/<name>.json
```

Optional: a 4AF agent skill packages this workflow and a component chooser. Download
it from `https://4af.selfsimilar.dev/api/agent-skill/download` (a zip of the skill folder) or read
`https://4af.selfsimilar.dev/docs/reference/agent-skill/skill.md`.

Each component's documentation, including its install command and a usage example, is at
`https://4af.selfsimilar.dev/docs/<name>.md`. Every page is listed below.

## Overview

- [Overview](https://4af.selfsimilar.dev/docs.md): What the library is and how to install from it.

## Reference

- [Installation](https://4af.selfsimilar.dev/docs/reference/installation.md): Install, preview, and update components with the shadcn CLI.
- [Components](https://4af.selfsimilar.dev/docs/reference/components.md): Every installable 4AF component, generated directly from the registry.
- [Design System](https://4af.selfsimilar.dev/docs/reference/design.md): The visual language, semantic tokens, geometry, depth, typography, and motion of 4AF.
- [Engineering](https://4af.selfsimilar.dev/docs/reference/engineering.md): The component contract, repository boundaries, motion rules, and documentation parity.
- [Agent Skill](https://4af.selfsimilar.dev/docs/reference/agent-skill.md): Guidance for agents choosing, installing, integrating, and maintaining 4AF components.

## Actions

- [Button](https://4af.selfsimilar.dev/docs/button.md): A composable Base UI button with variants, loading state, asChild support, and spring press feedback.
- [Button Group](https://4af.selfsimilar.dev/docs/button-group.md): A grouped set of related buttons with shared geometry and separators.
- [Toggle](https://4af.selfsimilar.dev/docs/toggle.md): A pressable two-state control with variants, sizes, and accessible state.
- [Morph](https://4af.selfsimilar.dev/docs/morph.md): A size-stable animated content swap for icons, labels, and status changes.
- [Action Button](https://4af.selfsimilar.dev/docs/action-button.md): A button that confirms an asynchronous action with loading, success, and error states.
- [Action Toggle](https://4af.selfsimilar.dev/docs/action-toggle.md): An asynchronous toggle that commits its pressed state only after the action succeeds.
- [Copy Button](https://4af.selfsimilar.dev/docs/copy-button.md): A clipboard action with transient success feedback and icon morphing.
- [Delete Button](https://4af.selfsimilar.dev/docs/delete-button.md): A destructive action button with deliberate confirmation feedback.

## Fields and selection

- [Input](https://4af.selfsimilar.dev/docs/input.md): A styled text field with tones, a shared 34px default height, validation states, an optional leading icon, and composable adornments.
- [Textarea](https://4af.selfsimilar.dev/docs/textarea.md): A multiline text field aligned with the 4AF input tones and sizing system.
- [Switch](https://4af.selfsimilar.dev/docs/switch.md): A Base UI switch with a rounded center-pill press response.
- [Checkbox](https://4af.selfsimilar.dev/docs/checkbox.md): A Base UI checkbox supporting controlled, uncontrolled, and indeterminate states.
- [Radio](https://4af.selfsimilar.dev/docs/radio.md): A Base UI radio group with controlled and uncontrolled selection.
- [Slider](https://4af.selfsimilar.dev/docs/slider.md): A Base UI range control with multiple thumb styles, labels, ticks, sizing, and an optional live value tooltip.
- [Select](https://4af.selfsimilar.dev/docs/select.md): A composable Base UI select with rich items, sizing, and positioning options.
- [Select Search](https://4af.selfsimilar.dev/docs/select-search.md): A searchable Base UI select for larger option sets.
- [Select Aligned](https://4af.selfsimilar.dev/docs/select-aligned.md): A select whose panel opens on the trigger, with the selected row landing on the value it replaces.
- [Date Picker](https://4af.selfsimilar.dev/docs/date-picker.md): A date or date-range field that opens a calendar in a popover, or a bottom sheet on phones.

## Feedback and status

- [Progress](https://4af.selfsimilar.dev/docs/progress.md): Determinate progress feedback with accessible value semantics.
- [Alert](https://4af.selfsimilar.dev/docs/alert.md): A semantic status message with tone variants and composable content.
- [Badge](https://4af.selfsimilar.dev/docs/badge.md): A compact label for statuses, categories, and counts.
- [Skeleton](https://4af.selfsimilar.dev/docs/skeleton.md): A placeholder surface for preserving layout while content loads.
- [Empty](https://4af.selfsimilar.dev/docs/empty.md): A composable empty-state layout for missing content and first-run actions.
- [Text Shimmer](https://4af.selfsimilar.dev/docs/text-shimmer.md): A restrained animated text treatment for transient loading states.
- [Scramble Text](https://4af.selfsimilar.dev/docs/scramble-text.md): A short random-character reveal for text that is appearing or changing.
- [ASCII Loader](https://4af.selfsimilar.dev/docs/ascii-loader.md): A compact loading indicator using Unicode Braille characters, with reduced-motion handling.
- [Matrix Loader](https://4af.selfsimilar.dev/docs/matrix-loader.md): A compact 4×4 dot loader with several delay patterns.
- [Classic Loader](https://4af.selfsimilar.dev/docs/classic-loader.md): A twelve-bar radial spinner animated with CSS only.

## Navigation and layout

- [Breadcrumb](https://4af.selfsimilar.dev/docs/breadcrumb.md): A trail of links to the current page, with an optional ellipsis that reveals collapsed crumbs in place.
- [Tabs](https://4af.selfsimilar.dev/docs/tabs.md): A Base UI tab set with keyboard navigation and an animated active indicator.
- [Collapsible](https://4af.selfsimilar.dev/docs/collapsible.md): An accessible disclosure region with animated content and composable triggers.
- [Table](https://4af.selfsimilar.dev/docs/table.md): A presentational semantic table with two densities, a pinned header, grid lines, a composable caption, and a loading state.
- [Data Table](https://4af.selfsimilar.dev/docs/data-table.md): The stateful table — a checkbox column, a selection action row, three-step column sorting, and a per-row actions menu.
- [Table of Contents](https://4af.selfsimilar.dev/docs/table-of-contents.md): A navigable heading outline that tracks the active document section.
- [Table of Contents Lines](https://4af.selfsimilar.dev/docs/table-of-contents-lines.md): A compact document outline visualized as interactive depth-aware lines.
- [Separator](https://4af.selfsimilar.dev/docs/separator.md): An accessible visual divider with horizontal and vertical orientations.
- [Command Palette](https://4af.selfsimilar.dev/docs/command-palette.md): A searchable keyboard-first command surface composed from 4AF primitives.
- [Sidebar](https://4af.selfsimilar.dev/docs/sidebar.md): A responsive application sidebar with rails, panels, menus, and collapsible modes.
- [Sidebar Layout](https://4af.selfsimilar.dev/docs/sidebar-layout.md): An application-shell layout that coordinates a 4AF sidebar with the main content area.

## Overlays and menus

- [Tooltip](https://4af.selfsimilar.dev/docs/tooltip.md): A concise hover and focus label with Base UI positioning and delay behavior.
- [Sheet](https://4af.selfsimilar.dev/docs/sheet.md): A modal edge panel with Base UI focus management and animated entry and exit.
- [Dialog](https://4af.selfsimilar.dev/docs/dialog.md): A focus-trapped Base UI modal with asymmetric enter and exit motion and optional phased content.
- [Alert Dialog](https://4af.selfsimilar.dev/docs/alert-dialog.md): A modal confirmation dialog for consequential actions, built on Base UI.
- [Popover](https://4af.selfsimilar.dev/docs/popover.md): A positioned non-modal surface with accessible trigger, focus, and dismissal behavior.
- [Selection Toolbar](https://4af.selfsimilar.dev/docs/selection-toolbar.md): A contextual toolbar for actions on selected text.
- [Hover Card](https://4af.selfsimilar.dev/docs/hover-card.md): A hover and focus preview surface with Base UI positioning and dismissal.
- [Dropdown Menu](https://4af.selfsimilar.dev/docs/dropdown-menu.md): A Base UI menu with submenus, checkable items, groups, and keyboard navigation.