Uilora Showcase
Purple gradient feature showcase with white card container and visual mockups.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| features | Array<{label, title, description, visual}> | 3 Uilora features | Array of feature items with label, title, description, and visual mockup. |
| title | string | Our Primary Features | Section heading text. |
| subtitle | string | Introducing Uilora... | Section subtitle text. |
| accentColor | string | #5227FF | Accent color for gradient and badge. |
When to Use
Perfect for product landing pages that want a bold, eye-catching feature showcase with a gradient hero and clean white card layout. Great for SaaS platforms and design tools.
Best Practices
Use 3 features for the best visual balance in the grid. Each feature should have a distinct visual mockup to maintain variety. Keep descriptions concise.
Why This Component Matters
The gradient-to-white contrast creates a strong visual anchor that draws attention to your key features. The visual mockups add credibility by showing real UI patterns.
FAQ
QCan I customize the gradient?
Yes, the accentColor prop controls the gradient hue. The gradient transitions from the accent color to a lighter shade.
QAre the mockups customizable?
Each feature accepts a visual prop that can be any React node — you can pass your own mockups or screenshots.
QDoes it work on mobile?
Yes, the grid collapses to a single column on mobile with all animations preserved.
Related Components
Uilora Dynamic
Interactive tiered pricing calculator with seat slider, billing toggle, and real-time cost breakdown.
Uilora Cloud Slider
Dark navy 3-plan cloud pricing with per-card sliders, add-on checkboxes, and live price calculation.
Uilora Matrix
Feature comparison matrix with 3 plans, monthly/yearly toggle, Pro spotlight, check/cross icons.