Component Examples

This directory contains fully expanded component examples showing complete interaction states.

Important Note

These examples show expanded components - they include all interactive states (hover, focus, disabled, error, etc.).

When you create new components using /fluxwing-create, they will have only the default state for fast MVP prototyping. This is by design to optimize for speed and agile development.

Two-Phase Creation Workflow

Phase 1: Fast MVP Creation

/fluxwing-create my-button
# Creates component with default state only

Result: Minimal, MVP-ready component for quick prototyping and stakeholder discussions.

Phase 2: Add Interactive Polish

/fluxwing-expand-component my-button
# Adds hover, active, disabled states automatically

Result: Fully interactive component like the examples in this directory.

What's in This Directory

All examples are production-ready templates showing:

Complete state coverage (default, hover, focus, disabled, etc.)
Full metadata and accessibility attributes
Proper variable definitions
ASCII art for all states

These serve as:

Reference patterns for component structure
Visual examples of what expanded components look like
Templates you can copy and customize

Using These Examples

View an Example

/fluxwing-get primary-button

Copy to Your Project

/fluxwing-library
# Browse and copy bundled templates

Create from Scratch

/fluxwing-create my-component
# Then expand when needed:
/fluxwing-expand-component my-component

Available Examples

Buttons: primary-button, secondary-button
Inputs: email-input, password-input, text-input
Cards: card, pricing-card
Forms: form components
Navigation: navigation components
Feedback: alert, badge components

All examples follow uxscii standards and best practices.

Need More?

Component creation guide: See ../docs/03-component-creation.md
ASCII patterns: See ../docs/06-ascii-patterns.md
Quick start: See ../docs/01-quick-start.md

2.1 KiB Raw Blame History