Overview
A refined React component library built on the FroggDesign visual language.
EnterUI turns the FroggDesign visual language into a production-ready React component library for dashboards, SaaS apps, internal tools, and product interfaces. It is neutral-first, token-driven, accessible by default, and open to override without requiring Tailwind.
#Install
pnpm install @froggdesign/enter-ui @froggdesign/themeimport "@froggdesign/theme/styles.css";
import "@froggdesign/enter-ui/styles.css";#Component Families
Button, Card, Badge, Alert, Avatar, Separator, Tabs, and Accordion provide the baseline product interface surface.
Form, FormField, Input, TextArea, Label, Field, Checkbox, RadioGroup, Switch, Select, Combobox, ToggleGroup, Slider, and DatePicker cover common data entry flows.
Dialog, ConfirmDialog, Sheet, Popover, Tooltip, HoverCard, DropdownMenu, ContextMenu, and CommandMenu use focused Radix primitives for behavior.
Table, DataTable, Toast, Banner, Progress, Spinner, Skeleton, and EmptyState support product data, loading, messaging, and result states.
Header, Sidebar, AppShell, Container, Stack, Cluster, Grid, Breadcrumb, Pagination, SearchInput, CopyButton, CodeBlock, and Kbd help compose complete tools.
EnterUI is beautiful by default, flexible by design, and intentionally not Tailwind-dependent.
#Foundation
@froggdesign/tokens owns primitive and semantic design values.
@froggdesign/theme publishes CSS variables for light, dark, tokens, and full styles.
@froggdesign/enter-ui exports composable React components with .eui-* classes.
@froggdesign/enter-ui-utils owns shared helpers such as cn.
#Design Rule
EnterUI defaults should be refined enough without customization. Green is a signal, neutral surfaces carry hierarchy, borders clarify structure, and shadow appears only when elevation has a job.