Uilora Feature Grid
Dark bento feature section with animated chart, component table, shield visual, and framework integration hub — inspired by fintech UI aesthetics.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| title | string | Essential tools for your design growth | Main heading. The last two words are rendered in muted white for a two-tone effect. |
| description | string | Unlock your design potential with Uilora's powerful suite of 700+ components designed to drive your product success. | Subtitle below the heading. |
| accentColor | string | #6366f1 | Hex color used for the glow in the shield/reliability card. |
When to Use
Ideal for SaaS landing pages, product marketing sections, and component library showcases that need a premium dark feature grid. Use this layout to present 4 key value propositions with rich inner UI mockups.
Best Practices
Keep the title under 8 words for the two-tone split to look natural. The dark background pairs best with a page that also uses a dark or gradient hero section. The inner UI mockups are intentionally Uilora-branded — clone and customize for other products.
Why This Component Matters
Feature grids communicate product depth and credibility. The dark fintech-inspired aesthetic signals quality and seriousness, making Uilora feel like an enterprise-grade component library.
FAQ
QHow does the title two-tone work?
The component automatically takes the last 2 words of your title string and renders them in white/35 opacity, creating a natural muted accent effect.
QIs the chart dynamic?
The chart uses fixed data points for the preview. Clone the component and pass a custom data array to make it dynamic.
QCan I change the integration nodes?
The left/right framework nodes (Re, Nx, Rm, Vt, Sv, As) are hardcoded in this version. Fork the component to swap them out for your specific tech stack.
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling, branded for Uilora.
Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics, branded for Uilora.
Wabi Sabi Layout
Japanese-inspired bento grid with wabi-sabi aesthetics, imperfections, and Uilora branding.