Installation

Getting StartedUpdated 6 May 2026

EnterUI ships separate renderer packages. Use this page for package installation and global CSS setup. Renderer-specific coverage and API notes live in the dedicated framework guides.

Use @froggdesign/enter-ui-react for React 18, React 19, and Next.js App Router apps. This is the primary renderer and includes the full component surface.

Use @froggdesign/enter-ui-solid for SolidJS apps. It shares the visual contract and currently covers stateless and presentational primitives.

#React

Install the React renderer with the FroggDesign theme package.

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

React and React DOM are peer dependencies. Your app should already provide them.

Import FroggDesign theme CSS before React renderer CSS. In Next.js App Router, this usually belongs in app/layout.tsx.

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Import React components from @froggdesign/enter-ui-react.

import {
  Badge,
  Button,
  Card,
  CardContent,
  DataTable,
  type DataTableColumn,
} from "@froggdesign/enter-ui-react";

type Release = {
  id: string;
  name: string;
  status: string;
};

const columns: DataTableColumn<Release>[] = [
  { id: "name", header: "Name", accessorKey: "name" },
  { id: "status", header: "Status", accessorKey: "status" },
];

export function ReactExample({ rows }: { rows: Release[] }) {
  return (
    <Card>
      <CardContent>
        <Badge variant="success">React</Badge>
        <Button>Deploy</Button>
        <DataTable columns={columns} data={rows} />
      </CardContent>
    </Card>
  );
}

#Framework Notes

Next.js Server Components can render static EnterUI components.
Interactive components such as dialogs, menus, tabs, date pickers, form controls with state, and table tooling should live inside Client Components.
Import global CSS once at the app boundary, not inside individual components.

#SolidJS

Install the SolidJS renderer with the FroggDesign theme package.

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

Import FroggDesign theme CSS before SolidJS renderer CSS.

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

#Renderer Boundary

React apps import from @froggdesign/enter-ui-react and @froggdesign/enter-ui-react/styles.css.
SolidJS apps import from @froggdesign/enter-ui-solid and @froggdesign/enter-ui-solid/styles.css.
Both renderers import @froggdesign/theme/styles.css first.
Do not deep-import package internals.
Do not import the React package into a SolidJS app to reach a missing component.

#Tailwind Is Optional

EnterUI does not require Tailwind. You can use either renderer with plain CSS, CSS Modules, Sass, vanilla-extract, Panda CSS, Emotion, Tailwind, or an existing custom design system.

#Internal Workspace Consumers

Inside this monorepo, apps should use workspace dependencies. Published consumers install from npm.

{
  "dependencies": {
    "@froggdesign/enter-ui-react": "workspace:*",
    "@froggdesign/enter-ui-solid": "workspace:*",
    "@froggdesign/theme": "workspace:*"
  }
}

#Verify Setup

After installing, run the app and check:

theme CSS loads before EnterUI CSS
focus-visible states are visible
dark mode still has enough contrast
package imports come from the matching renderer package
there are no deep imports from src/components or dist

#React

Install the React renderer with the FroggDesign theme package.

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

React and React DOM are peer dependencies. Your app should already provide them.

Import FroggDesign theme CSS before React renderer CSS. In Next.js App Router, this usually belongs in app/layout.tsx.

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Import React components from @froggdesign/enter-ui-react.

import {
  Badge,
  Button,
  Card,
  CardContent,
  DataTable,
  type DataTableColumn,
} from "@froggdesign/enter-ui-react";

type Release = {
  id: string;
  name: string;
  status: string;
};

const columns: DataTableColumn<Release>[] = [
  { id: "name", header: "Name", accessorKey: "name" },
  { id: "status", header: "Status", accessorKey: "status" },
];

export function ReactExample({ rows }: { rows: Release[] }) {
  return (
    <Card>
      <CardContent>
        <Badge variant="success">React</Badge>
        <Button>Deploy</Button>
        <DataTable columns={columns} data={rows} />
      </CardContent>
    </Card>
  );
}

#SolidJS

Install the SolidJS renderer with the FroggDesign theme package.

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

Import FroggDesign theme CSS before SolidJS renderer CSS.

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

#Renderer Boundary

React apps import from @froggdesign/enter-ui-react and @froggdesign/enter-ui-react/styles.css.

SolidJS apps import from @froggdesign/enter-ui-solid and @froggdesign/enter-ui-solid/styles.css.

Both renderers import @froggdesign/theme/styles.css first.

Do not deep-import package internals.

Do not import the React package into a SolidJS app to reach a missing component.

React / Next.js

SolidJS

#React

#Framework Notes

#SolidJS

#Renderer Boundary

#Tailwind Is Optional

#Internal Workspace Consumers

#Verify Setup

Installation

React / Next.js

SolidJS

#React

#Framework Notes

#SolidJS

#Renderer Boundary

#Tailwind Is Optional

#Internal Workspace Consumers

#Verify Setup