@geowiki/ui

@geowiki/ui

Comprehensive React UI component library for GeoWiki applications, built with Radix UI primitives and Tailwind CSS.

Installation

npm install @geowiki/ui
# or
pnpm add @geowiki/ui

Peer Dependencies

npm install react react-dom next next-auth react-hook-form leaflet react-leaflet @react-leaflet/core @tanstack/react-query classnames cookies-next @geowiki/api-proxy @geowiki/cms-proxy @geowiki/evoland-api-proxy

CSS Setup

Import the pre-built Tailwind CSS file in your app entry point:

import "@geowiki/ui/styles.css";

Note: This CSS includes Tailwind components and utilities layers. Your app should provide @tailwind base and define the required CSS custom properties (theme variables) for colors, fonts, and spacing. See the Tailwind Config section below.

Usage

import { Button, Input, Dialog, DataTable } from "@geowiki/ui";

function MyForm() {
  return (
    <div>
      <Input placeholder="Enter your name" />
      <Button>Submit</Button>
    </div>
  );
}

What's Included

• Radix UI primitives -- 100+ accessible components: Accordion, AlertDialog, Button, Checkbox, Dialog, DropdownMenu, Form, Input, Popover, Select, Tabs, Toast, Tooltip, and more
• Custom components -- MultiSelect, RichTextContent, Pagination, NewsCard, Gallery, FAQ, Carousel, Testimonials, Tags, Breadcrumb
• Layouts -- AdminLayout, MapLayout, Navbar variants
• Design tokens -- CSS variable-based theming for colors, typography, and spacing

Tailwind Config

This library uses CSS custom properties for theming. Your app's Tailwind config should extend the shared GeoWiki config, or define these CSS variables:

:root {
  --primary: #your-color;
  --secondary: #your-color;
  --background: #your-color;
  --foreground: #your-color;
  /* ... see tailwind-config package for full list */
}

License

MIT