@epa-datos/ui

React + Tailwind dashboard components built on Base UI, published as source (not a bundle) so the components stay fully readable and themeable in the projects that install them.

There's no barrel index — each file is imported directly, the same way it's imported inside this repo:

import { Button } from "@epa-datos/ui/components/ui/button"
import { Badge } from "@epa-datos/ui/components/ui/badge"
import { Heatmap } from "@epa-datos/ui/components/epa/heatmap"
import { cn } from "@epa-datos/ui/lib/utils"

Install

npm install @epa-datos/ui

react/react-dom ^19 are peer dependencies — everything else the components need (Base UI, Recharts, date-fns, lucide-react, etc.) installs automatically.

Set up styles

Tailwind v4 project required. In your global stylesheet:

@import "tailwindcss";
@import "@epa-datos/ui/styles/tokens.css";

That one import brings in everything the components rely on: the semantic color tokens (--primary, --success, --warning, --info, --chart-1..10, etc.) in light and dark, the dark:/short: custom variants, and the animation/data-state utilities components use for open/close transitions. Override any token by redeclaring it after the import — see Theming below.

Your project also needs to supply two font variables the components inherit rather than hardcode:

// wherever you load fonts (e.g. app/layout.tsx in Next.js)
const sans = YourSansFont({ variable: "--font-sans" })
const mono = YourMonoFont({ variable: "--font-mono" }) // optional, for code/tabular content

Global providers

Mount these once near the root of your app — components assume they exist, the same way they do in this repo's own app/layout.tsx:

import { ThemeProvider } from "next-themes"
import { TooltipProvider } from "@epa-datos/ui/components/ui/tooltip"
import { Toaster } from "@epa-datos/ui/components/ui/toast"

export default function RootLayout({ children }) {
  return (
    <ThemeProvider attribute="class" defaultTheme="light">
      <TooltipProvider>
        {children}
        <Toaster />
      </TooltipProvider>
    </ThemeProvider>
  )
}

Theming

All colors are OKLCH CSS variables — never hardcoded in component source — so re-theming means overriding variables, not editing component files:

@import "tailwindcss";
@import "@epa-datos/ui/styles/tokens.css";

:root {
  --primary: oklch(0.55 0.2 250);
}
.dark {
  --primary: oklch(0.65 0.2 250);
}

Browsing components

This repo is also the showcase — every component and its variants are demoed in components/showcase/demos/*. Clone the repo and run pnpm dev to browse them interactively, or read the source directly under components/ui/ and components/epa/.

Conventions

Full component-selection guidance ("which component fits this request"), styling rules, and the reasoning behind the design tokens live in AGENTS.md — written for both human contributors and coding agents working in this repo.

Contributing / local development

pnpm install
pnpm dev      # showcase app at localhost:3000
pnpm build:lib  # builds the publishable package into dist/

Component and design-token changes are made here, in epa-ui, not in projects that depend on the package — see AGENTS.md for the full editing conventions.

License

MIT