A code generation toolkit powered by LLMs for building apps with the Glide UI component library.
This playground is a working environment for generating, previewing, and testing Glide UI experiences against the current component library and themes. The left panel is for prompts, settings, schema, and recent output. The right side is the live preview or result surface.
Screen
Generates a single route-level screen from a prompt and optional schema.
App
Generates a broader multi-screen application shell and previews the resulting bundle.
Test
Runs a suite of saved prompts so you can compare generator behavior across cases and models.
JSON Render
Streams a JSON UI spec from an LLM and renders it live with the Glide UI component registry.
Browse the full component library interactively in Storybook.
Glide UI is purpose-built for mobile-first applications. Unlike typical component libraries that bolt on responsive behavior as an afterthought, Glide UI makes opinionated choices that prioritize touch interfaces and small screens.
Inverted Typography Scale
Most libraries start with small text and scale up for larger screens. Glide UI does the opposite — base text is 16px on mobile and scales down to 14px on desktop (≥768px). Same for text-sm (14px → 12px), text-lg (18px → 16px), and so on. This ensures legibility on touch devices without requiring manual overrides.
Scalable Spacing via --spacing-scale
All spacing is multiplied by a single --spacing-scale CSS variable (e.g. calc(.5rem * var(--spacing-scale, 1))). Switching from the compact Industrial theme (0.875) to the generous Smooth theme (1.25) rescales every margin, padding, and gap in one shot — no class changes needed.
Full App Chrome, Not Just Primitives
Libraries like shadcn/ui give you buttons and modals — Glide UI also ships AppShell, Nav (top or sidebar), ScreenWrapper, and TabBar. These handle sticky headers, fixed bottom navigation, max-width constraints (--page-max-width), and page padding out of the box. You get a production app shell, not just a component kit.
Theme Variants, Not Just Dark Mode
Beyond light/dark, Glide UI offers distinct design languages: Industrial (sharp corners at --radius: 0.25, zero shadows, tight spacing) and Smooth (generous rounding at --radius: 1.5, purple accents, relaxed spacing). All colors use OKLCH for perceptual uniformity.
Mobile-Native Animations
Sheet and modal transitions use custom slide-up-mobile/slide-down-mobile animations with native-feeling cubic-bezier easing. Page transitions leverage the CSS View Transitions API with .push (slide right) and .pop (slide left) classes for navigation that feels like a native app.
Smart Defaults for Data Components
DataTable and List include built-in pagination (20 items/page), skeleton loading states, and keyboard navigation. FilterToolbar comes in three variants — horizontal, vertical, and compact — so you pick a layout, not build one. Grid defaults to 2 → 3 → 4 columns across breakpoints with responsive gaps.
create:app
Generates a full multi-route React Router v7 application from a natural language prompt. Outputs route config, layouts, pages, and styles.
npx glide-ui create:app -p "A CRM dashboard"
create:screen
Generates a single screen/page component. Useful for adding screens to an existing app one at a time.
npx glide-ui create:screen -p "Settings page" -f src/settings.tsx
components:list
Lists all available components in the library, grouped by category (charts, chrome, data, display, feedback, forms, etc.).
components:info
Returns detailed documentation for specific components including props, usage examples, and guidelines.
npx glide-ui components:info -t chrome/nav
| Flag | Description | Default |
|---|---|---|
-p, --prompt | Natural language description | Required |
-s, --schema | Data schema for the app | Optional |
--model | LLM model to use | claude-opus-4-5 |
--json | Output raw JSON to stdout | false |
-f, --file | Output file path (create:screen only) | stdout |
--debug | Debug logging: dev, file, or off | off |
The create:app command produces a complete React Router v7 app structure with typed routes, loaders, and Glide UI components. A typical output includes:
app/root.tsx — HTML shell, meta tags, scroll restorationapp/routes.ts — Type-safe route configurationapp/routes/_layout.tsx — Shared layout with ScreenWrapperapp/routes/_index.tsx — Main page with full interactivityapp/routes/*.tsx — Additional detail/sub-pagesapp/styles.css — Tailwind CSS importsThese are common issues encountered when using the CLI. Being aware of them will save you debugging time.
The CLI generates code using 60+ components from @glide/glide-ui, organized into these categories:
Charts
Area, Bar, Line, Pie, Radar, Sankey, Scatter, Treemap, and more
Chrome
AppShell, Nav (top/sidebar), ScreenWrapper, TabBar
Data
DataTable, FilterToolbar, List
Display
Accordion, Avatar, Badge, Card, Carousel, Image, ImageGallery, Text
Feedback
ProgressBar, Skeleton, Spinner, Toast
Forms
Button, Input, Select, Checkbox, Radio, Switch, Textarea, CalendarPicker