Introduction
EnterUI turns FroggDesign into reusable React primitives for product interfaces.
EnterUI is a React and TypeScript component library built on the FroggDesign visual language. It provides polished defaults for product teams that need dashboards, SaaS interfaces, internal tools, and application surfaces without rebuilding common UI primitives from scratch.
EnterUI is the product package. FroggDesign remains the parent design system and owns the token model, theme variables, and visual direction.
#Positioning
EnterUI is designed around one practical promise: beautiful by default, flexible by design.
- Default styles are complete enough for production interfaces.
- Styling is CSS-variable-first and class-based.
- Tailwind works through
className, but is not required. - Complex behavior uses focused accessibility primitives where it matters.
- Public exports are versioned and treated as npm package contracts.
#Package Model
Primitive colors, typography, spacing, radius, shadow, and semantic token values.
CSS variables for light and dark mode plus token-level CSS entry points.
Small utilities used by EnterUI and consumers, including cn.
React components, component CSS, .eui-* classes, and component-facing variables.
#Component Scope
EnterUI currently covers core controls, forms, overlays, menus, data display, feedback, app layout, and advanced product UI primitives.
#Design Direction
EnterUI follows the FroggDesign rule: less green, more precision. Neutral charcoal and slate carry the interface. Green appears as a signal for selected or successful moments, not as a dominant background.
#When To Use EnterUI
Use EnterUI when you need a component system that feels like a mature product library, supports React and Next.js, remains portable across styling stacks, and can be themed through stable CSS variables.