Patterns

Patterns are recurring compositions of organisms used across Velon products. They’re documented here as canonical examples. not as exported components. so engineers can copy the shape without coupling to a wrapper. Capturing the shape once, for everyone to reuse, is Vantagem: less friction per screen, more velocity across the product line.

On the roadmap

• Forms. Label + Input + helper / error, validated with react-hook-form. Closes when the typed Form integration ships (#11).
• Wallet (balance + actions). gradient header card + MoneyAmount + QuickActionButton row. Closes when domain components ship (#12).
• Onboarding. multi-step layout with Progress, Card, Form, contextual Alert for KYC pendency.
• Billing / charges. table of charges with status Badge, row actions via DropdownMenu, drill-in via Sheet.
• Empty states. illustration + CardTitle + CardDescription + primary Button. Standardized layout across “no transactions yet”, “no merchants linked”, “no notifications”.

How to add a pattern

1. Identify a composition that’s appearing in 2+ apps with minor variation.
2. Document it here as MDX with a working live example built from existing organisms. no new exports.
3. If, after 2-3 patterns reuse it, the composition stabilizes, propose elevating it to a domain component (@velon-finance/ui molecule or organism).