AGenUI 组件库

探索 AGenUI 的完整组件集合，包含 25 个精心设计的组件。点击左侧导航查看各个组件的详细文档。

布局组件

用于组织和排列其他组件的容器组件

Item 1

Item 2

Item 3

Row

A layout component that arranges its children horizontally. To create a grid layout, nest Columns within this Row.

Item 1

Item 2

Item 3

Column

A layout component that arranges its children vertically. To create a grid layout, nest Rows within this Column.

First item

Second item

Third item

List

Container for rendering lists of items, supporting both vertical and horizontal layouts.

Heading

Your text here

Caption

Card

A styled container that provides card-like appearance with elevation and padding.

Tabs

Tab navigation component with multiple panels. Each tab has a title and associated content.

Modal

Dialog/popup component with a trigger element and content panel.

Carousel

An image carousel component for displaying a slideshow of images with autoplay and swipe support.

基础组件

用于展示内容的基础UI组件

Text

Common properties for Text component, with extended text-specific styles.

Image

Display images with configurable sizing hints and object-fit behavior.

Icon

Display Material Icons by name. Icons are rendered using the Google Icon font.

1:24 / 4:20

Video

Embed video content with native HTML5 video player controls.

Title here

Here is caption

1:233:58

AudioPlayer

Embed audio content with native HTML5 audio player controls.

Text1

Text2

Text3

Divider

Visual separator line between content sections.

表单组件

用于用户输入和交互的表单控件

Button

Properties for components that support client-side checks.

Where do you want to go this weekend?

Looking for kid-friendly hot spring hotels within a 30-minute drive of Beijing

TextField

Properties for components that support client-side checks.

I have read and agree to the Terms of Service and Privacy

CheckBox

Properties for components that support client-side checks.

Option 1

Option 2

Option 3

ChoicePicker

A component that allows selecting one or more options from a list.

0600

Slider

Properties for components that support client-side checks.

DateTimeInput

Properties for components that support client-side checks.

高级组件

提供丰富功能的高级UI组件

Bold text and italic text with colored highlights.

Bullet point one
Bullet point two

RichText

A component for displaying rich text content with HTML formatting support.

Lottie

A component for displaying Lottie animations from JSON files.

Table

A table component for displaying structured data in rows and columns.

Web

A web view component for embedding HTML content or loading web pages.

Heading

This is a paragraph with inline code.

const hello = "world";

This is a blockquote

Markdown

A component for rendering Markdown formatted text content.

Chart

A data visualization component for rendering various chart types including bar, line, and donut charts.