Component Examples

Browse real UXSCII components to learn patterns and best practices. Each example includes both the .uxm metadata and .md template files.

Buttons

Primary Button

button | v1.0.0
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓   Click Me   ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
primary action

Secondary Button

button | v1.0.0
┌──────────────┐
│   Cancel     │
└──────────────┘
secondary action

Outline Button

button | v1.0.0
┏━━━━━━━━━━━━━━┓
┃   Learn More ┃
┗━━━━━━━━━━━━━━┛
outline link

Input Fields

Text Input

input | v1.0.0
Label
┌─────────────────────────┐
│ Enter text here...      │
└─────────────────────────┘
input form

Email Input

input | v1.0.0
Email Address *
┌─────────────────────────┐
│ [email protected]        │
└─────────────────────────┘
email validation

Password Input

input | v1.0.0
Password *
┌─────────────────────────┐
│ ••••••••                │
└─────────────────────────┘
password secure

Containers & Cards

Card

card | v1.0.0
╭─────────────────────╮
│ Card Title          │
├─────────────────────┤
│ Card content goes   │
│ here with multiple  │
│ lines of text.      │
╰─────────────────────╯
card container

Alert

alert | v1.0.0
┌─────────────────────┐
│ ⚠️ Warning          │
│ Please check inputs │
└─────────────────────┘
alert notification

Badge

badge | v1.0.0
    ▓▓▓▓▓▓▓▓▓
    ▓  New  ▓
    ▓▓▓▓▓▓▓▓▓
badge status

Complex Components

Navigation

navigation | v1.0.0
┏━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ Home | About | Contact ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━┛
navigation menu

Modal

modal | v1.0.0
╔═══════════════════════╗
║ Confirm Action        ║
╠═══════════════════════╣
║ Are you sure?         ║
║                       ║
║ [Cancel]    [Confirm] ║
╚═══════════════════════╝
modal dialog

Table

table | v1.0.0
┌───────┬────────┬─────┐
│ Name  │ Status │ Age │
├───────┼────────┼─────┤
│ Alice │ Active │ 28  │
│ Bob   │ Active │ 34  │
└───────┴────────┴─────┘
table data

Want More Examples?

View the complete examples in the GitHub repository, or create your own components using the guides.

View on GitHub Read Agent Guide