@momo-webplatform/mobase-next

UI component library built with shadcn/ui and React.

Installation

Mobase declares all runtime dependencies as peer dependencies (React, Base UI, Radix primitives, date-fns, etc.). Your project must provide them.

Recommended: use pnpm with auto-install-peers=true in .npmrc — then installing Mobase will install all peers automatically:

pnpm add @momo-webplatform/mobase-next

Otherwise, install Mobase and its peer dependencies explicitly. See peerDependencies in package.json for the full list, or run:

pnpm add @momo-webplatform/mobase-next
pnpm add react react-dom @base-ui/react @hookform/resolvers class-variance-authority clsx cmdk date-fns embla-carousel-react input-otp lucide-react next-themes react-day-picker react-hook-form react-resizable-panels recharts  tailwind-merge tailwindcss-animate vaul zod

Usage

Import Components

import { Button, Card, Input } from "@momo-webplatform/mobase-next"

Import Styles

Import the CSS file in your app's root layout or main CSS file:

@import "@momo-webplatform/mobase-next/styles";

Or in your Next.js app:

import "@momo-webplatform/mobase-next/styles"

Import Hooks

import { useIsMobile, useToast } from "@momo-webplatform/mobase-next"

Import Utils

import { cn } from "@momo-webplatform/mobase-next"

Available Components

All shadcn/ui components are available:

• Accordion
• Alert
• Alert Dialog
• Aspect Ratio
• Avatar
• Badge
• Breadcrumb
• Button
• Button Group
• Calendar
• Card
• Carousel
• Chart
• Checkbox
• Collapsible
• Combobox
• Command
• Context Menu
• Dialog
• Drawer
• Dropdown Menu
• Empty
• Field
• Form
• Hover Card
• Input
• Input Group
• Input OTP
• Item
• KBD
• Label
• Menubar
• Native Select
• Navigation Menu
• Pagination
• Popover
• Progress
• Radio Group
• Resizable
• Scroll Area
• Select
• Separator
• Sheet
• Sidebar
• Skeleton
• Slider
• Spinner
• Switch
• Table
• Tabs
• Textarea
• Toast
• Toaster
• Toggle
• Toggle Group
• Tooltip

Requirements

This package requires:

• React 18+
• Tailwind CSS configured in your project
• The CSS variables from globals.css imported in your app

Development

# Build
pnpm build

# Watch mode
pnpm dev

# Lint
pnpm lint