# Fabric UI

> Fabric UI is a design-forward component system for React and Tailwind CSS, with production-ready patterns built on top of proven primitives. It supports both Base UI and Radix UI foundations and is designed to work well for developers and AI-driven workflows.

## Overview

- [Introduction](/docs): Core principles, product direction, and the overall Fabric UI approach.
- [Get Started](/docs/get-started): Quick guide to adding Fabric UI to your application.
- [Styling](/docs/styling): Theme tokens and color system guidance.
- [Registry](/docs/registry): Registry setup and installation workflow.
- [MCP](/docs/mcp): Model Context Protocol setup for AI integrations.
- [Roadmap](/docs/roadmap): Upcoming product direction and priorities.
- [Changelog](/docs/changelog): Latest updates and version history.

## Base UI Components

- [Alert](/docs/components/base/alert): Contextual callouts for feedback and status.
- [Autocomplete](/docs/components/base/autocomplete): Searchable input with suggestion support.
- [Badge](/docs/components/base/badge): Status indicators and small labels.
- [Data Grid](/docs/components/base/data-grid): Advanced data table with sorting and filtering.
- [Date Selector](/docs/components/base/date-selector): Flexible date and range selection.
- [File Upload](/docs/components/base/file-upload): Drag-and-drop file uploading.
- [Filters](/docs/components/base/filters): Multi-facet filtering interface.
- [Frame](/docs/components/base/frame): Container with structure, header, and actions.
- [Kanban](/docs/components/base/kanban): Drag-and-drop board for task management.
- [Number Field](/docs/components/base/number-field): Specialized numeric input.
- [Phone Input](/docs/components/base/phone-input): International phone input.
- [Rating](/docs/components/base/rating): Interactive rating component.
- [Scrollspy](/docs/components/base/scrollspy): Navigation that tracks scroll position.
- [Sortable](/docs/components/base/sortable): Drag-and-drop list sorting.
- [Stepper](/docs/components/base/stepper): Multi-step process indicator.
- [Timeline](/docs/components/base/timeline): Chronological event display.
- [Tree](/docs/components/base/tree): Hierarchical data view.

## Radix UI Components

- [Alert](/docs/components/radix/alert): Contextual callouts for feedback and status.
- [Autocomplete](/docs/components/radix/autocomplete): Searchable input with suggestion support.
- [Badge](/docs/components/radix/badge): Status indicators and small labels.
- [Data Grid](/docs/components/radix/data-grid): Advanced data table with sorting and filtering.
- [Date Selector](/docs/components/radix/date-selector): Flexible date and range selection.
- [File Upload](/docs/components/radix/file-upload): Drag-and-drop file uploading.
- [Filters](/docs/components/radix/filters): Multi-facet filtering interface.
- [Frame](/docs/components/radix/frame): Container with structure, header, and actions.
- [Kanban](/docs/components/radix/kanban): Drag-and-drop board for task management.
- [Number Field](/docs/components/radix/number-field): Specialized numeric input.
- [Phone Input](/docs/components/radix/phone-input): International phone input.
- [Rating](/docs/components/radix/rating): Interactive rating component.
- [Scrollspy](/docs/components/radix/scrollspy): Navigation that tracks scroll position.
- [Sortable](/docs/components/radix/sortable): Drag-and-drop list sorting.
- [Stepper](/docs/components/radix/stepper): Multi-step process indicator.
- [Timeline](/docs/components/radix/timeline): Chronological event display.
- [Tree](/docs/components/radix/tree): Hierarchical data view.