# ABUI

> A shadcn/ui-compatible registry of reusable React components, blocks, and Tailwind CSS utilities by Antonio Brandao. Install any item with npx shadcn add @abui/<name>.

ABUI is a public, open-source component registry that follows the shadcn/ui registry specification and Vercel's components.build taxonomy. Every item is a copy-and-own file: installing it writes TypeScript/React source into your project rather than adding a package dependency. Items are styled with Tailwind CSS v4 and shadcn/ui design tokens (background, foreground, primary, muted, border, etc.), so they adopt the host project's theme.

## Installation

ABUI is listed in the shadcn registry directory, so the `@abui` namespace resolves without configuration:

```bash
npx shadcn@latest add @abui/<name>
```

To pin the registry manually, add this to `components.json`:

```json
{ "registries": { "@abui": "https://www.abui.io/r/{name}.json" } }
```

Requirements: a React project initialised with shadcn/ui (`npx shadcn@latest init`), Tailwind CSS v4, and the `@/lib/utils` `cn` helper.


## Blocks

- [Timeline](https://www.abui.io/blocks/timeline): A Gantt-chart style timeline with draggable time slots. Install: `npx shadcn@latest add @abui/timeline`
- [Availability](https://www.abui.io/blocks/availability): A weekly availability designer with draggable and resizable time slots. Install: `npx shadcn@latest add @abui/availability`
- [Calendar Year](https://www.abui.io/blocks/calendar-year): A calendar year component. Install: `npx shadcn@latest add @abui/calendar-year`
- [Scroll Reveal Content A](https://www.abui.io/blocks/scroll-reveal-content-a): A block that shows 3 parts of content with a specific image for each part, and a fancy line grow expand during scroll. Install: `npx shadcn@latest add @abui/scroll-reveal-content-a`
- [Animated Chart](https://www.abui.io/blocks/animated-chart): An animated column chart with spring physics, viewport-triggered animations, and support for dynamic data transitions. Install: `npx shadcn@latest add @abui/animated-chart`
- [Squeeze Carousel](https://www.abui.io/blocks/squeeze-carousel): A canvas-driven news carousel: one wide active card with squeezed companions that stretch on hover and slide into place, with keyboard and screen-reader support and a scroll-snap mobile layout. Install: `npx shadcn@latest add @abui/squeeze-carousel`

## Components

- [Breakpoint Display](https://www.abui.io/components/breakpoint-display): A breakpoint display component. Install: `npx shadcn@latest add @abui/breakpoint-display`
- [Radio Tabs](https://www.abui.io/components/radio-tabs): A radio tabs component. Install: `npx shadcn@latest add @abui/radio-tabs`
- [Radio Rows](https://www.abui.io/components/radio-rows): A radio rows component. Install: `npx shadcn@latest add @abui/radio-rows`
- [Color Swatch Selector](https://www.abui.io/components/color-swatch-selector): A color swatch selector component. Install: `npx shadcn@latest add @abui/color-swatch-selector`
- [Label Selector](https://www.abui.io/components/label-selector): A text label selector component for sizes, variants, and other text-based options. Install: `npx shadcn@latest add @abui/label-selector`
- [Spinner](https://www.abui.io/components/spinner): A customizable loading spinner component with size, speed, and color variants. Install: `npx shadcn@latest add @abui/spinner`
- [Scroll Progress](https://www.abui.io/components/scroll-progress): A scroll progress indicator that shows reading progress as a horizontal bar at the top or bottom of the viewport. Install: `npx shadcn@latest add @abui/scroll-progress`
- [Text Gradient](https://www.abui.io/components/text-gradient): A text gradient effect component. Install: `npx shadcn@latest add @abui/text-gradient`
- [Accordion Multiselect](https://www.abui.io/components/accordion-multiselect): An accordion multiselect component with categories and services. Install: `npx shadcn@latest add @abui/accordion-multiselect`
- [Timeline Steps](https://www.abui.io/components/timeline-steps): A component for displaying chronological events, activities, or steps Install: `npx shadcn@latest add @abui/timeline-steps`
- [Table of Contents](https://www.abui.io/components/toc): A table of contents component with active anchor tracking and depth-aware line styling. Features two variants: default (straight line) and clerk (depth-responsive line that follows hierarchy). Install: `npx shadcn@latest add @abui/toc`

## Utilities

- [Orientation Media Queries](https://www.abui.io/utils/orientation-media-queries): A set of device orientation media queries. Install: `npx shadcn@latest add @abui/orientation-media-queries`
- [Text Utils](https://www.abui.io/utils/text-utils): A set of text utility classes. Install: `npx shadcn@latest add @abui/text-utils`
- [Extra Breakpoints](https://www.abui.io/utils/extra-breakpoints): Adds XS, XXS and 3XL breakpoints. Install: `npx shadcn@latest add @abui/extra-breakpoints`
- [Debug Utils](https://www.abui.io/utils/debug-utils): A set of debug utility classes. Install: `npx shadcn@latest add @abui/debug-utils`

## Machine-readable registry

- [Registry index](https://www.abui.io/r/registry.json): every item with its type, dependencies, and file paths
- [Item JSON](https://www.abui.io/r/{name}.json): shadcn registry-item schema, including full source in `files[].content`
- [Source repository](https://github.com/antoniobrandao/abui): GitHub, sources live under `registry/abui/`

## Optional

- [Full documentation with source code](https://www.abui.io/llms-full.txt): every item's description, install command, dependencies, and complete TypeScript source
- [components.build](https://www.components.build): the component taxonomy this registry follows