# Pohon UI > A comprehensive, Nuxt-integrated UI library providing a rich set of fully-styled, accessible and highly customizable components for building modern web applications. ## Documentation Sets - [Pohon UI Full Documentation](https://akar.vinicunca.dev/llms-full.txt): This is the full documentation for Pohon UI. It includes all the Markdown files written with the MDC syntax. ## Akar Getting Started ## Akar Components - [Accordion](https://akar.vinicunca.dev/docs/akar/components/accordion): A vertically stacked set of interactive headings that each reveal an associated section of content. - [Alert Dialog](https://akar.vinicunca.dev/docs/akar/components/alert-dialog): A modal dialog that interrupts the user with important content and expects a response. - [Avatar](https://akar.vinicunca.dev/docs/akar/components/avatar): An image element with a fallback for representing the user. - [Calendar](https://akar.vinicunca.dev/docs/akar/components/calendar): Displays dates and days of the week, facilitating date-related interactions. - [Checkbox](https://akar.vinicunca.dev/docs/akar/components/checkbox): A control that allows the user to toggle between checked and not checked. - [Collapsible](https://akar.vinicunca.dev/docs/akar/components/collapsible): An interactive component which expands/collapses a panel. - [Combobox](https://akar.vinicunca.dev/docs/akar/components/combobox): Choose from a list of suggested values with full keyboard support. - [Context Menu](https://akar.vinicunca.dev/docs/akar/components/context-menu): Displays a menu located at the pointer, triggered by a right-click or a long-press. - [Date Field](https://akar.vinicunca.dev/docs/akar/components/date-field): Enables users to input specific dates within a designated field. - [Date Picker](https://akar.vinicunca.dev/docs/akar/components/date-picker): Facilitates the selection of dates through an input and calendar-based interface. - [Date Range Field](https://akar.vinicunca.dev/docs/akar/components/date-range-field): Allows users to input a range of dates within a designated field. - [Date Range Picker](https://akar.vinicunca.dev/docs/akar/components/date-range-picker): Facilitates the selection of date ranges through an input and calendar-based interface. - [Dialog](https://akar.vinicunca.dev/docs/akar/components/dialog): A window overlaid on either the primary window or another dialog window, rendering the content underneath inert. - [Drawer](https://akar.vinicunca.dev/docs/akar/components/drawer): A drawer that smoothly slides in & out of the screen. - [Dropdown Menu](https://akar.vinicunca.dev/docs/akar/components/dropdown-menu): A menu to display actions when clicking on an element. - [Editable](https://akar.vinicunca.dev/docs/akar/components/editable): Displays an input field used for editing a single line of text, rendering as static text on load. - [Hover Card](https://akar.vinicunca.dev/docs/akar/components/hover-card): For sighted users to preview content available behind a link. - [Label](https://akar.vinicunca.dev/docs/akar/components/label): Renders an accessible label associated with controls. - [Listbox](https://akar.vinicunca.dev/docs/akar/components/listbox): A control that allows the user to toggle between checked and not checked. - [Navigation Menu](https://akar.vinicunca.dev/docs/akar/components/navigation-menu): A list of links that can be displayed horizontally or vertically. - [Number Field](https://akar.vinicunca.dev/docs/akar/components/number-field): A number field allows a user to enter a number and increment or decrement the value using stepper buttons. - [Pagination](https://akar.vinicunca.dev/docs/akar/components/pagination): Displays data in paged format and provides navigation between pages. - [Pin Input](https://akar.vinicunca.dev/docs/akar/components/pin-input): A sequence of one-character alphanumeric inputs. - [Popover](https://akar.vinicunca.dev/docs/akar/components/popover): A non-modal dialog that floats around a trigger element. - [Progress](https://akar.vinicunca.dev/docs/akar/components/progress): An indicator showing the progress of a task. - [Radio Group](https://akar.vinicunca.dev/docs/akar/components/radio-group): A set of radio buttons to select a single option from a list. - [Range Calendar](https://akar.vinicunca.dev/docs/akar/components/range-calendar): Presents a calendar view tailored for selecting date ranges. - [Scroll Area](https://akar.vinicunca.dev/docs/akar/components/scroll-area): Augments native scroll functionality for custom, cross-browser styling. - [Select](https://akar.vinicunca.dev/docs/akar/components/select): A select element to choose from a list of options. - [Separator](https://akar.vinicunca.dev/docs/akar/components/separator): Separates content horizontally or vertically. - [Slider](https://akar.vinicunca.dev/docs/akar/components/slider): An input to select a numeric value within a range. - [Splitter](https://akar.vinicunca.dev/docs/akar/components/splitter): A component that divides your layout into resizable sections. - [Stepper](https://akar.vinicunca.dev/docs/akar/components/stepper): A set of steps that are used to indicate progress through a multi-step process. - [Switch](https://akar.vinicunca.dev/docs/akar/components/switch): A control that toggles between two states. - [Tabs](https://akar.vinicunca.dev/docs/akar/components/tabs): A set of tab panels that are displayed one at a time. - [Tags Input](https://akar.vinicunca.dev/docs/akar/components/tags-input): An input element that displays interactive tags. - [Time Field](https://akar.vinicunca.dev/docs/akar/components/time-field): Enables users to input specific times within a designated field. - [Toast](https://akar.vinicunca.dev/docs/akar/components/toast): A succinct message to provide information or feedback to the user. - [Toggle](https://akar.vinicunca.dev/docs/akar/components/toggle): A two-state button that can be either on or off. - [Toggle Group](https://akar.vinicunca.dev/docs/akar/components/toggle-group): A set of two-state buttons that can be toggled on or off. - [Tooltip](https://akar.vinicunca.dev/docs/akar/components/tooltip): A popup that reveals information when hovering over an element. - [Tree](https://akar.vinicunca.dev/docs/akar/components/tree): A tree view component to display and interact with hierarchical data structures. ## Akar Utilities - [Config Provider](https://akar.vinicunca.dev/docs/akar/utilities/config-provider): Wraps your app to provide global configurations. - [Focus Scope](https://akar.vinicunca.dev/docs/akar/utilities/focus-scope): Manages focus within a component boundary with support for trapping and looping focus navigation. - [Presence](https://akar.vinicunca.dev/docs/akar/utilities/presence): Manages mounting and unmounting of element with transition support. - [Primitive](https://akar.vinicunca.dev/docs/akar/utilities/primitive): Compose Akar's functionality onto alternative element types or your own Vue components. - [Roving Focus](https://akar.vinicunca.dev/docs/akar/utilities/roving-focus): Utility component that implements the roving tabindex method to manage focus between items. - [Slot](https://akar.vinicunca.dev/docs/akar/utilities/slot): Merges its props onto its immediate child. - [Visually Hidden](https://akar.vinicunca.dev/docs/akar/utilities/visually-hidden): Hides content from the screen in an accessible way. - [useDateFormatter](https://akar.vinicunca.dev/docs/akar/utilities/use-date-formatter): Creates a wrapper around the `DateFormatter`, which is an improved version of the Intl.DateTimeFormat API, that is used internally by the various date builders to easily format dates in a consistent way. - [useDirection](https://akar.vinicunca.dev/docs/akar/utilities/use-direction): Access the current direction - [useLocale](https://akar.vinicunca.dev/docs/akar/utilities/use-locale): Access the current locale - [useEmitAsProps](https://akar.vinicunca.dev/docs/akar/utilities/use-emit-as-props): Convert emits into object similar to props - [useFilter](https://akar.vinicunca.dev/docs/akar/utilities/use-filter): Locale-Aware string filtering - [useForwardExpose](https://akar.vinicunca.dev/docs/akar/utilities/use-forward-expose): Forward component's exposed value, props and $el. - [useForwardProps](https://akar.vinicunca.dev/docs/akar/utilities/use-forward-props): Forward component's props without boolean casting - [useForwardPropsEmits](https://akar.vinicunca.dev/docs/akar/utilities/use-forward-props-emits): Combinations for useForwardProps & useEmitAsProps ## Pohon Getting Started ## Pohon Components - [Accordion](https://akar.vinicunca.dev/docs/pohon/components/accordion): A vertically stacked set of interactive headings that each reveal an associated section of content. - [Alert](https://akar.vinicunca.dev/docs/pohon/components/alert): A callout to draw user's attention. - [App](https://akar.vinicunca.dev/docs/pohon/components/app): Wraps your app to provide global configurations and more. - [Avatar](https://akar.vinicunca.dev/docs/pohon/components/avatar): An image element with a fallback for representing the user. - [AvatarGroup](https://akar.vinicunca.dev/docs/pohon/components/avatar-group): Stack multiple avatars in a group. - [Badge](https://akar.vinicunca.dev/docs/pohon/components/badge): A short text to represent a status or a category. - [Banner](https://akar.vinicunca.dev/docs/pohon/components/banner): Display a banner at the top of your website to inform users about important information. - [Breadcrumb](https://akar.vinicunca.dev/docs/pohon/components/breadcrumb): A hierarchy of links to navigate through a website. - [Button](https://akar.vinicunca.dev/docs/pohon/components/button): A button element that can act as a link or trigger an action. - [Calendar](https://akar.vinicunca.dev/docs/pohon/components/calendar): Displays dates and days of the week, facilitating date-related interactions. - [Card](https://akar.vinicunca.dev/docs/pohon/components/card): Display content in a card with a header, body and footer. - [Carousel](https://akar.vinicunca.dev/docs/pohon/components/carousel): A carousel with motion and swipe built using Embla. - [Checkbox](https://akar.vinicunca.dev/docs/pohon/components/checkbox): An input element to toggle between checked and unchecked states. - [CheckboxGroup](https://akar.vinicunca.dev/docs/pohon/components/checkbox-group): A set of checklist buttons to select multiple option from a list. - [Chip](https://akar.vinicunca.dev/docs/pohon/components/chip): An indicator of a numeric value or a state. - [Collapsible](https://akar.vinicunca.dev/docs/pohon/components/collapsible): An interactive component which expands/collapses a panel. - [ColorModeAvatar](https://akar.vinicunca.dev/docs/pohon/components/color-mode-avatar): An Avatar with a different source for light and dark mode. - [ColorModeButton](https://akar.vinicunca.dev/docs/pohon/components/color-mode-button): A Button to switch between light and dark mode. - [ColorModeImage](https://akar.vinicunca.dev/docs/pohon/components/color-mode-image): An image element with a different source for light and dark mode. - [ColorModeSelect](https://akar.vinicunca.dev/docs/pohon/components/color-mode-select): A Select to switch between system, dark & light mode. - [ColorModeSwitch](https://akar.vinicunca.dev/docs/pohon/components/color-mode-switch): A switch to toggle between light and dark mode. - [ColorPicker](https://akar.vinicunca.dev/docs/pohon/components/color-picker): A component to select a color. - [CommandPalette](https://akar.vinicunca.dev/docs/pohon/components/command-palette): A command palette with full-text search powered by Fuse.js for efficient fuzzy matching. - [Container](https://akar.vinicunca.dev/docs/pohon/components/container): A container lets you center and constrain the width of your content. - [ContentNavigation](https://akar.vinicunca.dev/docs/pohon/components/content-navigation): An accordion-style navigation component for organizing page links. - [ContentSearch](https://akar.vinicunca.dev/docs/pohon/components/content-search): A ready to use CommandPalette to add to your documentation. - [ContentSearchButton](https://akar.vinicunca.dev/docs/pohon/components/content-search-button): A pre-styled Button to open the ContentSearch modal. - [ContentSurround](https://akar.vinicunca.dev/docs/pohon/components/content-surround): A pair of prev and next links to navigate between pages. - [ContentToc](https://akar.vinicunca.dev/docs/pohon/components/content-toc): A sticky Table of Contents with automatic active anchor link highlighting. - [ContextMenu](https://akar.vinicunca.dev/docs/pohon/components/context-menu): Displays a menu located at the pointer, triggered by a right-click or a long-press. - [DashboardGroup](https://akar.vinicunca.dev/docs/pohon/components/dashboard-group): A fixed layout component that provides context for dashboard components with sidebar state management and persistence. - [DashboardNavbar](https://akar.vinicunca.dev/docs/pohon/components/dashboard-navbar): A responsive navbar to display in a dashboard. - [DashboardPanel](https://akar.vinicunca.dev/docs/pohon/components/dashboard-panel): A resizable panel to display in a dashboard. - [DashboardResizeHandle](https://akar.vinicunca.dev/docs/pohon/components/dashboard-resize-handle): A handle to resize a sidebar or panel. - [DashboardSearch](https://akar.vinicunca.dev/docs/pohon/components/dashboard-search): A ready to use CommandPalette to add to your dashboard. - [DashboardSearchButton](https://akar.vinicunca.dev/docs/pohon/components/dashboard-search-button): A pre-styled Button to open the DashboardSearch modal. - [DashboardSidebar](https://akar.vinicunca.dev/docs/pohon/components/dashboard-sidebar): A resizable and collapsible sidebar to display in a dashboard. - [DashboardSidebarCollapse](https://akar.vinicunca.dev/docs/pohon/components/dashboard-sidebar-collapse): A Button to collapse the sidebar on desktop. - [DashboardSidebarToggle](https://akar.vinicunca.dev/docs/pohon/components/dashboard-sidebar-toggle): A Button to toggle the sidebar on mobile. - [DashboardToolbar](https://akar.vinicunca.dev/docs/pohon/components/dashboard-toolbar): A toolbar to display under the navbar in a dashboard. - [Dialog](https://akar.vinicunca.dev/docs/pohon/components/dialog): A window overlaid on either the primary window or another dialog window, rendering the content underneath inert. - [Drawer](https://akar.vinicunca.dev/docs/pohon/components/drawer): A drawer that smoothly slides in & out of the screen. - [DropdownMenu](https://akar.vinicunca.dev/docs/pohon/components/dropdown-menu): A menu to display actions when clicking on an element. - [Empty](https://akar.vinicunca.dev/docs/pohon/components/empty): A component to display an empty state. - [Error](https://akar.vinicunca.dev/docs/pohon/components/error): A pre-built error component with NuxtError support. - [FieldGroup](https://akar.vinicunca.dev/docs/pohon/components/field-group): Group multiple button-like elements together. - [FileUpload](https://akar.vinicunca.dev/docs/pohon/components/file-upload): An input element to upload files. - [Footer](https://akar.vinicunca.dev/docs/pohon/components/footer): A responsive footer component. - [FooterColumns](https://akar.vinicunca.dev/docs/pohon/components/footer-columns): A list of links as columns to display in your Footer. - [Form](https://akar.vinicunca.dev/docs/pohon/components/form): A form component with built-in validation and submission handling. - [FormField](https://akar.vinicunca.dev/docs/pohon/components/form-field): A wrapper for form elements that provides validation and error handling. - [Header](https://akar.vinicunca.dev/docs/pohon/components/header): A responsive header component. - [Icon](https://akar.vinicunca.dev/docs/pohon/components/icon): A component to display any icon from Iconify or another component. - [Input](https://akar.vinicunca.dev/docs/pohon/components/input): An input element to enter text. - [InputDate](https://akar.vinicunca.dev/docs/pohon/components/input-date): Enables users to input specific dates within a designated field. - [InputMenu](https://akar.vinicunca.dev/docs/pohon/components/input-menu): An autocomplete input with real-time suggestions. - [InputNumber](https://akar.vinicunca.dev/docs/pohon/components/input-number): An input for numerical values with a customizable range. - [InputTags](https://akar.vinicunca.dev/docs/pohon/components/input-tags): An input element that displays interactive tags. - [InputTime](https://akar.vinicunca.dev/docs/pohon/components/input-time): Enables users to input specific times within a designated field. - [Kbd](https://akar.vinicunca.dev/docs/pohon/components/kbd): A kbd element to display a keyboard key. - [Link](https://akar.vinicunca.dev/docs/pohon/components/link): A wrapper around with extra props. - [LocaleSelect](https://akar.vinicunca.dev/docs/pohon/components/locale-select): A Select to switch between locales. - [Main](https://akar.vinicunca.dev/docs/pohon/components/main): A main element that fills the available viewport height. - [Marquee](https://akar.vinicunca.dev/docs/pohon/components/marquee): A component to create infinite scrolling content. - [NavigationMenu](https://akar.vinicunca.dev/docs/pohon/components/navigation-menu): A list of links that can be displayed horizontally or vertically. - [Pagination](https://akar.vinicunca.dev/docs/pohon/components/pagination): A list of buttons or links to navigate through pages. - [PinInput](https://akar.vinicunca.dev/docs/pohon/components/pin-input): A sequence of one-character alphanumeric inputs. - [Popover](https://akar.vinicunca.dev/docs/pohon/components/popover): A non-modal dialog that floats around a trigger element. - [Progress](https://akar.vinicunca.dev/docs/pohon/components/progress): An indicator showing the progress of a task. - [RadioGroup](https://akar.vinicunca.dev/docs/pohon/components/radio-group): A set of radio buttons to select a single option from a list. - [Select](https://akar.vinicunca.dev/docs/pohon/components/select): A select element to choose from a list of options. - [SelectMenu](https://akar.vinicunca.dev/docs/pohon/components/select-menu): An advanced searchable select element. - [Separator](https://akar.vinicunca.dev/docs/pohon/components/separator): Separates content horizontally or vertically. - [Skeleton](https://akar.vinicunca.dev/docs/pohon/components/skeleton): A placeholder to show while content is loading. - [Slideover](https://akar.vinicunca.dev/docs/pohon/components/slideover): A dialog that slides in from any side of the screen. - [Slider](https://akar.vinicunca.dev/docs/pohon/components/slider): An input to select a numeric value within a range. - [Stepper](https://akar.vinicunca.dev/docs/pohon/components/stepper): A set of steps that are used to indicate progress through a multi-step process. - [Switch](https://akar.vinicunca.dev/docs/pohon/components/switch): A control that toggles between two states. - [Table](https://akar.vinicunca.dev/docs/pohon/components/table): A responsive table element to display data in rows and columns. - [Tabs](https://akar.vinicunca.dev/docs/pohon/components/tabs): A set of tab panels that are displayed one at a time. - [Textarea](https://akar.vinicunca.dev/docs/pohon/components/textarea): A textarea element to input multi-line text. - [Timeline](https://akar.vinicunca.dev/docs/pohon/components/timeline): A component that displays a sequence of events with dates, titles, icons or avatars. - [Toast](https://akar.vinicunca.dev/docs/pohon/components/toast): A succinct message to provide information or feedback to the user. - [Tooltip](https://akar.vinicunca.dev/docs/pohon/components/tooltip): A popup that reveals information when hovering over an element. - [Tree](https://akar.vinicunca.dev/docs/pohon/components/tree): A tree view component to display and interact with hierarchical data structures. - [User](https://akar.vinicunca.dev/docs/pohon/components/user): Display user information with name, description and avatar. ## Pohon Composables - [defineShortcuts](https://akar.vinicunca.dev/docs/pohon/composables/define-shortcuts): A composable to define keyboard shortcuts in your app. - [useFormField](https://akar.vinicunca.dev/docs/pohon/composables/use-form-field): A composable to integrate custom inputs with the Form component - [useOverlay](https://akar.vinicunca.dev/docs/pohon/composables/use-overlay): A composable to programmatically control overlays. - [useToast](https://akar.vinicunca.dev/docs/pohon/composables/use-toast): A composable to display toast notifications in your app. ## Notes - The content is automatically generated from the same source as the official documentation.