@froggdesign/enter-ui

Accessible React components for EnterUI, built with FroggDesign theme variables.

EnterUI is designed for product interfaces: SaaS apps, dashboards, internal tools, docs surfaces, and application UI that needs polished defaults without a required utility CSS stack.

Installation

pnpm install @froggdesign/enter-ui @froggdesign/theme

Import theme CSS before component CSS:

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

Public API

import {
  Button,
  Card,
  Dialog,
  Field,
  Input,
  Select,
  Table,
  Toast,
} from "@froggdesign/enter-ui";

Component families:

• Core: Button, ButtonGroup, IconButton, Link, Card, Badge, StatusIndicator, Text, List, DescriptionList, KeyValueList, Alert, Avatar, AvatarGroup, Separator, Divider, Tabs, Accordion, Disclosure
• Forms: Form, FormSection, FormActions, FormMessage, FormDescription, Input, PasswordInput, NumberInput, Stepper, TextArea, Label, Field, FormField, FieldDescription, FieldError, Fieldset, FieldsetLegend, FieldsetDescription, FieldsetError, ValidationSummary, CurrencyInput, MaskedInput, URLInput, Checkbox, RadioGroup, RadioGroupItem, Switch, Select, Combobox, Autocomplete, MultiSelect, InlineEdit, TreeSelect, EditableText, MentionInput, RichTextEditor, TagsInput, TokenInput, FileUpload, Dropzone, OTPInput, PinInput, TimeInput, InlineStatusSelect, ToggleGroup, Slider, DatePicker, DateInput, DateRangePicker, DatePresetPicker, Calendar, CalendarView, AgendaList, CronInput, RecurrenceEditor, ResourceCalendar, SegmentedControl
• Overlays and menus: Dialog, ConfirmDialog, Sheet, Drawer, Popover, Tooltip, HoverCard, DropdownMenu, ContextMenu, CommandMenu, OverlayProvider
• Data and feedback: Table, TableContainer, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption, DataTable, DataView, ColumnVisibilityMenu, SavedViews, SavedViewTabs, SortMenu, DensityToggle, BulkEditPanel, Meter, Gauge, Sparkline, LineChart, AreaChart, StackedBarChart, Heatmap, TrendIndicator, ComparisonMetric, BarChart, DonutChart, Legend, Skeleton, Spinner, Toast, Toaster, ToastProvider, LiveRegion, AnnouncerProvider, Announcer, RelativeTime, TimeAgo, Progress, Banner, EmptyState, ActivityFeed, ActivityTimeline, Timeline, TimelineDetail, ReleaseStepper, KanbanBoard, TransferList, DualListBox, CommentThread
• Layout and product UI: Header, Sidebar, AppShell, SplitView, PageHeader, SectionHeader, Container, Stack, VStack, HStack, ZStack, Cluster, Grid, WorkspaceSwitcher, AppSwitcher, Toolbar, DataToolbar, FilterBar, ToolbarGroup, ToolbarButton, TreeView, WizardSteps, StepperProgress, StepperForm, PageTabs, RouteTabs, NavLink, Breadcrumb, Pagination, SearchInput, ScrollArea, AspectRatio, Media, CopyButton, CodeBlock, Kbd, SkipLink, VisuallyHidden

Sub-parts such as DialogTitle, ConfirmDialogAction, SelectItem, ComboboxItem, DropdownMenuItem, CommandMenuItem, BannerTitle, FormSection, ToastViewport, CodeBlock, and AppShellMain are exported from the same public entry point.

Runtime

React and React DOM are peer dependencies. Consumers must import the FroggDesign theme CSS once before the EnterUI component CSS.

EnterUI uses focused Radix primitive packages for complex accessibility behavior such as focus trapping, menu navigation, select typeahead, slider semantics, toast viewport behavior, and popover positioning. These are regular runtime dependencies of @froggdesign/enter-ui.

Tailwind is not required.

Styling

EnterUI is CSS-variable-first and class-based. Component styles are shipped through @froggdesign/enter-ui/styles.css, use .eui-* class names, and expose --eui-* CSS variables that default to @froggdesign/theme variables.

Primary override paths:

• change --eui-* variables for theme-level adjustments
• pass className for component-specific styling
• pass style for local dynamic values
• compose wrapper components for repeated product patterns

Red state convention:

• --eui-crimson, --eui-crimson-foreground, and --eui-crimson-soft drive error and invalid states
• --eui-ruby, --eui-ruby-foreground, and --eui-ruby-soft drive destructive depth, hover edges, and high-contrast error text
• --eui-error* remains available as the semantic compatibility alias for crimson

Stability

This is a public npm package. Component props, exported component names, CSS entry points, .eui-* class names, and documented --eui-* variables are public API.

License And Funding

This package uses the FroggDesign Limited Use License in LICENSE.md, not MIT. You may install and use it as a dependency in personal, internal, commercial, and client projects. You may not redistribute, republish, resell, sublicense, or distribute modified package derivatives without written permission.

Donations are optional and do not grant additional license rights, support commitments, priority service, ownership, endorsement, or commercial exclusivity.

SSR And Next.js

Static components can render in React Server Components. Interactive composition such as dialogs, menus, selects, tabs with app state, command menus, popovers, tooltips, toasts, sliders, date pickers, and custom form interactions should live in Client Components in Next.js App Router apps.

"use client";

import { Button, Dialog, DialogContent, DialogTitle, DialogTrigger } from "@froggdesign/enter-ui";

export function SettingsDialog() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Open settings</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogTitle>Settings</DialogTitle>
      </DialogContent>
    </Dialog>
  );
}

Accessibility Notes

• Provide visible labels or aria-label for icon-only controls and unlabeled inputs.
• Use DialogTitle and DialogDescription for modal dialogs.
• Use FormField for a labelled form control with optional description and error text. A single child control is automatically connected to generated label, description, and error IDs when explicit IDs are not provided.
• Preserve semantic focusable children when using Radix asChild triggers.
• Product apps remain responsible for route-level page titles and should mount SkipLink plus live-region behavior where repeated navigation or async state updates are present.

Verification

Package verification:

pnpm --filter @froggdesign/enter-ui typecheck
pnpm --filter @froggdesign/enter-ui test
pnpm --filter @froggdesign/enter-ui build
pnpm --filter @froggdesign/enter-ui test:types
pnpm --filter @froggdesign/enter-ui exec npm pack --dry-run

test:types compiles test-types/consumer.tsx against the built dist/index.d.ts to confirm the published declaration output stays consumable. Run it after build. The vitest suite also runs the same check when the build artifacts are present and skips with a console warning when they are missing.

Workspace/docs verification for public readiness:

pnpm exec biome check packages/enterui-react apps/enterui-web
pnpm --filter enterui-web typecheck
pnpm --filter enterui-web build

Package Contents

The npm package publishes dist and LICENSE.md through the files field. Expected published outputs are:

• dist/index.js
• dist/index.cjs
• dist/index.d.ts
• dist/styles.css
• LICENSE.md

Known Limitations

• Portal content should be tested in jsdom or a browser for open-state assertions.
• Visual regression testing is owned by consuming apps or release workflows, not by this package's unit test suite.