# Bolio UI

> Amazing, modern and creative tools for React UI. Docs for @bolio-ui/core, with the complete text in https://bolio-ui.com/llms-full.txt, https://bolio-ui.com/llms-components.txt (components and hooks) and https://bolio-ui.com/llms-guide.txt (guides).

## Guide

- [About Bolio UI](https://bolio-ui.com/md/guide/about-bolio-ui): Bolio UI is a dedicated library designed to enhance both user and developer experiences.
- [Agent Skills](https://bolio-ui.com/md/guide/agent-skills): Teach AI assistants to build interfaces with Bolio UI components, setup and theming using the Bolio UI Skill.
- [AGENTS.md](https://bolio-ui.com/md/guide/agents-md): Add the Bolio UI docs to the AGENTS.md of your project, so AI coding agents read them before writing UI code.
- [Example with Astro](https://bolio-ui.com/md/guide/bolio-ui-plus-astro): Set up Bolio UI in an Astro application.
- [Example with Gatsby](https://bolio-ui.com/md/guide/bolio-ui-plus-gatsby): Set up Bolio UI in a Gatsby application.
- [Example with Next.js](https://bolio-ui.com/md/guide/bolio-ui-plus-nextjs): Bolio UI is totally compatible with Next.js you just need to customize the _app.jsx entry file to load the provider.
- [Example with RedwoodJS](https://bolio-ui.com/md/guide/bolio-ui-plus-redwoodjs): Set up Bolio UI in a RedwoodJS application.
- [Example with RedwoodSDK](https://bolio-ui.com/md/guide/bolio-ui-plus-redwoodsdk): Set up Bolio UI in a RedwoodSDK application.
- [Example with Remix](https://bolio-ui.com/md/guide/bolio-ui-plus-remix): Set up Bolio UI in a Remix application.
- [Example with TanStack Start](https://bolio-ui.com/md/guide/bolio-ui-plus-tanstack-start): Set up Bolio UI in a TanStack Start application.
- [Example with Vite](https://bolio-ui.com/md/guide/bolio-ui-plus-vite): Set up Bolio UI in a Vite application.
- [Example with Waku](https://bolio-ui.com/md/guide/bolio-ui-plus-waku): Set up Bolio UI in a Waku application.
- [Contribute](https://bolio-ui.com/md/guide/contribute): Ways to contribute to Bolio UI, from documentation to code.
- [Customize Themes](https://bolio-ui.com/md/guide/customize-themes): Support a variety of themes, and it is very easy to create or inherit modifications.
- [Default Theme](https://bolio-ui.com/md/guide/default-theme): You can use any color anywhere, all colors change with the theme.
- [Getting Started](https://bolio-ui.com/md/guide/getting-started): Welcome to the Bolio UI documentation! Bolio UI allows you to make beautiful, modern, and fast websites/applications regardless of your design experience.
- [LLMs.txt](https://bolio-ui.com/md/guide/llms-txt): Enable AI assistants like Claude Code, Cursor and Windsurf to understand Bolio UI, with the docs published as Markdown.
- [MCP Server](https://bolio-ui.com/md/guide/mcp-server): Access the Bolio UI documentation directly in your AI assistant, with the Bolio UI MCP Server.
- [Migrating to v3](https://bolio-ui.com/md/guide/migration-v2-to-v3): What changes in v3 and what to do about it, coming from v1 or from a v2 alpha.
- [Page structure](https://bolio-ui.com/md/guide/page-structure): Build the layout of a page with Section, Container, Row and Col.
- [Refs and accessibility](https://bolio-ui.com/md/guide/refs-and-accessibility): How refs work in every component and how to make controls accessible.

## Components

- [Alert](https://bolio-ui.com/md/components/alert): Show a message that stays in the page, with an optional title, icon and close button.
- [Avatar](https://bolio-ui.com/md/components/avatar): Avatars represent a user or a team. Stacked avatars represent a group of people.
- [Badge](https://bolio-ui.com/md/components/badge): Display an indicator that requires attention.
- [Breadcrumbs](https://bolio-ui.com/md/components/breadcrumbs): Show where users are in the application.
- [Button Dropdown](https://bolio-ui.com/md/components/button-dropdown): Display related but alternate actions for a button.
- [Button Group](https://bolio-ui.com/md/components/button-group): A set of related buttons.
- [Button](https://bolio-ui.com/md/components/button): A set of related buttons.
- [Calendar](https://bolio-ui.com/md/components/calendar): A month grid to pick a day with the mouse or the keyboard.
- [Capacity](https://bolio-ui.com/md/components/capacity): Display an capacity indicator.
- [Card](https://bolio-ui.com/md/components/card): A common container component.
- [Carousel](https://bolio-ui.com/md/components/carousel): A row of slides that scrolls and snaps, with buttons and dots to move between them.
- [Checkbox](https://bolio-ui.com/md/components/checkbox): Displays a boolean value.
- [Chip](https://bolio-ui.com/md/components/chip): Pick options from a row of pills, one or several at a time.
- [Code](https://bolio-ui.com/md/components/code): Show source code in a standardized way.
- [Col](https://bolio-ui.com/md/components/col): A column inside a Row, sized in twelfths.
- [Collapse](https://bolio-ui.com/md/components/collapse): Display large amounts of text in collapsible sections. Commonly referred to as an accordion.
- [Color Input](https://bolio-ui.com/md/components/color-input): A field for a hex color, with a swatch that opens a color picker in a popover.
- [Color Picker](https://bolio-ui.com/md/components/color-picker): A panel to pick a color by saturation, brightness and hue, with a hex field and optional swatches.
- [Combobox](https://bolio-ui.com/md/components/combobox): An input that filters a list of options while you type and lets you pick one.
- [Command](https://bolio-ui.com/md/components/command): A searchable list of actions, opened with a shortcut.
- [Container](https://bolio-ui.com/md/components/container): Limit the width of the page and center its content.
- [Context Menu](https://bolio-ui.com/md/components/context-menu): A menu of actions that opens at the pointer when the user right clicks an area.
- [DatePicker](https://bolio-ui.com/md/components/date-picker): An input to type a date, with a calendar to pick it.
- [DateRangePicker](https://bolio-ui.com/md/components/date-range-picker): Two inputs to type a start and an end date, with one calendar to pick the range.
- [Description](https://bolio-ui.com/md/components/description): Display brief information with a title and description.
- [Display](https://bolio-ui.com/md/components/display): To display important information or images in a central alignment.
- [Divider](https://bolio-ui.com/md/components/divider): A divider line separates different content.
- [Dot](https://bolio-ui.com/md/components/dot): Display an indicator of standardization status.
- [Drawer](https://bolio-ui.com/md/components/drawer): An interactive element fixed to the edge of the screen.
- [Dropzone](https://bolio-ui.com/md/components/dropzone): An area to drop files or click to choose them, with limits for type, size and number.
- [Empty State](https://bolio-ui.com/md/components/empty-state): Explain an empty area and how to leave it.
- [Fieldset](https://bolio-ui.com/md/components/fieldset): Display a collection of related information in a single unit.
- [Grid](https://bolio-ui.com/md/components/grid): Powerful fluid style layout container.
- [Icons](https://bolio-ui.com/md/components/icons): Display semantic vector graphics in SVG format.
- [Image Zoom](https://bolio-ui.com/md/components/image-zoom): A picture that opens in a larger view above the page when it is clicked.
- [Image](https://bolio-ui.com/md/components/image): Display image content.
- [Input](https://bolio-ui.com/md/components/input): Retrieve text input from a user.
- [Keyboard](https://bolio-ui.com/md/components/keyboard): Display keyboard input that triggers an action.
- [Link](https://bolio-ui.com/md/components/link): Hyperlinks between pages.
- [Loading](https://bolio-ui.com/md/components/loading): Indicate an action running in the background.
- [Marquee](https://bolio-ui.com/md/components/marquee): Loop content horizontally without end.
- [Mention](https://bolio-ui.com/md/components/mention): Type a trigger character in a text field to pick a person, a tag or a command from a list.
- [Menu](https://bolio-ui.com/md/components/menu): A list of actions that opens from a button, with submenus, checkbox and radio items and keyboard support.
- [Modal](https://bolio-ui.com/md/components/modal): Display popup content that requires attention or provides additional information.
- [Note](https://bolio-ui.com/md/components/note): Display text that requires attention or provides additional information.
- [Number Input](https://bolio-ui.com/md/components/number-input): A field for numbers, with buttons and arrow keys to step the value and limits it stays within.
- [Overview](https://bolio-ui.com/md/components/overview): Browse every Bolio UI component, grouped by what it does.
- [Page](https://bolio-ui.com/md/components/page): Container of general for display page content.
- [Pagination](https://bolio-ui.com/md/components/pagination): Navigation and identification between multiple pages.
- [Pin Input](https://bolio-ui.com/md/components/pin-input): A row of boxes to type a short code, like a verification code or a PIN.
- [Popover](https://bolio-ui.com/md/components/popover): The floating box popped by clicking or hovering.
- [Progress](https://bolio-ui.com/md/components/progress): Display progress relative to a limit or related to a task.
- [Radio](https://bolio-ui.com/md/components/radio): Provides single user input from a selection of options.
- [Rating](https://bolio-ui.com/md/components/rating): Pick or show a score with stars or any other icon.
- [Row](https://bolio-ui.com/md/components/row): A flex row that holds columns.
- [Section](https://bolio-ui.com/md/components/section): A band of the page, with an optional background.
- [Segmented Control](https://bolio-ui.com/md/components/segmented-control): A row of options where exactly one is selected, for switching a view or a setting in place.
- [Select](https://bolio-ui.com/md/components/select): Display a dropdown list of items.
- [Skeleton](https://bolio-ui.com/md/components/skeleton): A placeholder in the shape of the content while it loads, so the layout does not jump.
- [Slider](https://bolio-ui.com/md/components/slider): Display the current value and an inputable range.
- [Snippet](https://bolio-ui.com/md/components/snippet): Display a snippet of copyable code for the command line.
- [Spacer](https://bolio-ui.com/md/components/spacer): Provide empty space.
- [Spinner](https://bolio-ui.com/md/components/spinner): Indicate an action running in the background.
- [Splitter](https://bolio-ui.com/md/components/splitter): Panels that share a space, with a line between them that the user drags to resize them.
- [Stat](https://bolio-ui.com/md/components/stat): Show a number with its label and trend.
- [Stepper](https://bolio-ui.com/md/components/stepper): Shows the steps of a flow and which one the user is on, like a checkout or a signup.
- [Table](https://bolio-ui.com/md/components/table): Display tabular data in format.
- [Tabs](https://bolio-ui.com/md/components/tabs): Display tab content.
- [Tag](https://bolio-ui.com/md/components/tag): Display a unique keyword, optionally as a part of a set.
- [Tags Input](https://bolio-ui.com/md/components/tags-input): A field where each entry becomes a tag, for lists like skills, topics or email addresses.
- [Text](https://bolio-ui.com/md/components/text): Display text using well-defined typographic styles.
- [Textarea](https://bolio-ui.com/md/components/textarea): Retrieve multi-line user input.
- [Timeline](https://bolio-ui.com/md/components/timeline): List events in order, such as a changelog or an activity feed.
- [Toggle](https://bolio-ui.com/md/components/toggle): Displays a boolean value.
- [Toolbar](https://bolio-ui.com/md/components/toolbar): Group related controls in one tab stop and move between them with the arrow keys.
- [Tooltip](https://bolio-ui.com/md/components/tooltip): Displays additional information on hover.
- [Tour](https://bolio-ui.com/md/components/tour): A guided walk through a page: each step highlights an element and explains it.
- [Tree](https://bolio-ui.com/md/components/tree): A list of nodes that open to show their children, for files, categories or any nested data.

## Hooks

- [useBodyScroll](https://bolio-ui.com/md/hooks/use-body-scroll): Disable scrolling behavior for body or any element, it is useful for displaying popup element or menus.
- [useClasses](https://bolio-ui.com/md/hooks/use-classes): Technically, this is not a hooks, it just uses the nomenclature of hooks as well.
- [useClickAway](https://bolio-ui.com/md/hooks/use-click-away): Detect if a click event happened outside an element.
- [useClipboard](https://bolio-ui.com/md/hooks/use-clipboard): Copy string to clipboard.
- [useCollapse](https://bolio-ui.com/md/hooks/use-collapse): Animate the height of an element when it opens and closes.
- [useColorScheme](https://bolio-ui.com/md/hooks/use-color-scheme): Detect the color scheme of the system, light or dark.
- [useCounter](https://bolio-ui.com/md/hooks/use-counter): Keep a number with increment, decrement, set and reset handlers, optionally clamped to a range.
- [useCurrentState](https://bolio-ui.com/md/hooks/use-current-state): Get the latest value in functional component. By default, `state` in a React function component can only get the value at render time, not the latest.
- [useDebouncedCallback](https://bolio-ui.com/md/hooks/use-debounced-callback): Create a function that runs only after it stops being called for the given time.
- [useDebouncedState](https://bolio-ui.com/md/hooks/use-debounced-state): Keep a state whose updates are applied only after the user stops changing it.
- [useDebouncedValue](https://bolio-ui.com/md/hooks/use-debounced-value): Delay a value until it stops changing for the given time.
- [useDidUpdate](https://bolio-ui.com/md/hooks/use-did-update): Run an effect only when the dependencies change, not on the first render.
- [useDisclosure](https://bolio-ui.com/md/hooks/use-disclosure): Control the open state of a modal, drawer or any other disclosure, with optional callbacks.
- [useDocumentTitle](https://bolio-ui.com/md/hooks/use-document-title): Set the title of the page and update it when the value changes.
- [useDocumentVisibility](https://bolio-ui.com/md/hooks/use-document-visibility): Detect when the tab is visible or hidden.
- [useDrag](https://bolio-ui.com/md/hooks/use-drag): Drag an element with the pointer and read how far it moved.
- [useElementSize](https://bolio-ui.com/md/hooks/use-element-size): Get the width and height of an element and keep them updated.
- [useEventListener](https://bolio-ui.com/md/hooks/use-event-listener): Attach an event listener to an element and remove it when the component unmounts.
- [useEyeDropper](https://bolio-ui.com/md/hooks/use-eye-dropper): Pick a color from anywhere on the screen with the EyeDropper API.
- [useFavicon](https://bolio-ui.com/md/hooks/use-favicon): Set the favicon of the page and update it when the value changes.
- [useFetch](https://bolio-ui.com/md/hooks/use-fetch): Request data with fetch and get the loading state, the error and a way to refetch or abort.
- [useFileDialog](https://bolio-ui.com/md/hooks/use-file-dialog): Open the file dialog of the browser from any element and get the chosen files.
- [useFloatingWindow](https://bolio-ui.com/md/hooks/use-floating-window): Build a floating window that the user drags by a handle and that stays inside the viewport.
- [useFocusReturn](https://bolio-ui.com/md/hooks/use-focus-return): Return the focus to the element that had it before something opened, such as a modal.
- [useFocusTrap](https://bolio-ui.com/md/hooks/use-focus-trap): Keep the focus inside an element while it is active, cycling with Tab.
- [useFocusWithin](https://bolio-ui.com/md/hooks/use-focus-within): Detect when the focus is inside an element or any of its children.
- [useForceUpdate](https://bolio-ui.com/md/hooks/use-force-update): Get a function that renders the component again.
- [useFullscreen](https://bolio-ui.com/md/hooks/use-fullscreen): Put an element, or the whole page, in fullscreen.
- [useHash](https://bolio-ui.com/md/hooks/use-hash): Read and set the hash of the URL and keep it updated.
- [useHeadroom](https://bolio-ui.com/md/hooks/use-headroom): Know when a fixed header should show or hide, based on the scroll direction.
- [useHover](https://bolio-ui.com/md/hooks/use-hover): Detect when the pointer is over an element.
- [useIdle](https://bolio-ui.com/md/hooks/use-idle): Detect when the user has not interacted with the page for a while.
- [useInViewport](https://bolio-ui.com/md/hooks/use-in-viewport): Detect whether an element is visible in the viewport.
- [useInputState](https://bolio-ui.com/md/hooks/use-input-state): Keep the value of an input in state, accepting the change event or a value.
- [useInput](https://bolio-ui.com/md/hooks/use-input): Provides automatic binding for component, which can reduce the amount of repetitive code and improve the development experience.
- [useIntersection](https://bolio-ui.com/md/hooks/use-intersection): Observe how much of an element is visible with an IntersectionObserver.
- [useInterval](https://bolio-ui.com/md/hooks/use-interval): Run a function on an interval that you can start and stop.
- [useIsFirstRender](https://bolio-ui.com/md/hooks/use-is-first-render): Know whether the component is rendering for the first time.
- [useIsomorphicEffect](https://bolio-ui.com/md/hooks/use-isomorphic-effect): Use useLayoutEffect in the browser and useEffect on the server, without the warning.
- [useKeyboard](https://bolio-ui.com/md/hooks/use-keyboard): React hooks for listen to multiple keyboard events.
- [useListState](https://bolio-ui.com/md/hooks/use-list-state): Keep an array in state with handlers to append, insert, remove, reorder and filter items.
- [useLocalStorage](https://bolio-ui.com/md/hooks/use-local-storage): Keep a value in localStorage, in sync across components and tabs, safe for server rendering.
- [useLogger](https://bolio-ui.com/md/hooks/use-logger): Log the mount, the updates and the unmount of a component with its props, for debugging.
- [useLongPress](https://bolio-ui.com/md/hooks/use-long-press): Run a callback when an element is pressed and held, with mouse or touch.
- [useMap](https://bolio-ui.com/md/hooks/use-map): Keep a Map in state that renders again when it changes.
- [useMask](https://bolio-ui.com/md/hooks/use-mask): Format the value of an input with a mask, such as a phone number or a date.
- [useMediaQuery](https://bolio-ui.com/md/hooks/use-media-query): CSS media query hooks, it is implemented through the `MediaQuery` API.
- [useMergedRef](https://bolio-ui.com/md/hooks/use-merged-ref): Merge several refs, callback or object, into one.
- [useModal](https://bolio-ui.com/md/hooks/use-modal): Provides automatic binding for component, which can reduce the amount of repetitive code and improve the development experience.
- [useMounted](https://bolio-ui.com/md/hooks/use-mounted): Know whether the component has mounted in the browser.
- [useMouse](https://bolio-ui.com/md/hooks/use-mouse): Track the position of the mouse, in the page or relative to an element.
- [useMove](https://bolio-ui.com/md/hooks/use-move): Track the position of the pointer inside an element as a value between 0 and 1.
- [useMutationObserver](https://bolio-ui.com/md/hooks/use-mutation-observer): Observe changes in the attributes, children or text of an element.
- [useNetwork](https://bolio-ui.com/md/hooks/use-network): Read the state of the connection and know when it goes online or offline.
- [useOrientation](https://bolio-ui.com/md/hooks/use-orientation): Read the orientation of the screen, portrait or landscape, and its angle.
- [useOs](https://bolio-ui.com/md/hooks/use-os): Detect the operating system of the user.
- [usePageLeave](https://bolio-ui.com/md/hooks/use-page-leave): Run a callback when the mouse leaves the page.
- [usePagination](https://bolio-ui.com/md/hooks/use-pagination): Compute the page numbers and the handlers of a pagination, with dots when there are many pages.
- [usePrevious](https://bolio-ui.com/md/hooks/use-previous): Get the value a variable had on the previous render.
- [useQueue](https://bolio-ui.com/md/hooks/use-queue): Show a limited number of items at once and keep the rest waiting in a queue.
- [useRadialMove](https://bolio-ui.com/md/hooks/use-radial-move): Track the angle of the pointer around the center of an element, from 0 to 360 degrees.
- [useReducedMotion](https://bolio-ui.com/md/hooks/use-reduced-motion): Detect when the user asks the system to reduce motion.
- [useResizeObserver](https://bolio-ui.com/md/hooks/use-resize-observer): Observe the size and position of an element with a ResizeObserver.
- [useRovingIndex](https://bolio-ui.com/md/hooks/use-roving-index): Move the focus between the items of a list with the arrow keys, keeping one tab stop.
- [useScale](https://bolio-ui.com/md/hooks/use-scale): Remember the elastic scaling feature mentioned in the subsection, which gave the Bolio UI components amazing imagination and extensibility.
- [useScrollDirection](https://bolio-ui.com/md/hooks/use-scroll-direction): Know whether the page is being scrolled up or down.
- [useScrollIntoView](https://bolio-ui.com/md/hooks/use-scroll-into-view): Scroll smoothly to an element, in the page or inside a container.
- [useScrollSpy](https://bolio-ui.com/md/hooks/use-scroll-spy): Highlight the heading that is visible while the page is scrolled, for a table of contents.
- [useScroller](https://bolio-ui.com/md/hooks/use-scroller): Know whether a scrollable row can scroll further and scroll it by a step, for carousels and tab lists.
- [useSelection](https://bolio-ui.com/md/hooks/use-selection): Select items of a list, one by one or all at once, and know which are selected.
- [useSetState](https://bolio-ui.com/md/hooks/use-set-state): Keep an object in state and update it with partial changes, like the setState of a class component.
- [useSet](https://bolio-ui.com/md/hooks/use-set): Keep a Set in state that renders again when it changes.
- [useShallowEffect](https://bolio-ui.com/md/hooks/use-shallow-effect): Run an effect when the dependencies change, comparing objects and arrays by their contents.
- [useSplitter](https://bolio-ui.com/md/hooks/use-splitter): Resize two panes by dragging the handle between them, in percent of the container.
- [useStateHistory](https://bolio-ui.com/md/hooks/use-state-history): Keep a value with its history and move back and forward through it.
- [useTabs](https://bolio-ui.com/md/hooks/use-tabs): Provides automatic binding for component, which can reduce the amount of repetitive code and improve the development experience.
- [useTextSelection](https://bolio-ui.com/md/hooks/use-text-selection): Read the text the user has selected on the page.
- [useTheme](https://bolio-ui.com/md/hooks/use-theme): This hooks can get the theme states of Bolio UI within any component, and can track changes in states.
- [useThrottledCallback](https://bolio-ui.com/md/hooks/use-throttled-callback): Create a function that runs at most once per interval, with a trailing call.
- [useThrottledState](https://bolio-ui.com/md/hooks/use-throttled-state): Keep a state that updates at most once per interval.
- [useThrottledValue](https://bolio-ui.com/md/hooks/use-throttled-value): Limit how often a value updates, no more than once per interval.
- [useTimeout](https://bolio-ui.com/md/hooks/use-timeout): Run a function after a delay that you can start again or clear.
- [useToast](https://bolio-ui.com/md/hooks/use-toast): Display an important message globally.
- [useToggle](https://bolio-ui.com/md/hooks/use-toggle): Switch between two or more values, a boolean by default.
- [useUncontrolled](https://bolio-ui.com/md/hooks/use-uncontrolled): Build a component that works controlled and uncontrolled with the same code.
- [useValidatedState](https://bolio-ui.com/md/hooks/use-validated-state): Keep a value together with its validity and the last value that was valid.
- [useViewportSize](https://bolio-ui.com/md/hooks/use-viewport-size): Get the width and height of the window and keep them updated.
- [useWindowEvent](https://bolio-ui.com/md/hooks/use-window-event): Attach an event listener to the window and remove it when the component unmounts.
- [useWindowScroll](https://bolio-ui.com/md/hooks/use-window-scroll): Read the scroll position of the window and scroll it.