Installation - EnterUI

Getting StartedUpdated May 3, 2026

Install the React package and the FroggDesign theme package in your application.

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

#CSS Imports

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

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

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

#Usage

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

export function Example() {
  return (
    <Card>
      <CardContent>
        <Badge variant="success">Ready</Badge>
        <Button>Deploy</Button>
      </CardContent>
    </Card>
  );
}

#Peer Dependencies

@froggdesign/enter-ui expects React and React DOM from the consuming app. The package ships its own component CSS and focused runtime dependencies for complex primitives.

#Tailwind Is Optional

EnterUI does not require Tailwind. You can use EnterUI with plain CSS, CSS Modules, Sass, styled-components, 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": "workspace:*",
    "@froggdesign/theme": "workspace:*"
  }
}

Edit this page