Uilora Tags Bento
Light bento grid with colorful rotated tag cloud, interactive package manager install UI, avatar grid, SWOT quadrant, and stacked component preview cards.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| title | string | Get started in seconds | Heading shown in the install card. |
| description | string | Install Uilora and add production-ready components to your project instantly. | Subtext below the install card heading. |
| accentColor | string | #a78bfa | Accent hex used for active package manager tab, CTA button, avatar badge, and stacked card hover hint. |
When to Use
Perfect for SaaS product pages, component library homepages, and developer tool landing pages that want to showcase community, quick setup, and ecosystem breadth. The tag cloud immediately communicates technology coverage.
Best Practices
Purple, violet, or teal accent colors work best against the light background. Keep the install card title short (4–6 words) for best visual balance. The SWOT card is dark (#111118) and acts as a visual anchor — avoid overriding it.
Why This Component Matters
Combining social proof (avatars), instant setup (install card), and breadth (tag cloud) in a single view reduces onboarding friction. The stacked component preview cards invite exploration and signal product depth.
FAQ
QAre the package manager commands real?
The commands are illustrative Uilora CLI commands. Wire the button to your actual docs URL by modifying the View docs button href.
QCan I change the tags?
The tags array is defined at the top of the component. Edit the label, color, text, and rotate fields to customize the cloud.
QHow do I change the SWOT content?
Edit the swotData array inside the component. Each item has label (S/W/O/T), full name, color, and a short desc string.
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.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.