Styling Philosophy

EnterUI is a React and TypeScript component library that brings the FroggDesign visual language into ready-to-use product surfaces. It targets React and Next.js apps, dashboards, SaaS products, internal tools, and any interface that needs a refined default look without a heavy styling setup.

The styling principle is simple: beautiful by default, flexible by design.

Every component ships with mature, opinionated defaults but stays open to override. Use them as-is to start, then adjust theme, brand, or product-specific patterns through CSS variables, className, style, or composition — in that order.

#Tailwind Is Not Required

EnterUI does not depend on Tailwind. You can use Tailwind alongside it, but it is fully optional.

The primary styling layer is built on plain CSS variables and a small, predictable set of .eui-* classes. That keeps EnterUI portable across plain CSS, CSS Modules, Sass, styled-components, vanilla-extract, Panda CSS, Emotion, and any existing product design system.

#Polished Defaults Out Of The Box

Components arrive with finished spacing, radius, typography, borders, hover, focus-visible, disabled, selected, loading, and semantic states. For most product interfaces, the default is already production-quality without any override.

Override is meant for the cases that genuinely need it: custom brand themes, app-specific density, or recurring product patterns.

#Easy To Override

Apply overrides in this order, from broadest to most local:

1. CSS variables — for app-wide theme changes.
2. className — for one-off component adjustments.
3. style — for local, dynamic values.
4. Wrapper components — for repeated product patterns you want to centralize.

#CSS Variables

:root {
  --eui-primary: #2563eb;
  --eui-primary-foreground: #ffffff;
  --eui-ring: #60a5fa;
  --eui-radius-md: 12px;
}

#className

import { Button } from "@froggdesign/enter-ui";

export function SaveButton() {
  return <Button className="my-custom-button">Save</Button>;
}

#Tailwind (Optional)

import { Button } from "@froggdesign/enter-ui";

export function HeroAction() {
  return <Button className="rounded-full px-6">Get started</Button>;
}

This is a convenience, not a requirement. EnterUI does not ship Tailwind, depend on it, or lock consumers into utility classes.

#CSS Modules

.customButton {
  border-radius: 9999px;
  padding-inline: 24px;
}

import { Button } from "@froggdesign/enter-ui";
import styles from "./button.module.css";

export function SaveButton() {
  return <Button className={styles.customButton}>Save</Button>;
}

#Component Composition

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

export function ProductCard() {
  return (
    <Card>
      <CardHeader>
        <Badge variant="info">Platform</Badge>
        <CardTitle>Billing Console</CardTitle>
      </CardHeader>
      <CardContent>Built with EnterUI primitives and FroggDesign tokens.</CardContent>
      <CardFooter>
        <Button>Open product</Button>
      </CardFooter>
    </Card>
  );
}

#Design Tokens First

EnterUI follows the tokens defined in @froggdesign/theme: background, foreground, surface, card, primary, secondary, muted, border, ring, success, warning, error, info, radius, shadow, spacing, and typography.

#Class Naming

EnterUI uses the .eui-* prefix so overrides are easy to target. Common public classes include:

• .eui-button
• .eui-card
• .eui-input
• .eui-select__trigger
• .eui-dialog__content
• .eui-table
• .eui-app-shell
• .eui-toast

Stick to the top-level component class and documented variants. Avoid relying on deep DOM structure unless the docs explicitly mark a part as a public styling surface.

#For Tailwind Users

Tailwind users can pass utilities through className, use arbitrary values such as bg-[var(--eui-primary)], map tokens into the Tailwind config, or build a product-specific preset. Tailwind stays optional throughout.

#For Non-Tailwind Users

Plain CSS, CSS Modules, Sass, styled-components, vanilla-extract, Panda CSS, and Emotion all work because EnterUI exposes its surface through CSS variables and className.

#Why It Matters

A public component library should be portable, stable, and easy to adopt in both legacy and new codebases. By not forcing a styling stack, EnterUI fits cleanly into enterprise environments, shared internal libraries, and long-lived product surfaces.

#Do And Don't

Do

• Start with the default styles.
• Override through theme variables for rebrand work.
• Use className for one-off cases.
• Create wrapper components for repeated product patterns.

Don't

• Override every component without a clear reason.
• Hard-code colors when a token is available.
• Lean on internal DOM structure that isn't documented as public.
• Make Tailwind a hard requirement for your consumers.

#Installation

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

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

#Quick Example

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>
  );
}

#In Short

EnterUI exists so teams can ship refined interfaces immediately, without a complicated styling setup, while keeping full control whenever a product needs a more custom look.