Native

The select component supports both single and multiple selection, perfectly replacing native select-single and select-multiple components; it features fuzzy search and auto-completion.

Displays the CSS animations integrated in this framework, including transition animations and keyframe animations, which can meet daily usage needs.

Explains the relationship between color utility classes and CSS variables for color generation. This article provides a clear understanding of how OrcaUI's color theme system works, empowering users to customize their own theme styles after mastering...

The Accordion component can create nested collapsible panels and supports multiple data formats.

The stats component primarily highlights numerical values and can be enriched with properties like icon, disk, tips, and unit to enhance its content. It supports common operations such as reset and set.

The pill component is a standalone tab-switching component that only includes the tab header (not the tab body). It resembles a capsule shape and features an animated moving background block.

A form field container is the basic unit that makes up a complete form. Within a form field container, child elements may include native elements like input, custom form field components, form validation modules, a left-side label header, right-side ...

Single-line form field combination component that groups multiple form fields into a unified whole

The Editor rich text editor component supports HTML editing (unlike textarea which only handles plain text) and provides multiple shortcut operations.

The select component supports both single and multiple selection, perfectly replacing native select-single and select-multiple components; it features fuzzy search and auto-completion.

The datetime component can create date picker instances, supporting single or multiple date selection, date range selection, lunar calendar usage, and custom events.

The datetime component can create date picker instances, supporting single or multiple date selection, date range selection, lunar calendar usage, and custom events.

The TEXTAREA component extends native textarea functionality with enhanced features including a toolbar, character limit indicators, and built-in input validation.

The pill component is a standalone tab-switching component that only includes the tab header (not the tab body). It resembles a capsule shape and features an animated moving background block.

The icon component is primarily used to display an icon. The form of the icon is not limited to iconfont icon fonts; it can also be images such as SVG, PNG, or JPG. It supports theme color themes and the use of label text, as well as various mixed st...

Universal webpage header with adaptive width, capable of accommodating logos, navigation, menus, search bars, buttons, etc.

The footer of a website is the least prominent area of a webpage, typically used to display disclaimers or contact information. OrcaUI's footer component comes with built-in sub-elements for users to combine, including icon button groups, auxiliary n...

The grade menu is a simplified version of the Menu module. Unlike typical components or modules, grade is built with native CSS+HTML, allowing users to insert custom content while preserving its core structure, and can be integrated into custom modul...

Tab groups are a form of tab headers that have been integrated into the Tab component module. Built with CSS+HTML, they can be used anywhere in the webpage body and may also be packaged/referenced by other custom components or modules.

Flex groups are a form of tab headers that have been integrated into the Tab component module. Built with CSS+HTML, they can be used anywhere in the webpage body and may also be packaged/referenced by other custom components or modules.

Button groups are a form of tab headers that have been integrated into the Tab component module. Since they are built with CSS+HTML, they can be used anywhere in the webpage body and can also be packaged and referenced by other custom components or m...

While native HTML tags provide basic text formatting, certain special text formats still require custom CSS or JavaScript implementations. The format component currently supports several specialized text formats, including pinyin annotations, line br...

The divider component has similar effects to the hr tag and the oc-line component, as both can create a horizontal dividing line. We define the divider more purely—it simply separates the context and is part of the context itself. Its label text size...

The line component displays a divider to distinguish contexts, with the default effect being consistent with the hr tag. In addition to displaying a horizontal divider, the line component can also display a vertical divider and include descriptive te...

Both post and bullet are sub-components that form image-text lists. A post primarily emphasizes images or image collections, highlighting the role of visuals in information presentation – though it can also display multi-line text without images. For...

The card is used to display mixed content of images and text, in pure CSS form, and can be used with any layout, such as flex or grid.

Bullet is commonly referred to as an unordered list or brief news, primarily consisting of short text and usually without accompanying images; bullet can also consist of one or more lines of text but may be supplemented with small images or icons; bu...

The tag element can be used individually, or wrapped with tags container to uniformly configure appearance (color, size, and border styles). Both tag and tags serve as foundational components for the Tags module.

Pure CSS table component with multiple style variations, supporting basic frozen headers and side columns

The comment list is purely CSS-defined and can be integrated into any component or module, with full responsive support across all devices.

Multi-criteria filtering allows intuitive condition combination through point-and-click selection. Purely CSS-implemented, users can extend functionality as needed. Suitable for listing pages on classified information websites.

The legend style component is primarily used as a small decorative image and can be placed in any component or module. It includes rep=disk, rep=cube, and rep=image.

The poster component defines a cover image for post lists and card lists. It is purely styled with CSS.

Increase or decrease the font size, line height, and margin sizes of the page using the num-step and fs-root variables

Use _r[-*] style classes to independently set an element's border radius, supporting customization of size and position. The sizing is based on a 3px increment (e.g., _r-3 means 3px*3).

The Accordion component can create nested collapsible panels and supports multiple data formats.

The FILE custom tag is an encapsulation of the native file tag. In addition to maintaining the functionality of single and multiple file selection, it also adds support for a toolbox, file quantity limit prompts, and quantity validation.