Basic UI building blocks for constructing interfaces. These are the foundational interactive and display components.
Components
Component
Description
Avatar
User avatar with image, initials, or icon fallback
AvatarGroup
Display multiple avatars in a stacked group
Badge
Small status indicator or count label
Button
Primary action trigger with variants, colors, sizes, and icon support
Chip
Compact element for tags, filters, or selections
CommandPalette
Searchable command menu (keyboard-driven, fuzzy search via Fuse.js)
IconButton
Button optimized for icon-only actions
Kbd
Keyboard shortcut display element
Loader
Loading spinner/dots indicator
Navigation
Navigation menu component
Skeleton
Placeholder loading skeleton for content
1---2name: elements3description: Elements4---5# Elements67Basic UI building blocks for constructing interfaces. These are the foundational interactive and display components.89## Components1011| Component | Description |12|-----------|-------------|13| **Avatar** | User avatar with image, initials, or icon fallback |14| **AvatarGroup** | Display multiple avatars in a stacked group |15| **Badge** | Small status indicator or count label |16| **Button** | Primary action trigger with variants, colors, sizes, and icon support |17| **Chip** | Compact element for tags, filters, or selections |18| **CommandPalette** | Searchable command menu (keyboard-driven, fuzzy search via Fuse.js) |19| **IconButton** | Button optimized for icon-only actions |20| **Kbd** | Keyboard shortcut display element |21| **Loader** | Loading spinner/dots indicator |22| **Navigation** | Navigation menu component |23| **Skeleton** | Placeholder loading skeleton for content |
Run npx skillmds@latest add reaviz/elements in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Elements It is listed under Coding & Dev Tools on SkillMD.
This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
reaviz (@reaviz) published this skill. Their other Agent Skills are listed on their SkillMD profile.
reaviz