Components & Playground
Browse reusable CSS modules and complete ak-ui interface demos from one place. To integrate ak-ui, start with the AI Skill, CSS Core, Vue Registry or A2UI experiment.
Complete demos
The terminal demos below currently use Chinese interface labels.
Switch artwork, class colors and elite decorations, adjust depth and perspective, and try profile, resource and mission overlays.
Open the terminal →FULLSCREEN / TERMINALFullscreen terminal (中文)Explore the complete canvas and its interactions. Use landscape orientation on a phone.
Enter fullscreen →FULLSCREEN / LOADINGFullscreen loading (中文)Inspect the startup screen, progress track and state transitions on their own.
Try loading →| Interactive experiment | What to try |
|---|---|
| Depth animation player (中文) | Play, pause, scrub and loop layered motion, then return to pointer control |
| Vue Registry interactions | Button events, numeric input, linked progress, Tabs and Segmented |
| A2UI experiment | Receive messages incrementally, edit a callsign, return actions and update the interface; a local simulation with no real deployment |
This page collects existing interactive examples; it does not provide an online code editor. See artwork provenance for terminal asset sources and licenses.
Component index
Use semantic HTML and the stable .ak-* classes from CSS Core. Detailed component references and their live examples currently remain in Chinese; the code works in any framework.
| Group | Components (中文) |
|---|---|
| Foundation | Colors and typography · Helpers · Icons |
| Actions and navigation | Buttons · Button groups · Forms · Link navigation · Tabs · Pagination |
| Layout and containers | Cards · Panels · Dividers |
| Data and states | News list · Counters · Progress and gauge · Sanity · Status · Levels |
| Feedback and overlays | Dialog · Popover and tooltip · Notices · Loading |
| Visuals and media | Images and video · Effects · Objects |
Native HTML and headless primitives own keyboard, focus and state behavior. Keep labels, visible focus, reduced-motion support and adequate contrast when customizing the design. See the design language, tokens and headless adapter contract.