Usage

Imports, props, styling, and Server Components.

Once Appica UI is installed, every component follows the same small set of conventions. Learn them once and the whole library feels consistent.

Importing components

Import each component from its own subpath. This keeps bundles minimal — your app only pulls in what it uses, even without a bundler that tree-shakes barrel files.

import { Button } from '@appica/ui-react/button'
import { Input } from '@appica/ui-react/input'
import { Dialog, DialogTrigger, DialogContent } from '@appica/ui-react/dialog'

Every export is also available from the package root, which is convenient for prototyping:

import { Button, Input } from '@appica/ui-react'

Prefer subpath imports (@appica/ui-react/button) in application code. Reserve the root import for quick experiments.

Variants and sizes

Visual style is controlled through a variant prop, and dimensions through a size prop. The available values differ per component, but the prop names stay consistent across the library.

<Button variant="primary">Primary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost" size="sm">Small ghost</Button>

Each component documents its own variant and size options on its page. Need the union type in your own code? Derive it from the component's props rather than reaching for an internal type:

import type { ComponentProps } from 'react'
import { Button } from '@appica/ui-react/button'

type ButtonVariant = ComponentProps<typeof Button>['variant']

Styling and overrides

Components are themed entirely through design tokens, so they adapt to your colors and dark mode automatically. For one-off tweaks, pass className — it's merged intelligently (conflicting Tailwind utilities are de-duplicated), so your class wins:

<Button className="w-full rounded-full">Full width</Button>

Composition

Most components accept a render prop to change the element they output — for example, rendering a NavigationLink as your router's Link. This is the key to composing Appica UI with your router and your own components:

import Link from 'next/link'
import { NavigationLink } from '@appica/ui-react/navigation'

<NavigationLink render={<Link href="/pricing" />}>Pricing</NavigationLink>

See Composition for the full pattern, including how to merge classes and when overrides belong on the wrapper.

Server Components

Appica UI works out of the box with React Server Components and the Next.js App Router. Interactive components carry their own 'use client' boundary internally, so you can import them directly into a Server Component without marking the whole page client:

app/page.tsx (Server Component)

import { Button } from '@appica/ui-react/button'

export default function Page() {
  return <Button>Works in an RSC</Button>
}

Crossing the server/client boundary

You can render Appica UI components from Server Components, but you can't pass non-serializable props (functions like onClick, or render={<ClientComponent />}) across the boundary. Move that interactivity into a 'use client' component of your own. Providers like ThemeProvider are client components — keep them inside a client boundary (your root layout's body is fine).

On a client-only stack (Vite, CRA, or any single-page app) there's no server/client split to think about: import and use components normally. The 'use client' directives you'll see throughout these docs are a no-op there — bundlers without React Server Components simply ignore them.

Next steps

Composition — the render prop in depth.
Theming and Dark Mode.
Forms & Validation — build accessible forms.

Getting Started

For AI Agents

Guides

Utilities