Refined component renderer packages built on the FroggDesign visual language.
Overview defines how EnterUI handles refined component renderer packages built on the froggdesign visual language, including default structure, accessible states, and token-driven styling.
EnterUI turns the FroggDesign visual language into production-ready component packages for dashboards, SaaS apps, internal tools, and product interfaces. React is the primary renderer, with a SolidJS renderer for stateless and presentational primitives.
pnpm install @froggdesign/enter-ui-react @froggdesign/themeimport "@froggdesign/theme/styles.css";
import "@froggdesign/enter-ui-react/styles.css";SolidJS apps use @froggdesign/enter-ui-solid and
@froggdesign/enter-ui-solid/styles.css. See
SolidJS for current coverage.
Button, IconButton, Link, Card, Badge, Text, List, Alert, Avatar, Separator, Tabs, Accordion, Disclosure, and copy-friendly primitives for polished product surfaces.
Form, Field, Fieldset, ValidationSummary, Input, CurrencyInput, MaskedInput, URLInput, Select, Combobox, MultiSelect, TagsInput, DatePicker, CronInput, RecurrenceEditor, and scheduling controls.
Table, DataTable, DataGrid, SavedViews, SortMenu, DensityToggle, ColumnVisibilityMenu, BulkEditPanel, FilterBuilder, KanbanBoard, TransferList, and operational table utilities.
AppShell, Header, Sidebar, SideNav, NavigationRail, WorkspaceSwitcher, AppSwitcher, PageLayout, SplitView, PageHeader, Toolbar, Breadcrumb, and navigation primitives.
Toast, Banner, Progress, Spinner, Skeleton, EmptyState, LiveRegion, Announcer, ActivityTimeline, ReleaseStepper, AgendaList, and audit-friendly workflow components.
MetricCard, ComparisonMetric, TrendIndicator, Meter, Gauge, Sparkline, LineChart, AreaChart, StackedBarChart, Heatmap, BarChart, DonutChart, and Legend without a heavy chart dependency.
@froggdesign/tokens owns primitive and semantic design values.
@froggdesign/theme publishes FroggDesign --fd-* CSS variables for light and dark mode.
@froggdesign/enter-ui-react exports React components, .eui-* classes, and component-facing variables.
@froggdesign/enter-ui-solid exports SolidJS primitives with the same visual contract.
@froggdesign/enter-ui-utils owns small helpers such as cn.
EnterUI should feel clean, premium, calm, precise, and product-focused. Neutral surfaces carry hierarchy. Green appears as a small success or selection signal, not as a dominant theme. Components should feel ready for repeated product work, not like decorative demos.