Data Display
Components · 23 pages
- AccordionA vertically stacked set of interactive headings whose items reveal titled content with controlled or uncontrolled expansion.
- AvatarAvatar is a component that displays a user's profile picture or initials. It can be customized with props like size, shape, background color, and image source. If no image source is provided, it will display the user's initials. This component is typically used in user profile pages, comment sections, or messaging applications.
- CodeDiffThe CodeDiff component is used to display code differences with syntax highlighting. It supports split and unified view modes, full-featured collapsible headers, patch rendering, custom actions, and visual variants for different display styles.
- CollapseAn expandable content container that extends Ant Design Collapse with additional styling, icons, and header descriptions.
- EmptyEmpty component displays an empty state with customizable icon, emoji, image, title, description, and action buttons. It's commonly used to indicate that there's no data or content to display.
- FileTypeIconFileTypeIcon is a component that displays icons based on file types. It supports different file and folder types, color schemes, custom icons, and sizing options for visual representation of files and folders.
- FluentEmojiThe FluentEmoji component is used to display an emoji with the Fluent design style. It supports different types of styles (modern, flat, high-contrast) and sizes. It also provides a loading spinner when the image is being fetched from the server, and a fallback text emoji when the image fails to load. The component is customizable with className and style props, and can receive additional props to be passed down to the underlying div element.
- GroupAvatarGroupAvatar is a component that displays multiple user avatars in a grid layout with smooth corner styling. It supports different corner types including iOS-style superellipse shapes for modern visual appeal. The component automatically arranges up to 4 avatars in a 2x2 grid and applies smooth corner masks for enhanced visual presentation.
- GuideCardGuideCard is a component used to display visual guides, introductory content, or instructional information with an optional cover image, title, and description. It supports various visual styles, closable functionality, and customization options.
- HighlighterThe Highlighter component is used to display syntax-highlighted code blocks with powerful features like code copying, language selection, custom themes, and transformers. It supports multiple display variants, expandable views, and customizable actions.
- HotkeyHotkey component displays keyboard shortcuts or key combinations in a visually appealing way, supporting both standard and Mac keyboard styles with various visual options.
- HtmlPreviewHtmlPreview renders LLM-generated HTML inline using a hardened iframe sandbox. It mirrors how Mermaid is embedded in Markdown, but treats the content as code rather than data — scripts execute inside an isolated frame that cannot reach the host page.
- ImageImage is an enhanced image component with a self-contained zoom-and-pan preview viewer, custom actions, and various display styles. Preview is powered by a Base UI dialog with FLIP open/close transitions, deep zoom, and gallery navigation — it no longer wraps Ant Design's Image.
- ListRenders selectable list items with titles, descriptions, avatars, actions, pin and loading states, and active-key handling.
- MarkdownMarkdown is a React component used to render markdown text. It supports various markdown syntax such as headings, lists, links, images, code blocks and more. It is commonly used in documentation, blogs, and other text-heavy applications.
- MaterialFileTypeIconMaterialFileTypeIcon displays file and folder icons in Material Design style based on file extensions or folder names. It supports various file types and provides different visual variants.
- MermaidMermaid is a component for rendering Mermaid diagrams in React. It supports various diagram types like flowcharts, sequence diagrams, class diagrams, and more with customizable styling and interactive features.
- SegmentedA deprecated styled wrapper around Ant Design Segmented with filled, outlined, or borderless variants and optional shadow, glass, and padding controls.
- SkeletonSkeleton component provides a placeholder loading state for content that is being loaded. It displays animated placeholder blocks that mimic the structure of the actual content, improving user experience during data loading.
- SnippetThe Snippet component is used to display a code snippet with syntax highlighting. It can be customized with a symbol before the content and a language for syntax highlighting. The component is also copyable with a CopyButton included by default.
- SortableListSortableList is a component for creating drag-and-drop sortable lists. It allows users to reorder list items through mouse or keyboard interactions with smooth animations and accessibility features.
- TagTag is used for marking and categorizing content with small colorful labels. It offers multiple styles, sizes, and color options for different scenarios.
- VideoVideo component for displaying video content with customizable controls, preview mode, and various styles. It supports standard HTML video features while providing an enhanced user interface.