Botanic Layout
Organic bento grid with botanical themes and curved shapes.
Main Features of Botanic Layout
How to Use Botanic Layout in Next.js
Installation Guide for Botanic Layout
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
imageSrc | string | https://images.unsplash.com/photo-1518531933037-91b2f5f229cc?q=80&w=1527&auto=format&fit=crop | Main image source URL. |
imageAlt | string | Plants | Main image alt text. |
title | string | Monstera | Main card title text. |
description | string | Exploring the fractal patterns found in deep jungle flora. | Main card description text. |
label | string | Scientific Name | Top pill label text. |
value | string | Deliciosa | Top pill value text. |
bottomLeftText | string | Rare Species | Bottom left card text (supports for line breaks). |
percentage | string | 98% | Bottom right card percentage value. |
percentageLabel | string | Oxygen | Bottom right card label text. |
backgroundColor | string | #f4f7f2 | Background color (hex, rgb, or hsl). |
primaryColor | string | #1a3c28 | Primary color for main elements (hex, rgb, or hsl). |
secondaryColor | string | #dcead8 | Secondary color for accents (hex, rgb, or hsl). |
lightColor | string | #e6f0e9 | Light color for text overlays (hex, rgb, or hsl). |
textColor | string | #3a5a40 | Text color (hex, rgb, or hsl). |
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling.
View Component
Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics.
View Component
Neo-Brutal Layout
Bold neo-brutalist bento grid with chunky borders and vibrant colors.
View Component
When to Use
Ideal for botanic research labs, eco-conscious brands, and Next.js applications that want an organic 'Botanic' aesthetic. Use this layout to communicate growth, oxygen, and natural patterns through curved shapes and earthy green tones.
Best Practices
Maintain consistent spacing within your design system by using soft, organic grid gaps. Follow React best practices by pairing this with approachable sans-serif typography. Optimize for performance by using efficient image masks.
Why This Component Matters in Modern UI Development
Organic aesthetics communicate health, sustainability, and digital craft. This production-ready UI template helpsคุณ build an interface that feels alive and 'Breathing', adding a unique structural signature to your project.
Frequently Asked Questions
QHow were the 'Oxygen' stats made?
The component features a localized status card (default 98% Oxygen) designed to showcase scientific metrics or environmental data readouts.
QCan I use it for research?
Absolutely, with scientific labels and specific detail pills, it's perfect for documenting species or ecological project milestones.
QIs it mobile responsive?
The organic curves and grid spans are fully responsive, ensuring the botanical feel remains consistent on all device types.