Examples
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.
#Reference apps in this repo
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.
#Recipe gallery
AppShell + Sidebar + Header for a typical product
dashboard chrome.
Form, FormField, Tabs, and Banner for
organisation/team settings surfaces.
Field + Label + Input + FieldDescription
FieldErroras the canonical form-row composition.
The shell rendering this site, composed from Sidebar, Breadcrumb,
and SearchInput.
#Theme + component import
Every example boots from the same two-line setup. Theme CSS first, components CSS second.
import "@froggdesign/theme/styles.css";
import "@froggdesign/enter-ui/styles.css";#Usage
Components import directly from the package root.
import { Button, Card, CardContent } from "@froggdesign/enter-ui";
export function Example() {
return (
<Card>
<CardContent>
<Button>Save changes</Button>
</CardContent>
</Card>
);
}#Where to go next
- See Installation for the consumer setup outside of this monorepo.
- See Theming for token overrides per-app or per-scope.
- Browse the Components reference for live previews and props.