> Leaf UI 0.6.0 · Package: @ifhover/leaf-ui · Source: b30c3d3a8fa9c5e15d0d0522cebfbd33f60c6b06
> Browser documentation: https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/index.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms-full.txt.

# Components

Browse components, examples and API references.


## Layout

[### Flex 

Control direction, alignment, spacing and wrapping.

](/leaf-ui/v/0.6.0/en/components/flex.html)[### Scrollbar 

Browse long or wide content within a region.

](/leaf-ui/v/0.6.0/en/components/scrollbar.html)[### Layout 

Organize headers, sidebars, content and footers.

](/leaf-ui/v/0.6.0/en/components/layout.html)[### Grid 

Arrange content for different screen widths.

](/leaf-ui/v/0.6.0/en/components/grid.html)[### Space 

Keep consistent spacing between elements.

](/leaf-ui/v/0.6.0/en/components/space.html)[### ScrollArea 

Browse content inside a bounded scroll area.

](/leaf-ui/v/0.6.0/en/components/scroll-area.html)[### Masonry 

Arrange cards and images of varying heights.

](/leaf-ui/v/0.6.0/en/components/masonry.html)[### Splitter 

Resize panels in a workspace.

](/leaf-ui/v/0.6.0/en/components/splitter.html)

## Data display

[### Table 

Browse, filter and manage structured data.

](/leaf-ui/v/0.6.0/en/components/table.html)[### Tag 

Label categories or statuses.

](/leaf-ui/v/0.6.0/en/components/tag.html)[### Badge 

Show counts and notifications.

](/leaf-ui/v/0.6.0/en/components/badge.html)[### Avatar 

Display a user, team or object avatar.

](/leaf-ui/v/0.6.0/en/components/avatar.html)[### Card 

Group related content and actions in a container.

](/leaf-ui/v/0.6.0/en/components/card.html)[### Collapse 

Expand or collapse a group of sections.

](/leaf-ui/v/0.6.0/en/components/collapse.html)[### Tree 

Browse and select hierarchical content.

](/leaf-ui/v/0.6.0/en/components/tree.html)[### Descriptions 

Present object details as labels and values.

](/leaf-ui/v/0.6.0/en/components/descriptions.html)[### QRCode 

Present text and links as QR codes.

](/leaf-ui/v/0.6.0/en/components/qr-code.html)[### Timeline 

Present events and progress in sequence.

](/leaf-ui/v/0.6.0/en/components/timeline.html)[### VirtualList 

Browse large lists smoothly.

](/leaf-ui/v/0.6.0/en/components/virtual-list.html)[### InfiniteScroll 

Load more content when reaching the end of a list.

](/leaf-ui/v/0.6.0/en/components/infinite-scroll.html)[### Statistic 

Display metrics and countdowns.

](/leaf-ui/v/0.6.0/en/components/statistic.html)

## General

[### Button 

Trigger actions such as saving or submitting.

](/leaf-ui/v/0.6.0/en/components/button.html)[### Divider 

Separate content, paragraphs or actions.

](/leaf-ui/v/0.6.0/en/components/divider.html)[### Typography 

Organize headings, body text and links.

](/leaf-ui/v/0.6.0/en/components/typography.html)

## Navigation

[### Steps 

Follow task steps and progress.

](/leaf-ui/v/0.6.0/en/components/steps.html)[### Breadcrumb 

Show the page hierarchy.

](/leaf-ui/v/0.6.0/en/components/breadcrumb.html)[### Pagination 

Browse data by page.

](/leaf-ui/v/0.6.0/en/components/pagination.html)[### Tabs 

Switch between content views.

](/leaf-ui/v/0.6.0/en/components/tabs.html)[### Segmented 

Switch between related options.

](/leaf-ui/v/0.6.0/en/components/segmented.html)[### Menu 

Organize hierarchical navigation.

](/leaf-ui/v/0.6.0/en/components/menu.html)[### BackTop 

Return to the top of a page or scroll container.

](/leaf-ui/v/0.6.0/en/components/back-top.html)[### Anchor 

Navigate long pages and keep important actions visible.

](/leaf-ui/v/0.6.0/en/components/anchor.html)[### FloatButton 

Keep quick actions within reach.

](/leaf-ui/v/0.6.0/en/components/float-button.html)[### CommandPalette 

Search and run actions quickly.

](/leaf-ui/v/0.6.0/en/components/command-palette.html)[### AppBar 

Organize navigation at the top and bottom of an application.

](/leaf-ui/v/0.6.0/en/components/app-bar.html)

## Data entry

