Examples

Three runnable consumer apps live inside the monorepo and exercise the public package surface end to end. They show EnterUI working in Next.js and Vite without a Tailwind setup.

#Standalone product contract

/enter-ui/examples is the catalogue. Use Examples in the shared top navigation to find it from the homepage or docs. The navigation highlights Examples on both the catalogue and this guide. Every nested example owns its product navigation and starts directly in that product, including direct links and reloads. The root and EnterUI route layouts provide no marketing header, docs sidebar, gallery toolbar, or site footer. Product navigation stays inside the product. FroggX additionally provides an unobtrusive footer link to the example catalogue, as required by its product brief. Other products keep catalogue and component documentation links in the catalogue. Use the product name in browser titles and keep the brand link inside its own workspace.

These products use local sample data without a live backend. Actions should complete a coherent local workflow, with validation, empty/error states, and clear confirmation. Disclose simulated reservations, payments, or messages at the relevant step. State persistence and reset behavior must be documented per product rather than implied to work across all demos.

Documentation CSS must remain scoped to documentation surfaces. Product styling comes from the public theme and EnterUI components, with layout and appearance selected through their public props. The standalone contract is covered by apps/web/app/enter-ui/examples/standalone-contract.test.tsx.

#Catalogue names

The catalogue uses the same product names as the apps it opens, with separate category labels: FroggDesign (business management), Frogg Studio (content management), FroggTravel (travel and booking), Frogg Labs (revenue operations), Portal (SaaS landing page), FroggX (crypto exchange), FroggBoard (team projects), FroggCommerce (store), FroggSpace (coworking), FroggDesk (support), and FroggMoney (finance). All eleven catalogue cards use a real application screenshot at the same 16:10 aspect ratio, a compact product identity, a short description, and one action. The responsive catalogue uses EnterUI PageHeader, Card variant="media", Grid, and layout props; its skip link targets the example list. Each app action has a distinct accessible name and keeps the existing route.

#Styling rule for every EnterUI example

Every EnterUI example must use the public components and their supported layout props and variants as shipped. Example screens and copyable example code must not add custom CSS, CSS modules, Tailwind styling, inline style, or className to change the appearance of EnterUI components. If the available components cannot produce a usable layout, improve the EnterUI component and document the gap instead of styling around it in an example. This rule applies to all examples, not just the FroggDesign and internal dashboard demos. Some older example routes still need migration to meet it.

The SolidJS renderer does not have a dedicated example app yet. Use the SolidJS guide for package setup and current component coverage.

#FroggTravel product flow

FroggTravel is an independent consumer travel app: search and sort destinations, save favorites, inspect a destination, enter dates and travelers, review an itemized quote, and confirm a sample booking. My trips keeps confirmations, itineraries, and cancelled bookings available after refresh. A draft, favorites, and bookings persist only in this browser's localStorage; search filters live in the URL. No booking, email, payment, or provider API runs.

Prices are USD per traveler per night plus a visible 5% service fee. Dates must be current or future, stays last 1–30 nights, and groups contain 1–8 travelers. The checkout collects contact details only; no card or passport is requested. The product uses PageLayout variant="storefront" and public components without app CSS, className, or inline style overrides. Legacy operational routes redirect to the relevant traveler view; they are not shown in product navigation.

The travel search and booking forms use EnterUI DatePicker for check-in and check-out. Check-in starts today, check-out is limited to 1–30 nights after check-in, and an incompatible check-out is cleared when check-in changes. The shared picker supports keyboard navigation, visible focus, and constrained popover placement without local calendar styles.

#Landing composition

The landing example uses PageLayout variant="landing", PageHeader variant="hero", and SectionHeader variant="marketing" with public layout primitives. Its styling ships with EnterUI; the route contains no CSS, className, or inline style overrides. Navigation uses native Link components, the Growth/Operations switch updates the sample metrics and chart, and the signup form validates locally without sending data. Prices and metrics are illustrative. The pricing switch compares monthly and annual totals. The lower page pairs a split FAQ and product call to action with a bundled editorial workspace image. The image is also listed in the CMS Editorial media category. Product navigation stays within Portal; the catalogue supplies links to the other examples.

Example identity uses Lucide icons, existing destination photography, local coin marks, and industry icons in the FroggDesign workspace switcher. New shared media is served from /enter-ui/assets/ to avoid the legacy /examples/ page redirect. Asset provenance is recorded in apps/web/public/enter-ui/assets/README.md.

#Internal dashboard contract

