@froggdesign/enter-ui-solidjs

SolidJS components for EnterUI, built with FroggDesign theme variables.

This package is the SolidJS renderer sibling of @froggdesign/enter-ui. It shares the same token, theme, class, and CSS-variable styling contracts, while keeping framework runtime dependencies separate from the React package.

Installation

pnpm install @froggdesign/enter-ui-solidjs @froggdesign/theme solid-js

Import theme CSS before component CSS:

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

Public API

import { Badge, Button, Card, Form, Input } from "@froggdesign/enter-ui-solidjs";

Current component families:

• Core: Button, ButtonGroup, IconButton, Link, Badge, Card, Avatar, Alert, Separator, Spinner, Skeleton, Text, Kbd
• Forms: Form, FormSection, FormActions, FormDescription, FormMessage, Label, Input, TextArea
• Data and feedback: MetricCard, StatusIndicator, EmptyState, EmptySearchResult, ErrorState, ErrorBoundaryFallback, LoadingOverlay
• Layout and content: Container, Stack, Cluster, Grid, AppShell, DescriptionList, KeyValueList, List, Media, ScrollArea, Toolbar, WizardSteps, StepperProgress, VStack, HStack, ZStack, DetailPanel, ObjectDetail, KPISection

The package intentionally ports stateless and presentational primitives first. Complex interactive components such as dialogs, menus, selects, tabs, command menus, popovers, date pickers, and toasts should be ported with SolidJS-native behavior primitives rather than React wrappers.

Runtime

SolidJS is a peer dependency. Consumers must import the FroggDesign theme CSS once before the EnterUI SolidJS component CSS.

React, React DOM, and @radix-ui/react-* packages are not dependencies of this package.

Styling

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

Solid's native class prop is preferred. className is also accepted on these primitives as a migration convenience for consumers moving examples from React.

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.

Verification

Package verification:

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

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