# Fluid UI > Fluid UI is an open-source React component library providing styled UI primitives, customizable themes, and a fast CSS compilation workflow. > For the complete concatenated documentation in a single file, see [llms-full.txt](https://fluid.infinityfx.dev/llms-full.txt). ## Overview Fluid UI components are imported from `@infinityfx/fluid`. 1. **Provider & Setup**: Wrap your application root with ``. For SSR frameworks (like Next.js), pass `initialColorScheme` read from `COLOR_SCHEME_COOKIE` to prevent theme flash. 2. **Configuration**: Create a `fluid.config.js` file to configure scanned `paths`, theme palettes, fonts, custom `icons` (e.g. from `react-icons/lu`), and set `cssOutput: 'manual'` for frameworks with aggressive caching. 3. **Theming & Hooks**: Switch themes using the `useFluid` hook from `@infinityfx/fluid/hooks`. Create palette entries using `mixColors()` from `@infinityfx/fluid/utils`, or style instances using the `cc` prop. 4. **Compilation**: Run `npx fluid compile` (`npx fluid compile -d` for development) to compile component styles to CSS without runtime overhead. ## Key Links - [Full Documentation](https://fluid.infinityfx.dev/llms-full.txt): Complete documentation in a single plain text file. - [Getting Started](https://fluid.infinityfx.dev/docs/get-started): Installation, ``, and compilation guide. - [Configuration](https://fluid.infinityfx.dev/docs/configuration): Detailed guide on `fluid.config.js`, `paths`, `cssOutput`, and icon overrides. - [Theming](https://fluid.infinityfx.dev/docs/theming): Palettes, `mixColors()`, `useFluid()` hook, SSR cookie setup, and `cc` custom classes. - [Changelog](https://fluid.infinityfx.dev/docs/changelog): Version release notes and breaking changes. ## Component Reference ### Display Components - [Action Menu](https://fluid.infinityfx.dev/docs/components/action-menu): Displays a menu with actions or options. - [Annotation](https://fluid.infinityfx.dev/docs/components/annotation): Displays a label or error message for an input field. - [Badge](https://fluid.infinityfx.dev/docs/components/badge): A badge used for displaying attributes or small information snippets. - [Code](https://fluid.infinityfx.dev/docs/components/code): Displays formatted code. - [Combobox](https://fluid.infinityfx.dev/docs/components/combobox): Displays a list of selectable options that can be searched through. - [Empty](https://fluid.infinityfx.dev/docs/components/empty): Displays an empty state. - [Gradient](https://fluid.infinityfx.dev/docs/components/gradient): An easy beautiful gradient. - [Key](https://fluid.infinityfx.dev/docs/components/key): Displays a keyboard input. - [Swatch](https://fluid.infinityfx.dev/docs/components/swatch): Displays one or multiple colors. - [Table](https://fluid.infinityfx.dev/docs/components/table): A table displaying data. - [Ticker](https://fluid.infinityfx.dev/docs/components/ticker): Animated text/number display. - [Timeline](https://fluid.infinityfx.dev/docs/components/timeline): An ordered timeline of events. - [Toast](https://fluid.infinityfx.dev/docs/components/toast): Used to display a temporary message to a user. - [Tooltip](https://fluid.infinityfx.dev/docs/components/tooltip): Displays an information popup next to an element when that element is hovered or receives focus. ### Feedback Components - [Circular Progress](https://fluid.infinityfx.dev/docs/components/circular-progress): A circular indicator displaying the progress of something. - [Indicator](https://fluid.infinityfx.dev/docs/components/indicator): Displays an activity indicator at the corner of an element. - [Interactable](https://fluid.infinityfx.dev/docs/components/interactable): Displays a translucent overlay when an element is hovered over or has focus. - [Progress Bar](https://fluid.infinityfx.dev/docs/components/progress-bar): An indicator displaying the progress of something. - [Skeleton](https://fluid.infinityfx.dev/docs/components/skeleton): Used to show a placeholder while content is loading. - [Spinner](https://fluid.infinityfx.dev/docs/components/spinner): A spinning loading indicator. ### Input Components - [Autocomplete](https://fluid.infinityfx.dev/docs/components/autocomplete): A text input which shows autocomplete suggestions. - [Button](https://fluid.infinityfx.dev/docs/components/button): A button. - [Calendar](https://fluid.infinityfx.dev/docs/components/calendar): An input used for selecting a date. - [Checkbox](https://fluid.infinityfx.dev/docs/components/checkbox): An input that switches between a checked and unchecked state. - [Chip](https://fluid.infinityfx.dev/docs/components/chip): An input that switches between a selected and unselected state. - [Color Field](https://fluid.infinityfx.dev/docs/components/color-field): An input field which displays a color picker. - [Color Picker](https://fluid.infinityfx.dev/docs/components/color-picker): An input used for picking a color. - [Date Field](https://fluid.infinityfx.dev/docs/components/date-field): An input used for entering dates. - [Dial](https://fluid.infinityfx.dev/docs/components/dial): An infinite circular number input. - [Drop Zone](https://fluid.infinityfx.dev/docs/components/drop-zone): An input that allows for drag and dropping files. - [Field](https://fluid.infinityfx.dev/docs/components/field): An input used for entering text based information. - [File Field](https://fluid.infinityfx.dev/docs/components/file-field): An input used for selecting files. - [Hamburger](https://fluid.infinityfx.dev/docs/components/hamburger): A button which switches between an open and closed state. - [Number Field](https://fluid.infinityfx.dev/docs/components/number-field): An input used for entering numerical values. - [Password Field](https://fluid.infinityfx.dev/docs/components/password-field): An input used for entering passwords. - [Pincode](https://fluid.infinityfx.dev/docs/components/pincode): An input used for entering numerical codes. - [Radio](https://fluid.infinityfx.dev/docs/components/radio): A selectable input, of which 1 must be selected at all times within a group. - [Segmented](https://fluid.infinityfx.dev/docs/components/segmented): An input with multiple options of which only 1 can be selected at a time. - [Select](https://fluid.infinityfx.dev/docs/components/select): Displays a list of selectable options. - [Slider](https://fluid.infinityfx.dev/docs/components/slider): An input that allows for selecting 1 or multiple values from a given range. - [Switch](https://fluid.infinityfx.dev/docs/components/switch): An input that switches between an on and off state. - [Textarea](https://fluid.infinityfx.dev/docs/components/textarea): A form textarea. - [Theme Toggle](https://fluid.infinityfx.dev/docs/components/theme-toggle): A toggle button which switches between a light and dark color theme. - [Time Field](https://fluid.infinityfx.dev/docs/components/time-field): An input used for entering numerical values. - [Toggle](https://fluid.infinityfx.dev/docs/components/toggle): A button which cycles between 2 or more states. ### Layout Components - [Accordion](https://fluid.infinityfx.dev/docs/components/accordion): A vertical list of collapsible sections that can be opened and closed. - [Card](https://fluid.infinityfx.dev/docs/components/card): A versatile composable container component. - [Collapsible](https://fluid.infinityfx.dev/docs/components/collapsible): An animated container which can hide its contents. - [Cull](https://fluid.infinityfx.dev/docs/components/cull): Hides an element from the page for selected screen sizes. - [Divider](https://fluid.infinityfx.dev/docs/components/divider): A divider. - [Drawer](https://fluid.infinityfx.dev/docs/components/drawer): Displays a container with content overlayed onto the side of the page. - [Group](https://fluid.infinityfx.dev/docs/components/group): Merges multiple toggle, button or field inputs. - [Modal](https://fluid.infinityfx.dev/docs/components/modal): Displays a container with content overlayed onto the page. - [Overlay](https://fluid.infinityfx.dev/docs/components/overlay): Displays content overlayed onto the page. - [Panel](https://fluid.infinityfx.dev/docs/components/panel): Resizable panels. - [Popover](https://fluid.infinityfx.dev/docs/components/popover): Displays a popup with content when a trigger is clicked. - [Scrollarea](https://fluid.infinityfx.dev/docs/components/scrollarea): A scrollable container. - [Sidebar](https://fluid.infinityfx.dev/docs/components/sidebar): A collapsible sidebar. ### Navigation Components - [Navigation Menu](https://fluid.infinityfx.dev/docs/components/navigation-menu): A horizontal tree of links used for navigation. - [Pagination](https://fluid.infinityfx.dev/docs/components/pagination): A set of inputs used for navigation between pages. - [Stepper](https://fluid.infinityfx.dev/docs/components/stepper): An ordered list of completable steps. - [Tabs](https://fluid.infinityfx.dev/docs/components/tabs): An input with multiple options of which only 1 can be selected at a time.