The FroggDesign multi-SaaS demo lives in apps/web/app/enter-ui/examples/froggdesign, alongside Travel, FroggX, and the other product demos. Its route, components, mock service, and seed data are owned by the web app. It uses persistent local demo data, no backend, and no EnterUI style overrides. Its ENTERUI_GAPS.md records patterns that need fuller library support.

The internal dashboard is the no-override React reference. Its complete source is apps/web/app/enter-ui/examples/internal-dashboard/page.tsx.

It provides Overview, Content, Media, Team, Activity, and Settings sections with hash navigation and a mobile menu. Content supports search, sorting, preview, draft creation/editing, review, publishing, archiving, and restoration. Local team invitations validate email addresses and prevent duplicates. Settings control the demo review workflow. Media is a read-only bundled asset library. It uses public EnterUI UI components and props without page-specific CSS, className, or inline style overrides. Data resets on reload; the audience chart is sample data. There is no email delivery or live publishing. Authentication, persistence, authorization, and backend integration remain application responsibilities.

#Reference apps in this repo

Run the maintained product examples with pnpm dev:web, then open http://localhost:3000/enter-ui/examples. The web app consumes EnterUI through its public package exports. Standalone framework integration projects have been removed; package artifact checks remain available with pnpm test:packages.

#Recipe gallery

#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-react/styles.css";

SolidJS apps import the renderer CSS instead:

import "@froggdesign/theme/styles.css";
import "@froggdesign/enter-ui-solid/styles.css";

#Usage

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>
  );
}

#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.

#Five persistent local products

Board, Commerce, Space, Desk, and Money each own a versioned localStorage key (froggboard.product.v1, froggcommerce.product.v1, froggspace.product.v1, froggdesk.product.v1, froggmoney.product.v1). Empty valid stores stay empty; unreadable schemas keep a recovery copy before loading sample data. Storage failures show a warning and preserve the open in-memory session. Normal writes read the latest local state first, and storage events refresh other open tabs. This is a single-browser simulation, without backend or authentication.

• Board: project archive/restore, synchronized board/list, task CRUD, drag-and-drop plus keyboard movement, assignees, priorities, deadlines, tags, checklists, comments and history.
• Commerce: stock per finish, persisted favorites/cart, validated contact and shipping, atomic checkout, duplicate-submit protection and local tracking.
• Space: capacities and facilities, tomorrow–90-day calendar bounds, overlap checks, per-hour pricing, reschedule and cancellation releasing slots.
• Desk: queue filters, assignment and tags, distinct internal notes/local replies, first-response SLA and an audit trail shared with ticket details.
• Money: multi-item invoices, tax/discount rounding, local issue/payment, duplicate payment rejection, expense approval, cash-basis charts and CSV export.

Photos use EnterUI Media with loading/failure fallbacks. Every product is composed from public EnterUI props without custom page styles. See each route's README and docs/work/enterui-products.md for acceptance evidence and limitations.

#FroggX spot exchange

FroggX opens Markets, with dedicated /trade, /portfolio, /orders, /activity, and /settings routes beneath that prefix. The selected trade pair is in the URL, for example trade?pair=BTC-USDC. Every route supports direct access and refresh without documentation chrome.

Search, sort, and favorite seeded USDC pairs; review market and limit orders; inspect available and reserved holdings; confirm cancellation; explicitly fill eligible limits; and simulate deposits and withdrawals to sample wallets. Market orders fill at the seeded price. Limits reserve cash including the 0.1% fee, or the sold asset quantity. Cancellation releases the reservation exactly. Buy limits at or above the seeded price and sell limits at or below it become eligible for the explicit fill action. All balance movements share one ledger.

The versioned froggx.exchange.v2 localStorage model includes balances, orders, ledger, favorites, and preferences. Corrupt or incompatible data is backed up under .recovery before restoring seeds. Storage failures preserve an in-memory session and show a warning. Reset requires confirmation. There is no backend, live feed, credential, payment, or wallet integration. See the route README for precision, deterministic clock, persistence limits, and verification evidence.

Run product demos with pnpm dev:web, then open /enter-ui/examples on port 3000. All maintained examples live in apps/web/app/enter-ui/examples/.

#Navigation behavior

Examples share client navigation for internal links. Moving between product views keeps the workspace mounted; Back and Forward restore the selected view and URL-addressed record. Product links prefetch on pointer or keyboard intent when handled by the shared router boundary. Downloads, external links, modified clicks, and in-page anchors keep their normal browser behavior.