Ready
VineyardLayout
Main page wrapper with hero section, tool branding, and related tools footer.
Vineyard is the documentation and demo pattern for the Grove ecosystem. Each tool gets its
own /vineyard route — a consistent, discoverable way to explore what each tool does,
how it works, and where it's headed.
Components
These shared components create consistent showcase pages across all Grove tools.
Ready
FeatureCard
Showcase individual features with icons, status badges, and optional demo slots.
Ready
StatusBadge
Consistent status indicators: Ready, Preview, Demo, Coming Soon, In Development.
Ready
DemoContainer
Wrapper for interactive demos with mock data indicator and visual styling.
Ready
CodeExample
Syntax-highlighted code blocks with copy-to-clipboard functionality.
Ready
TierGate
Tier-based access control with blur preview and upgrade prompts.
Ready
RoadmapSection
Visual timeline showing built, in-progress, and planned features.
Status Badges
All Status Types
Visual indicators for feature readiness
Ready Preview Demo Coming Soon In Development
Quick Start
src/routes/vineyard/+page.svelte Svelte
<script>
import {
VineyardLayout,
FeatureCard,
StatusBadge
} from '$lib/vineyard';
</script>
<VineyardLayout
tool="amber"
tagline="Your files, preserved"
status="preview"
>
<FeatureCard
title="Storage Overview"
description="See usage across posts and media"
status="ready"
icon="HardDrive"
/>
</VineyardLayout>Grove Vineyards
Explore what each Grove tool offers through their dedicated Vineyard pages.
Roadmap
What's built, what's next, and what's planned
Built
6- Core component library (7 components)
- Grove glassmorphism design system
- Lexend typography
- Responsive layouts
- Copy-to-clipboard for code blocks
- Status badge animations
In Progress
2- vineyard.grove.place showcase site
- Integration guides for Grove tools
Planned
5- Amber Vineyard page
- Foliage Vineyard page
- Storybook component preview
- Unit test coverage
- Accessibility improvements