Reference apps and integration recipes that consume EnterUI in real frameworks.
Two reference apps live inside the monorepo and exercise the public package surface end to end. They are the fastest way to see EnterUI working in Next.js and Vite without a Tailwind setup.
The SolidJS renderer does not have a dedicated example app yet. Use the SolidJS guide for package setup and current component coverage.
Fullscreen EnterUI dashboard preview that opens as a standalone product surface in a new tab.
Fullscreen first-view landing composition built from EnterUI primitives.
Fullscreen FroggTravel product app with search, planner, booking, itinerary, analytics, operations, and content tools.
Fullscreen FroggX exchange workspace with markets, charting, order ticket, portfolio, treasury flows, risk controls, and integration panels.
examples/next-app — a Next.js App Router consumer that imports the public
packages and shows shell, forms, and overlays composed from EnterUI primitives.
examples/vite-app — a minimal Vite + React setup that exercises the same public
surface without any Next.js features.
Run them locally:
pnpm install
pnpm --filter @froggdesign/example-next-app dev
pnpm --filter @froggdesign/example-vite-app devBoth consume packages through their public exports map, exactly like an external
consumer would after pnpm add @froggdesign/enter-ui-react.
AppShell + Sidebar + Header for a typical product
dashboard chrome.
Form, FormField, Tabs, and Banner for
organisation/team settings surfaces.
Field + Label + Input + FieldDescription
FieldError as the canonical form-row composition.The shell rendering this site, composed from Sidebar, Breadcrumb,
and SearchInput.
Every example boots from the same two-line setup. Theme CSS first, components CSS second.
import "@froggdesign/theme/styles.css";
import "@froggdesign/enter-ui-react/styles.css";SolidJS apps import the renderer CSS instead:
import "@froggdesign/theme/styles.css";
import "@froggdesign/enter-ui-solid/styles.css";Components import directly from the package root.
import { Button, Card, CardContent } from "@froggdesign/enter-ui-react";
export function Example() {
return (
<Card>
<CardContent>
<Button>Save changes</Button>
</CardContent>
</Card>
);
}