Uilora Night Grid
Dark luxury bento grid on a near-black background. Features a hero card (col-span-2) with an animated constellation SVG and gradient border, plus 4 feature cards. Georgia serif headings with monospace accent labels.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| title | string | Everything your team needs to ship | Section heading displayed in a large Georgia serif font. |
| description | string | Uilora gives developers a complete, production-ready component system… | Subtitle below the heading in zinc-400. |
| accentColor | string | #818cf8 | Hex accent color used for the gradient border on the hero card, icon backgrounds, monospace label, and highlighted constellation dots. |
When to Use
Use for dark-themed SaaS landing pages, developer tool homepages, or any product that wants a premium 'night mode' aesthetic. Works especially well on pages that already have a dark background.
Best Practices
Indigo, violet, and emerald accents look best on the near-black background. Keep card descriptions to 1-2 lines. The hero card's 700+ headline is hardcoded — edit it if your product stat differs.
Why This Component Matters
The animated constellation SVG creates genuine visual interest without images or heavy assets. The gradient border (1px gradient wrapper + inner dark card) produces a premium glow effect that's impossible with standard border styles.
FAQ
QHow does the gradient border on the hero card work?
A wrapper div has a linear-gradient background (accentColor at 55% → near-transparent). Inside it is the actual dark card div. Because the wrapper is p-px (1px padding) and the inner card matches the background color, only the 1px gradient strip shows as the border.
QCan I change the constellation pattern?
Yes — edit the `dots` array (x/y coordinates) and the `edges` array (pairs of dot indices to connect with lines) inside the Constellation component. The `hi: true` property on a dot makes it larger and accent-colored.
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.