SolidJS Renderer

Use @froggdesign/enter-ui-solid when your app is built with SolidJS. Use @froggdesign/enter-ui-react when your app is built with React or Next.js.

#Usage

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

export function SettingsCard() {
  return (
    <Card>
      <CardContent>
        <Badge variant="success">SolidJS</Badge>
        <Form>
          <Label for="workspace" required>
            Workspace
          </Label>
          <Input id="workspace" value="FroggDesign" />
        </Form>
        <Button>Save</Button>
      </CardContent>
    </Card>
  );
}

#React vs SolidJS

SolidJS apps should not import @froggdesign/enter-ui-react or @froggdesign/enter-ui-react/styles.css to reach missing components. The React package and CSS entry belong to the React renderer boundary.

#Current SolidJS Exports

Core: Button, ButtonGroup, IconButton, Link, Badge, Card, Avatar, Alert, Separator, Spinner, Skeleton, Text, and Kbd.

Forms: Form, FormSection, FormActions, FormDescription, FormMessage, Label, Input, and TextArea.

Feedback and content: MetricCard, StatusIndicator, EmptyState, EmptySearchResult, ErrorState, ErrorBoundaryFallback, and LoadingOverlay.

Layout: Container, Spacer, Grid, AppShell, DescriptionList, KeyValueList, List, Media, ScrollArea, Toolbar, WizardSteps, StepperProgress, VStack, HStack, ZStack, LazyVGrid, LazyHGrid, DetailPanel, ObjectDetail, and KPISection.

#Not Yet Ported

Complex interactive React components are not re-exported from the SolidJS package. Dialogs, menus, selects, tabs, popovers, tooltips, date pickers, toasts, command menus, and comboboxes need SolidJS-native behavior primitives instead of wrappers around React or Radix React.

#Styling

Solid's class prop is preferred. The current primitives also accept className as a migration convenience for teams copying examples from React.

<Button class="project-action" variant="secondary">
  Preview
</Button>

The public import surface is the package root and ./styles.css only. Deep imports are not part of the contract.