# Fulldev UI for React

> Components, the official shadcn/ui examples and page blocks, installed as source through a shadcn registry in every shadcn/ui style.

- React: set the `@fulldev` registry in `components.json` to `https://ui.full.dev/r/react/styles/{style}/{name}.json`, then `npx shadcn@latest add @fulldev/<name>`; examples install as `@fulldev/<component>-examples`. Setup: https://ui.full.dev/react/docs/installation.md
- Every page has a Markdown version: add `.md` to the page URL.
- [Full documentation in one file](https://ui.full.dev/react/llms-full.txt)

## Overview

- [React](https://ui.full.dev/react.md): Fulldev UI for React. The official shadcn/ui Base UI components, the Fulldev components and every block, as .tsx files.
- [Blocks](https://ui.full.dev/react/blocks.md): Full-width React page sections.
- [Components](https://ui.full.dev/react/components.md): Browse installable Fulldev UI components for React.
- [Docs](https://ui.full.dev/react/docs.md): Install and set up Fulldev UI for React.

## React Blocks

- [Article](https://ui.full.dev/react/blocks/article.md): Editorial article layouts for long-form stories, interviews, and analysis.
- [Articles](https://ui.full.dev/react/blocks/articles.md): Collection and listing layouts for journals, magazines, and editorial feeds.
- [Banner](https://ui.full.dev/react/blocks/banner.md): Announcement and promo bars that sit above or inside page content.
- [Blocks](https://ui.full.dev/react/blocks/blocks.md): The header of a block catalog page, with Copy Markdown and open-in links.
- [Contact](https://ui.full.dev/react/blocks/contact.md): Contact sections for project inquiries, support, and sales conversations.
- [Content](https://ui.full.dev/react/blocks/content.md): Flexible narrative content sections for explainers, comparisons, and supporting context.
- [Cta](https://ui.full.dev/react/blocks/cta.md): Call-to-action sections that close pages, bridge sections, or reinforce a launch moment.
- [Doc](https://ui.full.dev/react/blocks/doc.md): Documentation page shells for component pages with content, table of contents, and contextual links.
- [Faqs](https://ui.full.dev/react/blocks/faqs.md): FAQ sections for product pages, launches, and documentation support content.
- [Features](https://ui.full.dev/react/blocks/features.md): Feature section layouts for product narratives, launch pages, and capability overviews.
- [Footer](https://ui.full.dev/react/blocks/footer.md): Footer layouts for utility navigation, brand presence, and last-mile calls to action.
- [Header](https://ui.full.dev/react/blocks/header.md): Header layouts for brand, navigation, and high-level page actions.
- [Hero](https://ui.full.dev/react/blocks/hero.md): Hero sections for launches, product storytelling, editorial pages, and social proof.
- [Links](https://ui.full.dev/react/blocks/links.md): Link grid blocks for presenting related pages, components, or resources.
- [Logos](https://ui.full.dev/react/blocks/logos.md): Logo sections for trust, partner strips, and quiet social proof.
- [Pricing](https://ui.full.dev/react/blocks/pricing.md): Pricing sections for plan grids, featured offers, and concise offer presentation.
- [Product](https://ui.full.dev/react/blocks/product.md): A focused product section for flagship offers and compact product storytelling.
- [Products](https://ui.full.dev/react/blocks/products.md): Product collection layouts for bundles, grouped offers, and category-led merchandising.
- [Reviews](https://ui.full.dev/react/blocks/reviews.md): Testimonial and review sections for social proof, trust, and product validation.
- [Services](https://ui.full.dev/react/blocks/services.md): Service section layouts for agencies, consultancies, and internal platform teams.
- [Sidebar](https://ui.full.dev/react/blocks/sidebar.md): A docs shell with a sidebar, search, breadcrumb and theme toggle.

## React Components

- [Accordion](https://ui.full.dev/react/components/accordion.md): A vertically stacked set of interactive headings that each reveal a section of content.
- [Alert](https://ui.full.dev/react/components/alert.md): Displays a callout for user attention.
- [Alert Dialog](https://ui.full.dev/react/components/alert-dialog.md): A modal dialog that interrupts the user with important content and expects a response.
- [Aspect Ratio](https://ui.full.dev/react/components/aspect-ratio.md): Displays content within a desired ratio.
- [Attachment](https://ui.full.dev/react/components/attachment.md): Displays a file or image attachment with media, metadata, upload state, and actions.
- [Avatar](https://ui.full.dev/react/components/avatar.md): An image element with a fallback for representing the user.
- [Badge](https://ui.full.dev/react/components/badge.md): Displays a badge or a component that looks like a badge.
- [Banner](https://ui.full.dev/react/components/banner.md): A full-width container for important messages or announcements.
- [Breadcrumb](https://ui.full.dev/react/components/breadcrumb.md): Displays the path to the current resource using a hierarchy of links.
- [Bubble](https://ui.full.dev/react/components/bubble.md): Displays conversational content in a message bubble. Supports variants, alignment, grouping, reactions, and collapsible content.
- [Button](https://ui.full.dev/react/components/button.md): Displays a button or a component that looks like a button.
- [Button Group](https://ui.full.dev/react/components/button-group.md): A container that groups related buttons together with consistent styling.
- [Calendar](https://ui.full.dev/react/components/calendar.md): A calendar component that allows users to select a date or a range of dates.
- [Card](https://ui.full.dev/react/components/card.md): Displays a card with header, content, and footer.
- [Carousel](https://ui.full.dev/react/components/carousel.md): A carousel with motion and swipe built using Embla.
- [Chart](https://ui.full.dev/react/components/chart.md): Beautiful charts. Built using Recharts. Copy and paste into your apps.
- [Checkbox](https://ui.full.dev/react/components/checkbox.md): A control that allows the user to toggle between checked and not checked.
- [Collapsible](https://ui.full.dev/react/components/collapsible.md): An interactive component which expands/collapses a panel.
- [Combobox](https://ui.full.dev/react/components/combobox.md): Autocomplete input with a list of suggestions.
- [Command](https://ui.full.dev/react/components/command.md): Command menu for search and quick actions.
- [Context Menu](https://ui.full.dev/react/components/context-menu.md): Displays a menu of actions triggered by a right click.
- [Data Table](https://ui.full.dev/react/components/data-table.md): Powerful table and datagrids built using TanStack Table.
- [Date Picker](https://ui.full.dev/react/components/date-picker.md): A date picker component with range and presets.
- [Dialog](https://ui.full.dev/react/components/dialog.md): A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
- [Direction](https://ui.full.dev/react/components/direction.md): A provider component that sets the text direction for your application.
- [Drawer](https://ui.full.dev/react/components/drawer.md): A drawer component for React.
- [Dropdown Menu](https://ui.full.dev/react/components/dropdown-menu.md): Displays a menu to the user, such as a set of actions or functions, triggered by a button.
- [Empty](https://ui.full.dev/react/components/empty.md): Use the Empty component to display an empty state.
- [Field](https://ui.full.dev/react/components/field.md): Combine labels, controls, and help text to compose accessible form fields and grouped inputs.
- [Form](https://ui.full.dev/react/components/form.md): A form wrapper with vertical spacing for the field components.
- [Header](https://ui.full.dev/react/components/header.md): A responsive site header with grouped content.
- [Hover Card](https://ui.full.dev/react/components/hover-card.md): For sighted users to preview content available behind a link.
- [Icon](https://ui.full.dev/react/components/icon.md): Renders a Lucide icon or a social brand logo by name, or the icon for a link.
- [Input](https://ui.full.dev/react/components/input.md): A text input component for forms and user data entry with built-in styling and accessibility features.
- [Input Group](https://ui.full.dev/react/components/input-group.md): Add addons, buttons, and helper content to inputs.
- [Input OTP](https://ui.full.dev/react/components/input-otp.md): Accessible one-time password component with copy-paste functionality.
- [Item](https://ui.full.dev/react/components/item.md): A versatile component for displaying content with media, title, description, and actions.
- [Kbd](https://ui.full.dev/react/components/kbd.md): Used to display textual user input from keyboard.
- [Label](https://ui.full.dev/react/components/label.md): Renders an accessible label associated with controls.
- [Layout](https://ui.full.dev/react/components/layout.md): Page-shell primitives for the root html, head, body, and main structure.
- [Logo](https://ui.full.dev/react/components/logo.md): A component for displaying a brand logo.
- [Marker](https://ui.full.dev/react/components/marker.md): Displays an inline status, system note, bordered row, or labeled separator in a conversation.
- [Marquee](https://ui.full.dev/react/components/marquee.md): A continuously scrolling row of content, with a pause control and a static fallback.
- [Menubar](https://ui.full.dev/react/components/menubar.md): A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
- [Message](https://ui.full.dev/react/components/message.md): Displays a message in a conversation, with optional avatar, header, footer, and alignment.
- [Message Scroller](https://ui.full.dev/react/components/message-scroller.md): A chat scroll container that anchors turns, opens saved transcripts, follows streamed responses, loads history without jumping, and jumps to any message.
- [Native Select](https://ui.full.dev/react/components/native-select.md): A styled native HTML select element with consistent design system integration.
- [Navigation Menu](https://ui.full.dev/react/components/navigation-menu.md): A collection of links for navigating websites.
- [Pagination](https://ui.full.dev/react/components/pagination.md): Pagination with page navigation, next and previous links.
- [Popover](https://ui.full.dev/react/components/popover.md): Displays rich content in a portal, triggered by a button.
- [Price](https://ui.full.dev/react/components/price.md): A flexible price display component for showing pricing information.
- [Progress](https://ui.full.dev/react/components/progress.md): Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
- [Questionnaire](https://ui.full.dev/react/components/questionnaire.md): A multi-step questionnaire with single-choice, multiple-choice, freeform, and skippable questions.
- [Radio Group](https://ui.full.dev/react/components/radio-group.md): A set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time.
- [Rating](https://ui.full.dev/react/components/rating.md): A star rating component for displaying ratings visually.
- [Resizable](https://ui.full.dev/react/components/resizable.md): Accessible resizable panel groups and layouts with keyboard support.
- [Scroll Area](https://ui.full.dev/react/components/scroll-area.md): Augments native scroll functionality for custom, cross-browser styling.
- [Section](https://ui.full.dev/react/components/section.md): A layout component for organizing page content into sections.
- [Select](https://ui.full.dev/react/components/select.md): Displays a list of options for the user to pick from, triggered by a button.
- [Separator](https://ui.full.dev/react/components/separator.md): Visually or semantically separates content.
- [Sheet](https://ui.full.dev/react/components/sheet.md): Extends the Dialog component to display content that complements the main content of the screen.
- [Sidebar](https://ui.full.dev/react/components/sidebar.md): A composable, themeable and customizable sidebar component.
- [Skeleton](https://ui.full.dev/react/components/skeleton.md): Use to show a placeholder while content is loading.
- [Slider](https://ui.full.dev/react/components/slider.md): An input where the user selects a value from within a given range.
- [Sonner](https://ui.full.dev/react/components/sonner.md): Toast notifications with Sonner, themed with the site tokens.
- [Spinner](https://ui.full.dev/react/components/spinner.md): An indicator that can be used to show a loading state.
- [Switch](https://ui.full.dev/react/components/switch.md): A control that allows the user to toggle between checked and not checked.
- [Table](https://ui.full.dev/react/components/table.md): A responsive table component.
- [Tabs](https://ui.full.dev/react/components/tabs.md): A set of layered sections of content, known as tab panels, that are displayed one at a time.
- [Textarea](https://ui.full.dev/react/components/textarea.md): Displays a form textarea or a component that looks like a textarea.
- [Theme Toggle](https://ui.full.dev/react/components/theme-toggle.md): A two-state theme toggle that switches immediately between light and dark mode.
- [Toast](https://ui.full.dev/react/components/toast.md): A succinct message that is displayed temporarily.
- [Toc](https://ui.full.dev/react/components/toc.md): Displays a simple table of contents for page sections and subsections.
- [Toggle](https://ui.full.dev/react/components/toggle.md): A two-state button that can be either on or off.
- [Toggle Group](https://ui.full.dev/react/components/toggle-group.md): A set of two-state buttons that can be toggled on or off.
- [Tooltip](https://ui.full.dev/react/components/tooltip.md): A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
- [Typography](https://ui.full.dev/react/components/typography.md): Automatic prose styling and semantic text primitives for documentation and content-heavy interfaces.
- [Video](https://ui.full.dev/react/components/video.md): A responsive video component that supports YouTube videos and shorts.

## React Docs

- [Installation](https://ui.full.dev/react/docs/installation.md): Install Fulldev UI for React.
- [Introduction](https://ui.full.dev/react/docs/introduction.md): The shadcn/ui Base UI components, Fulldev components and blocks for React, through a shadcn registry.