Installation

Requirements

Use React 19. TypeScript types, internal controls, and compiled CSS ship with the package. You do not need copied component files, a local shadcn installation, or Tailwind.

Install the package

npm install @mendylanda/ui

Import the stylesheet

Add this once at your application entry point. For Next.js App Router, use the root layout; for Vite, use src/main.tsx.

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

The stylesheet is scoped to package elements, including portalled menus. It reads your theme's semantic colors and radius, with defaults when those variables are absent. Typography inherits from your app. No Tailwind source scanning is needed.

Add your first component

Import only the entry point you need:

import { DataTable, defineColumns } from "@mendylanda/ui/table";
import { FilterBar, defineFilters, filter, useFilters } from "@mendylanda/ui/filters";

Continue with the complete starting examples for Table or Filters. In Next.js, put interactive components and hooks in a file beginning with "use client". A table with supplied rows needs no provider. Local filter state needs no provider either.

Tailwind 3

Use @mendylanda/ui/styles.tailwind3.css instead of styles.css. The compatibility build keeps package utilities overridable in Tailwind 3. No package source scanning or custom PostCSS plugin is needed.

Both stylesheets expect complete CSS colors. If your shadcn theme stores HSL channels such as --background: 0 0% 100%, map them to hsl(...) on package elements, including portals. The customization guide shows the mapping.

Optional URL persistence

Install nuqs when you want URL state:

npm install nuqs

Replace the local state hook with the optional adapter:

import { useUrlFilters } from "@mendylanda/ui/filters/nuqs";
 
const filters = useUrlFilters(definitions, {
  scope: `issues:${organizationId}:${userId}`,
  remember: "session",
});

Provide the nuqs adapter once at the application root. For Next.js App Router:

import type { ReactNode } from "react";
import { NuqsAdapter } from "nuqs/adapters/next/app";
import "@mendylanda/ui/styles.css";
 
export default function Layout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        <NuqsAdapter>{children}</NuqsAdapter>
      </body>
    </html>
  );
}

Statically rendered Next.js pages using URL hooks need a Suspense boundary around the filter component. For Vite, use nuqs/adapters/react. Other routers can use the nuqs adapters.

The base package does not import nuqs or Next.js. Existing query-state hooks can instead connect through bindFilters<YourState>() and useControlledFilters. See dynamic and custom filters.

Updating

npm update @mendylanda/ui

Review the changelog, test, and deploy the consuming project. Its lockfile controls the installed version. Updating the dependency brings in the shared implementation without copying or merging component files.

For a project previously using the registry, replace imports with the package exports, import the stylesheet, and remove the copied Mendy UI implementation after migrating its callers. Keep your definitions, queries, and custom editors. Move local visual changes to the documented customization points.