@next-odoo/ui

UI component library for Next.js + Odoo applications with dark mode, i18n, and mobile-first design.

Features

• ✅ ShadCN UI Components - 21 customizable Radix UI components
• ✅ Dark Mode - Built-in theme support with next-themes
• ✅ Internationalization - EN/ID translations with type-safe keys
• ✅ Mobile Components - Touch-friendly bottom navigation and headers
• ✅ Responsive Design - Mobile-first with Tailwind CSS
• ✅ Type Safety - 100% TypeScript with full type definitions

Installation

pnpm add @next-odoo/ui

Peer Dependencies

pnpm add react react-dom next

Usage

UI Components

import { Button, Card, Dialog } from '@next-odoo/ui'

export function MyComponent() {
  return (
    <Card>
      <Button variant="default">Click me</Button>
    </Card>
  )
}

Dark Mode

import { ThemeProvider, ThemeToggle } from '@next-odoo/ui'

export function App() {
  return (
    <ThemeProvider attribute="class" defaultTheme="system">
      <ThemeToggle />
      {/* Your app */}
    </ThemeProvider>
  )
}

Internationalization

import { useTranslation, useLanguageStore } from '@next-odoo/ui'

export function MyComponent() {
  const { t, locale, setLocale } = useTranslation()

  return (
    <div>
      <p>{t('common.welcome')}</p>
      <button onClick={() => setLocale('id')}>Bahasa</button>
      <button onClick={() => setLocale('en')}>English</button>
    </div>
  )
}

Mobile Components

import { BottomNav, MobileHeader } from '@next-odoo/ui'

export function MobileLayout() {
  return (
    <>
      <MobileHeader title="Dashboard" />
      {/* Content */}
      <BottomNav />
    </>
  )
}

Import Styles

Add to your app/layout.tsx or _app.tsx:

import '@next-odoo/ui/styles'

Tailwind Configuration

Extend your tailwind.config.js:

module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@next-odoo/ui/dist/**/*.{js,mjs}',
  ],
  theme: {
    extend: {
      // Copy theme configuration from @next-odoo/ui
    },
  },
  plugins: [require('tailwindcss-animate')],
}

Components

UI Components

• Alert, AlertDialog
• Badge, Button
• Card, Checkbox
• Dialog, DropdownMenu
• Form, Input, Label
• LoadingSpinner, NumberInput
• Progress, RadioGroup
• Select, Skeleton
• Tabs, Textarea, Tooltip

Mobile Components

• BottomNav - Bottom navigation bar
• MobileHeader - Mobile page header

Theme Components

• ThemeProvider - Theme context provider
• ThemeToggle - Light/Dark/System mode toggle

Translation Keys

The i18n system provides type-safe translation keys:

// Type-safe keys with autocomplete
t('common.save')
t('customer.status.approved')
t('visit.objectives.canvas')

// With variable interpolation
t('visit.checkInAt', { location: 'Store A' })

Customization

All components use CSS variables for theming. Override in your globals.css:

:root {
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  /* ... */
}

.dark {
  --primary: 210 40% 98%;
  --primary-foreground: 222.2 47.4% 11.2%;
  /* ... */
}

License

MIT