Skip to main content
Version: latest

Quick Start

After installing @prokodo/ui, you're ready to use components. Each component is a separate entry point — import only what you need.

tip

Make sure @prokodo/ui/theme-tokens.css is imported in your root layout (see Installation). All examples below assume this is in place.

Your first component — Button

app/page.tsx
import { Button } from "@prokodo/ui/button"
import "@prokodo/ui/button.css"

export default function Page() {
  return (
    <main>
      <Button variant="primary" size="md">
        Get started
      </Button>
    </main>
  )
}

Do's and don'ts

✅ Do

  • Import each component directly from its entry point for highest performance:
import { Button } from "@prokodo/ui/button"
import { Card } from "@prokodo/ui/card"
  • Prefer component-level styles whenever possible:
import "@prokodo/ui/button.css"
import "@prokodo/ui/card.css"

Each CSS file is self-contained: it includes styles for all internal sub-components via CSS @import. Your bundler (webpack, Turbopack) deduplicates automatically — shared dependencies like headline.css are only included once in the output, even when imported from multiple component CSS files.

  • Use priority for critical above-the-fold elements (especially hero images) so they load/hydrate eagerly.

❌ Don't

  • Avoid broader or unnecessary imports if you only need a few components.
  • Avoid loading extra styles that are not needed on the page.

Form example

app/contact/page.tsx
import { Form } from "@prokodo/ui/form"
import { Input } from "@prokodo/ui/input"
import "@prokodo/ui/form.css"

export default function ContactPage() {
  return (
    <Form onSubmit={(e, data) => console.log(data)} submitLabel="Send">
      <Input name="name" label="Full name" required />
      <Input name="email" label="Email" type="email" required />
    </Form>
  )
}
info

You only need form.css here — it already includes styles for Input, Select, Checkbox, and all other sub-components that Form uses internally.

Card grid example

components/FeatureGrid.tsx
import { Grid } from "@prokodo/ui/grid"
import { Card } from "@prokodo/ui/card"
import "@prokodo/ui/grid.css"
import "@prokodo/ui/card.css"

const features = [
  { title: "AIC Pattern", body: "Server, client, and lazy variants." },
  { title: "TypeScript", body: "Fully typed props for every component." },
  { title: "Design tokens", body: "CSS custom properties throughout." },
]

export function FeatureGrid() {
  return (
    <Grid cols={3} gap="lg">
      {features.map(f => (
        <Card key={f.title}>
          <h3>{f.title}</h3>
          <p>{f.body}</p>
        </Card>
      ))}
    </Grid>
  )
}

Next steps

Last updated on