2,480
+12.6%
Universal CSS Infrastructure
Let every interface haveReady-made answers
Gardener brings basic CSS, interactive components, business recipes, desktop adaptation, and machine-readable manifests into one system. People can develop directly, and AI can accurately select and use it without having to reorganize the style every time.
- Zero runtime dependencies
- Neutral default on white background
- Small rounded corner system
- Web and Desktop Sharing
94%
Assembling enterprise site
42Color theme
506Register component
11,498Tools
52Machine-readable page recipe
From one button to super CMS
Covers basic atoms, common components, high-density backend, mobile terminal, content commercialization, AI workspace and desktop WebView. The default is restrained enough and the combination ability is wide enough.
Complete base layer
Reset, Token, 24 / 12 grid, typography, spacing, size, logical direction, color, border, shadow, status and five-level responsive tool class.
Ready-to-deliver components
Forms, navigation, overlays, data, media, business, communications, legal, workflow, and Dashboard all have stable structures and state conventions.
AI native interaction
Message flow, thought process, tool invocation, approvals, Agent status, schedules, references, artifacts, model selection, and multimodal generation.
Complex business recipes
Login, mobile categories, CMS editor, media library, inbox, file management, form building, store listings, billing, and enterprise settings.
Desktop application adaptation
Tauri and Electron share the title bar, window control, activity bar, editing area, inspector, columns and status bar, and the bridge interface remains safe.
The environment matrix is complete
Light, Dark, System, High Contrast, RTL, Reduced Motion, Forced Colors, Print, Mobile, Tablet and Desktop.
Official Vue 3 bindings · 1.0.0 Stable
The full power of CSS has become the Vue API
@gardener/vue Complete mapping of 506 components and 66 DOM behaviors, providing plug-ins, type-safe components, directives, Composable, ten-axis theme Provider, v-model, SSR and Tauri / Electron adaptation. Each CSS component has its own G* When exporting, AI can directly select components without reassembling styles.
506 components
538 runtime exports
29 entry points
28 CSS packs
Vue 3.4+
App.vueImport on demand · Complete type
<script setup lang="ts">
import { GButton, GCard, GardenerProvider } from "@gardener/vue";
import "@gardener/vue/style.css";
</script>
<template>
<GardenerProvider theme="garden" mode="light" shape="subtle">
<GCard>
<GButton variant="primary">Save</GButton>
</GCard>
</GardenerProvider>
</template>
Official React bindings · 1.0.0 Stable
The same set of CSS also has a complete React component model
@gardener/react Maps 506 CSS components and 66 DOM behaviors into a type-safe React API, providing precise native element types, ten-axis theme providers, controlled and uncontrolled value bridging, Imperative Handles, 7 Hooks, SSR / Hydration, and isolated Tauri / Electron adaptation entrances. Components, styles, and machine-readable directories maintain a one-to-one correspondence.
506 components
538 runtime exports
29 entry points
28 CSS packs
React 18.3–19.x
App.tsxImport on demand · Complete type
import { GButton, GCard, GardenerProvider } from "@gardener/react";
import "@gardener/react/style.css";
export function App() {
return (
<GardenerProvider theme="garden" mode="light" shape="subtle">
<GCard>
<GButton variant="primary">Save</GButton>
</GCard>
</GardenerProvider>
);
}
Official AngularJS bindings · 1.0.0 Stable
Let large AngularJS legacy systems continue to use the full Gardener API
@gardener/angularjs Maps 506 CSS components and 66 DOM behaviors into AngularJS element/attribute directives, providing module factory, strict component subsetting, native ngModel, ten-axis theme, 3 injectable services, dynamic life cycle and isolated Tauri / Electron entry. It targets stock products that must maintain AngularJS 1.8.x and explicitly exposes the framework's EOL security boundaries.
506 directives
535 runtime exports
29 entry points
28 CSS packs
AngularJS 1.8.2–1.8.3
app.jsModule Factory · ngModel · Complete type
import "angular/angular.js";
import { createGardenerAngularJS } from "@gardener/angularjs";
import "@gardener/angularjs/style.css";
const gardener = createGardenerAngularJS(window.angular, {
components: ["button", "input", "card"],
});
window.angular.module("app", [gardener]);
// <button g-button gardener-variant="primary">Save</button>
// <input g-input ng-model="vm.keyword">
Official Blazor RCL · 1.0.0 Stable
From static SSR to desktop WebView using the same set of Razor components
Gardener.Blazor Map 506 CSS/hybrid components, 66 DOM behaviors, and 75 events to the strongly typed Razor API. Stable package with
net10.0 is the baseline, verified net11.0
Consumption, covering Blazor Web App, WebAssembly, Hybrid, Tauri, and Electron scenarios, and preserving SSR, Forms, Accessibility, and Ten-axis theme contracts.
506 components
66 behaviors
75 events
43 static assets
.NET 10/11
Dashboard.razorRCL · SSR · Strongly typed events
@using Gardener.Blazor.Components
<GardenerProvider Theme="garden" Mode="light"
Shape="small" Platform="desktop">
<GAppShell>
<GSidebar>Navigation</GSidebar>
<GMainRegion>
<GButton Variant="primary" @onclick="Save">
Save
</GButton>
</GMainRegion>
</GAppShell>
</GardenerProvider>Accurate column division, no longer temporary calculation
24-grid covers enterprise backend, CMS and complex forms, and 12-grid is compatible with traditional design drafts. There are stable interfaces for column width, offset, order, gridlines, spacing, container queries, RTL and printing.
Five levels of viewport response + three levels of container response480 / 768 / 1024 / 1280 / 1536px · CQ 480 / 768 / 1024px
View full raster document
Traditional page skeleton, also has stable interface
From the upper and lower main areas, left and right columns to Holy Grail, Master / Detail, Dock, adjustable columns and full-screen workspace, web, mobile terminals and Tauri / Electron can be directly selected without having to temporarily write page-level layout CSS.
Top / Main / BottomStart/Main/EndHoly GrailMaster/DetailList/Detail/InspectorFixed HeaderFixed SidebarSticky AsideSticky FooterDockSplit ViewFullscreenMobile Safe AreaDesktop ShellContainer QueryRTL/Print
16 types of finished skeleton + unified area partsViewport Responsiveness · Container Responsiveness · Logical Direction · Print Flattening · Desktop Workbench
View full zone layout documentation
Let the space determine the layout, do not let breakpoints guess the layout
Classic patterns such as Stack, Cluster, Sidebar, Switcher, Reel, Media Object, Masonry, and Bento have been solidified into intrinsic response interfaces. AI only needs to choose the intent and a few variables, no need to reinvent Flex, Grid, overflow and safe area rules.
STACK
ClusterWrapTags
Repel
M
Media ObjectMedia · Body · Action
→
StackClusterCenterSidebarSwitcherCoverReelFrameMedia ObjectAuto FitAuto FillBleedRepelImposterOverlayMasonryBentoAspect RatioScroll AreaScroll SnapSafe AreaSticky Region
22 stable primitives + zero JavaScript layoutIntrinsic Response · Container Query · RTL · Safe Area · Reduced Motion · Print
View complete primitive documentation
Page public structure, directly enter the delivery state
Unify the page header, toolbar, command bar, filtering and batch operations, and prepare the Loading, Empty, Error, 403, 404, 500, offline and maintenance status completely. AI-generated pages are no longer just “normal data.”
Content workspace
Page management
Manage content, status, and publishing times.
∅
Empty
There are also clear next steps for first use.
404
Not found
Stable fallback for invalid links.
⌁
Offline
The data security status is still informed when the network is disconnected.
Page HeaderSection HeaderSubheaderToolbarAction BarStatus BarCommand BarContext BarFilter BarBulk Action BarFooter BarFloating Action BarBack to TopDivider with TextSticky ActionsPage LoadingPage EmptyPage Error403404500OfflineMaintenance
23 complete page states and common structuresContainer Query · Sticky · Safe Area · RTL · Runtime · Print
View full page component documentation
From a TIP to a complete help closed loop
Tooltip, Popover, Callout, FAQ, Help Center, Tour, Spotlight, new feature tips, troubleshooting and feedback all use stable interfaces. When users encounter questions at any end, they have appropriate and consistent expressions.
Use the preview environment to confirm content before publishing to the production environment.
- Open help?
- Command PanelCtrl+K
TipInline HintHelp TextHelp TriggerTooltipRich TooltipHelp PopoverDefinitionCalloutNoteDo / Don'tKey HintShortcut ListHelp CardHelp PanelHelp CenterHelp TopicsFAQContextual HelpCoach MarkGuided TourSpotlightHotspotFeature HintWhat's NewHelp ChecklistTroubleshootingHelp Feedback
28 prompts, guidance and support modesCollision Aware · Keyboard · Focus Restore · RTL · Reduced Motion · Print
View complete help system documentation
Forms no longer start with a bunch of Inputs
Fields, Partitions, Horizontal and Inline Layout, Search/Password/Count, Select Groups, Validation, Name/Address/Amount, Conditions and Repeatables, Review and Submit Actions are all combined. AI only needs to select the business intent and does not have to organize the form CSS over and over again.
FormForm SectionFieldFieldsetForm RowForm GridHorizontal FormInline FormCompact FormInput GroupInput AffixSearch FieldPassword FieldClearable FieldCharacter CounterValidation StateValidation SummaryCheckbox GroupRadio GroupSwitch RowChoice CardsName GroupAddress GroupPhone GroupMoney GroupDate RangeTime RangeUnit FieldRange FieldFile FieldRepeatable FieldConditional FieldForm ActionsAutosave StatusForm ProgressForm ReviewConsent Group
37 traditional form structures + 5 types of interactive behaviorsContainer Query · Validation · Business Groups · RTL · Safe Area · Print
View full form combination documentation
Data not only needs to be displayed, but must be immediately available
48 data modes covering tables, records, lists, hierarchies, indicators, plans, maps and operations. There is a unified runtime for sorting, selecting, expanding, column management, filtering, and view switching.
Customer Revenue¥286K
128Active
6Risk
Selected 0 item
| Status | Operation | |||
|---|---|---|---|---|
| Galaxy Technology | Active | ¥128,000 | ||
|
Enterprise Edition customers · Last contacted 2 days ago
|
||||
| Yuanshan Design | To be followed up | ¥86,000 | View | |
| Linhai Education | Risk | ¥42,000 | View | |
TableResponsive TableData GridEditable GridTree TableGrouped TableExpandable TableComparisonPivotDescription ListKey ValueRecord DetailList GroupMedia ListDense ListVirtual ListTreeTimelineActivity FeedAudit LogKPIStat ListMetric CardSparklineProgress StatsChartLegendRankingStatus SummaryCalendarAgendaKanbanGanttOrg ChartMapMatrixHeatmapData ToolbarColumn ChooserSaved ViewsExport PanelData StateView SwitcherSelection SummaryDensityFilter SummarySort BuilderData Inspector
48 data display and operation modes + 8 types of reuse interactionsTable · Record · Metric · Planning · Spatial · Keyboard · RTL · Print
View full data combination document
From selecting one item to processing 100,000 records
Select all, invert selection, range selection, batch toolbar, Transfer, tree and cascade selection, people/organization/resource/media selector, date time range, save configuration and sort/group builder all have stable interfaces. AI doesn’t have to improvise complex backend selection processes.
Selection ControlSelect AllInvertRangeBatch ToolbarSelection ScopeTransferDual ListTree SelectCascaderMention PickerUser PickerOrganization PickerResource PickerMedia PickerIcon PickerColor PickerDate RangeTime RangeSaved FiltersSaved ViewsColumn ChooserSort BuilderGroup BuilderEntity PickerTag PickerRelation PickerBulk ConfirmationBulk ProgressPicker PanelPicker SummarySelection Summary
32 selections interact with batch mode + 7 categories of multiplexingMulti-select · Hierarchy · Search · Safe Area · Keyboard · RTL · Print
View full select component documentation
From uploading a file to completing the entire content production
Upload queue, file browsing, media library, image processing, document/PDF/audio and video viewing, code and rich text editing, Markdown, blocks, revisions, comments and auto-save all have ready-made structures.
Corporate Brand Manual.pdf
Home page cover.jpg
PDF
Brand Manual.pdf
IMG
Home page cover.jpg
File DropFile ListUpload QueueChunk UploadUpload ProgressFailed UploadFile CardFolder TreeFile BrowserFile PreviewMedia LibraryMedia GridMedia DetailsImage CropImage AnnotationDocument ViewerPDF ViewerVideo PlayerAudio PlayerCode EditorRich Text EditorMarkdown EditorBlock EditorRevision CompareAutosaveContent OutlineEditor ToolbarFind & ReplaceComment ThreadVersion HistoryFile PropertiesStorage Meter
32 file and content modes + 6 types of reuse interactionsUpload · Browser · Editor · Revision · Keyboard · RTL · Print
View full content system documentation
From the first login to every security audit
Login, registration, verification, MFA, Passkey, SSO, QR code, invitation, account and tenant selection, lock screen, session recovery, device management and security events have been combined into a stable page structure suitable for websites, mobile terminals, Dashboard and Tauri/Electron.
Enter the verification code sent to +86 138****6608
New device detected
Linux · Firefox, launched from Beijing.
Centered AuthSplit AuthSign InRegistrationPassword RecoveryPassword ResetEmail VerificationPhone VerificationMFAOTPPasskeySSOQR LoginMagic LinkInvitationFirst SetupLock ScreenSession ExpiredAccount ChooserTenant ChooserIdentity SwitcherProfile SetupAccount SecurityDevicesLogin ActivitySecurity AlertRecovery CodesTrusted DeviceConnected AccountsPassword StrengthConsentAuth Result
32 login and account modes + 8 types of reuse interactionsPassword · OTP · MFA · Passkey · SSO · Session · Identity · Security
View complete account system documents
From seeing the product to completing the transaction and refund
Product card, details, SKU, shopping cart, checkout, address, shipping, offer, invoice, payment, order, subscription, usage, billing and refund have become stable structures. Suitable for e-commerce, digital goods, SaaS, enterprise procurement, CMS commercialization and desktop clients.
Enterprise EditionGardener Studio
Studio Business Suite
¥699¥899-22%
Platform
G
Studio Business SuiteWindows · Enterprise Licensing
¥699.00
Shopping cart is empty
Product
Discount
Delivery
Cope
Product CardProduct ListProduct DetailProduct GallerySKU SelectorQuantity StepperPrice DisplayCart ItemCartMini CartCart SummaryCheckoutCheckout StepsAddress SelectorAddress CardShipping MethodPickup SelectorCouponPromotion ListInvoice InformationPayment MethodPayment SheetPayment ResultOrder SummaryOrder TimelineOrder DetailSubscription PlanPricing ComparisonUsage MeterBilling HistoryRefund StatusTax Summary
32 business and payment models + 7 types of reuse interactionsCatalog · Cart · Checkout · Fulfillment · Payment · Order · Billing
View full business and payment documents
Not a smaller desktop, but a full mobile app layer
Safe area, dynamic viewport, top bar, bottom navigation, Bottom/Action/Filter Sheet, pull-to-refresh, infinite loading, sliding operation, wheel selection, keyboard avoidance, mobile authentication and settlement, permissions and offline status have stable contracts and can be used directly for mobile web pages, PWA and Tauri/Electron mobile WebView.
Content Center
Notch and Home Indicator automatic protection.
PWA, Tauri and Electron share structure.
Mobile content streaming
Stable media, body and tail action slots.
Safe Area ShellTop App BarBottom NavigationBottom SheetAction SheetPull to RefreshInfinite LoadSwipe ActionsSwipe TabsMobile CategoryMobile FilterSticky Purchase BarMobile SearchMobile PickerWheel PickerFloating Action ButtonFullscreen DialogKeyboard AvoidanceGesture HintOffline BannerSegmented ControlMobile FeedCard CarouselMobile FormMobile AuthMobile CheckoutMedia ViewerKeyboard ToolbarSelection ModeSnackbarPermission PromptEmpty/Error State
32 mobile-specific modes + 14 types of reuse interactionsSafe Area · Touch · Sheets · Gesture · Keyboard · PWA · WebView
View complete mobile documentation
Turn web technology into a complete desktop workspace
Native title bars, window buttons, menus, and activity bars are just the starting point; document labels, adjustable columns, Dock, inspector, command panel, file selection, tray, multi-window, background tasks, updates, permissions, and crash recovery have all been stably combined and can be directly implemented in Tauri and Electron.
Desktop CMS
No reassembly required for high-density workspaces
Window Chrome, navigation, editing area, status area, and host bridge each have independent contracts.
Native TitlebarWindow ControlsMenu BarActivity BarDock PanelResizable Split PaneInspectorStatus BarCommand PaletteShortcut RecorderContext MenuUnsaved TabsDrag RegionWindow LoadingUpdate AvailablePermission RequestNative File PickerTray MenuMulti-windowDesktop WorkspaceWindow SwitcherRecent DocumentsDesktop ToolbarBottom PanelBackground TasksNotification CenterSync StatusUpdate ProgressCrash RecoverySingle InstanceDeep LinkAbout Dialog
32 desktop-specific modes + 11 types of reusable interactionsTauri · Electron · Window Chrome · Workspace · Native Bridge · Lifecycle
View full desktop documentation
AI interaction is not a chat box
In addition to dialogue, Composer and streaming answers, reasoning summarization, tool invocation and approval, multi-agent orchestration, source citation, Artifact, contextual memory, Token/fee, voice, permissions, privacy, security review and feedback evaluation are also required. Gardener makes the entire AI task chain into 32 modes that can be directly reused.
Generate Enterprise Portal Home Page for Super CMS.
Enterprise Portal recipe selected, checking components and permissions.
Matching Dashboard, CMS, permissions and desktop workspaces.
Allow writing to page template?
Modify only the generated directory of the current project.
AI WorkspaceConversation ListChat ThreadAI MessagePrompt ComposerAttachmentPrompt StarterPrompt LibraryMention / Slash MenuModel SelectorThinkingStreaming ResponseTool CallTool ApprovalAgent StatusAgent PlanMulti-agent BoardAgent HandoffSources / CitationsArtifact WorkspaceArtifact PanelAI File TreeVersion HistoryGeneration GalleryGeneration PlaceholderContext/MemoryCost / Rate LimitVoice SessionPermission ScopePrivacy NoticeSafety NoticeFeedback/Evaluation
32 AI native modes + 9 types of runtimeChat · Multimodal · Tools · Agents · Artifacts · Context · Safety · Evaluation
View full AI component documentation
From the component library, go to the complete page that can be directly generated
Category 16 solidifies public websites, personal content, enterprise backends, business workbench, and vertical industry portals into 32 full-page contracts. AI first selects the page type and then fills in business components and content. It no longer temporarily invents header, navigation, main area, side area and mobile folding rules.
Enterprise overview
Super CMS Operation Overview
The same full-page contract can switch business, personal, medical, financial or public service topics.
Published site28,640↑ 12.4%
Page Template486k32 full page entries
Pending review138Needs processing
Product LandingCorporate HomePersonal HomePortfolioBlog IndexArticleDocs PortalHelp CenterSearch ResultsContactPricingDashboardAdmin ListRecord DetailSettingsUser CenterNotificationsOnboardingCRMProject WorkspaceSupport CenterApproval CenterKnowledge BaseLearning PortalEvent PortalBooking PortalHealthcareFinancePublic ServiceMarketplaceCommunityStatus Center
32 full page modes + 52 machine readable recipesPersonal · Enterprise · Content · Operations · Industry · Cross-platform
View full solution document
42 color themes
Change the brand but not the components
Color themes are orthogonally combined with neutrals, fonts, shapes, densities, layers, animations, platforms, and operating systems. The white and light interface is always maintained here, and only the main brand color is switched.
Primary
Clear without being overly decorative
Buttons, links, focus and selected states automatically follow the theme.
Keyboard operable; each theme offers full 50–950 color gradations and independently readable foreground colors.
Predictable authoring · Stable 1.0.0
HTML is the interface
unified
g-
Prefixes, stable component naming, and declarative
data-g-* Behaviors that both humans and AI can quickly understand.
- Import by layerCore/Themes/Utilities/Components/AI
- Declarative runtimeAutomatic initialization and dynamic DOM observation
- Machine readablePublic API, components, tool classes, recipes and capabilities list
- Strict verificationEleven sets of closed schemas, 48 standard schema use cases, 10 build-specific use cases, 66 runtime unit tests, 125 real browser use cases and 24 structural use cases
index.html
<html data-g-theme="garden" data-g-mode="light">
<link rel="stylesheet" href="gardener.css">
<main class="g-dashboard">
<article class="g-card g-p-5">...</article>
</main>
<script type="module" src="gardener.runtime.js"></script>
</html>Only deliver the platforms and components really needed for the current page
5 platform files, 28 stable component packages and 506 component ownership mappings allow developers and AI to directly select official products without temporarily disassembling CSS. Syntax-level compression, Source Map, SHA-256/SRI integrity, reproducible builds, TypeScript typing, cross-version compatibility baselines, and release package gating are delivered with the build.
Platform File
Web, Mobile, Desktop, Tauri, and Electron automatically retain corresponding end capabilities.
Component package
Layout, forms, navigation, data, content, accounts, commerce, mobile, desktop and AI can all be introduced independently.
Component ownership
Each public component resolves to the complete package it belongs to, with explicit inclusions listed.
Dual Product Budget
The absolute upper limit of raw, gzip, Brotli and the 0.9.0 baseline growth will block release if any exceeds the limit.
Compatible Baseline
Entries, themes, runtimes, components and recipes can only be added; deletions must first pass the obsolescence period of at least two minor versions.
npm run build:platform -- --platform mobile --out dist/custom/mobile-app
npm run build:custom -- --components button,card,dialog --out dist/custom/account-ui
npm run verify:reproducible
npm run verify:compatibility
npm run test:types
npm run verify:package
npm run budgetEvery page must withstand the real environment
Executes 125 real browser use cases and 24 HTML structure use cases by default; complete configuration covers desktop three engines, Android/iPhone device portraits and WCAG automatic checks.
Desktop Multi-Browser
Chromium and WebKit enter default access control; Firefox provides independent and three-engine complete access control.
Mobile device
Pixel 7 and iPhone 13 are fully covered with 21 samples and Home two pages, and check 320px narrow screen, landscape screen, reflow and 44px touch target.
Accessibility
Axe WCAG 2 A/AA All automatic violation zeroes and covers keyboard and focus recovery, RTL, Reduced Motion, Forced Colors.
Structural Integrity
All 21 examples, Home landing page and document check parsing, ID, ARIA reference, title and viewport.
The same language covers all terminals
The page structure, theme token and interaction semantics are consistent, and only necessary density, window and safe zone adaptations are added at each end.
PC website
Enterprise website, portal, content website, e-commerce and SaaS.
Mobile Web/PWA
Safe area, touch density, bottom navigation and category page.
Dashboard
High-density data, tables, filters, and multi-column applications.
Tauri/Electron
Desktop title bar, window bridging and workbench layout.
AI products
Streaming messages, tools, agents, artifacts, and build states.
High-frequency pages do not need to be reassembled
Complex but highly reusable pages have been combined into recipes. AI should choose recipes first and then make limited adjustments using components and tool classes.
Enterprise LoginSSO · MFA · PasskeyMobile ClassificationTouch · Safe Area · Double ColumnDesktop CMSTree · Canvas · InspectorAI WorkspaceChat · Tools · ArtifactAnalysis backgroundKPI · Chart · Data tableFile ManagerDirectory · Grid · Upload QueueCommodity and SettlementDetails · Shopping Cart · OrderReports and InvoicesScreen · PDF · Print
Let AI choose, don’t let AI guess
The five-category list of Public API, components, tool classes, recipes and industry capabilities exposes the allowed names, entrances, platforms, status and response conditions in a structured way. The page generation process can be constrained, verified and reproduced.
Identifying page intent
End type, business category, density, content volume and interaction complexity.
Prioritize recipe selection
Select the closest page skeleton from 52 finished structures.
Combining Components and Tools
Only use public APIs and classes and behaviors that actually exist in the manifest.
Verify contract and environment
Pass Schema, keyboard, accessibility, RTL, print and response endpoint checks.
Start with a complete system.
Stop reinventing infrastructure for the next page.