[### Input 

Enter a single line of text.

](/leaf-ui/v/0.6.0/en/components/input.html)[### InputNumber 

Enter quantities, prices and numbers.

](/leaf-ui/v/0.6.0/en/components/input-number.html)[### Textarea 

Enter multiple lines of text.

](/leaf-ui/v/0.6.0/en/components/textarea.html)[### Checkbox 

Select one or more options.

](/leaf-ui/v/0.6.0/en/components/checkbox.html)[### Radio 

Choose one option from a group.

](/leaf-ui/v/0.6.0/en/components/radio.html)[### Switch 

Turn a setting on or off.

](/leaf-ui/v/0.6.0/en/components/switch.html)[### Select 

Choose an option from a list.

](/leaf-ui/v/0.6.0/en/components/select.html)[### AutoComplete 

Complete input with suggestions.

](/leaf-ui/v/0.6.0/en/components/auto-complete.html)[### Cascader 

Choose a hierarchical value.

](/leaf-ui/v/0.6.0/en/components/cascader.html)[### Form 

Organize fields and validation.

](/leaf-ui/v/0.6.0/en/components/form.html)[### Slider 

Choose a number or range by sliding.

](/leaf-ui/v/0.6.0/en/components/slider.html)[### Rate 

Select or display a rating.

](/leaf-ui/v/0.6.0/en/components/rate.html)[### TreeSelect 

Choose values from hierarchical data.

](/leaf-ui/v/0.6.0/en/components/tree-select.html)[### ColorPicker 

Choose colors and opacity.

](/leaf-ui/v/0.6.0/en/components/color-picker.html)[### Transfer 

Select and move items between two lists.

](/leaf-ui/v/0.6.0/en/components/transfer.html)[### InputOTP 

Enter and paste verification codes.

](/leaf-ui/v/0.6.0/en/components/input-otp.html)[### InputMask 

Enter information in a specified format.

](/leaf-ui/v/0.6.0/en/components/input-mask.html)[### Upload 

Choose or drop files to upload.

](/leaf-ui/v/0.6.0/en/components/upload.html)[### Mentions 

Insert people or references into text.

](/leaf-ui/v/0.6.0/en/components/mentions.html)

## Date and time

[### DatePicker 

Choose a date from a calendar.

](/leaf-ui/v/0.6.0/en/components/date-picker.html)[### TimePicker 

Choose hours, minutes and seconds.

](/leaf-ui/v/0.6.0/en/components/time-picker.html)[### DateTimePicker 

Choose a specific date and time.

](/leaf-ui/v/0.6.0/en/components/date-time-picker.html)[### DateRangePicker 

Choose a date or time range.

](/leaf-ui/v/0.6.0/en/components/date-range-picker.html)[### Calendar 

Browse dates and schedules.

](/leaf-ui/v/0.6.0/en/components/calendar.html)[### TimeRangePicker 

Choose a start and end time.

](/leaf-ui/v/0.6.0/en/components/time-range-picker.html)

## Feedback

[### Dropdown 

Group actions in a menu.

](/leaf-ui/v/0.6.0/en/components/dropdown.html)[### Modal 

View or edit inside a dialog.

](/leaf-ui/v/0.6.0/en/components/modal.html)[### Drawer 

Open content from a page edge.

](/leaf-ui/v/0.6.0/en/components/drawer.html)[### Confirm 

Confirm important actions.

](/leaf-ui/v/0.6.0/en/components/confirm.html)[### Alert 

Display information that needs attention.

](/leaf-ui/v/0.6.0/en/components/alert.html)[### Message 

Show brief operation feedback.

](/leaf-ui/v/0.6.0/en/components/message.html)[### Loading 

Indicate loading content.

](/leaf-ui/v/0.6.0/en/components/loading.html)[### Progress 

Display task completion.

](/leaf-ui/v/0.6.0/en/components/progress.html)[### Tooltip 

Add brief explanations.

](/leaf-ui/v/0.6.0/en/components/tooltip.html)[### Result 

Present operation results and empty content.

](/leaf-ui/v/0.6.0/en/components/result.html)[### Skeleton 

Show a content placeholder while loading.

](/leaf-ui/v/0.6.0/en/components/skeleton.html)[### Popover 

Show details or actions next to an element.

](/leaf-ui/v/0.6.0/en/components/popover.html)[### Notification 

Present notifications and actions in a page corner.

](/leaf-ui/v/0.6.0/en/components/notification.html)[### Popconfirm 

Confirm important actions near their triggers.

](/leaf-ui/v/0.6.0/en/components/popconfirm.html)[### ErrorBoundary 

Provide a fallback when content fails to render.

](/leaf-ui/v/0.6.0/en/components/error-boundary.html)[### LoadingBar 

Show page or task loading progress.

](/leaf-ui/v/0.6.0/en/components/loading-bar.html)[### Tour 

Introduce features in a sequence of steps.

](/leaf-ui/v/0.6.0/en/components/tour.html)

## Configuration

[### ConfigProvider 

Set regional themes and languages.

](/leaf-ui/v/0.6.0/en/components/config-provider.html)

## Media

[### Image 

Display images and explore galleries.

](/leaf-ui/v/0.6.0/en/components/image.html)[### FileList 

Display file information, downloads and media previews.

](/leaf-ui/v/0.6.0/en/components/file-list.html)[### Carousel 

Browse images or content one slide at a time.

](/leaf-ui/v/0.6.0/en/components/carousel.html)