react-mekari-pixel

v1.0.7

Published

14 days ago

A React component library built with [Tailwind CSS](https://tailwindcss.com/) and [Radix UI](https://www.radix-ui.com/). Provides a set of accessible, customisable UI components following the Mekari Pixel design system.

0High
0Medium
0Low

ibrhmsptra

react-mekari-pixel

A React component library built with Tailwind CSS and Radix UI. Provides a set of accessible, customisable UI components following the Mekari Pixel design system.

Getting Started (Next.js + Tailwind CSS v4)

This guide covers setup for Next.js App Router with Tailwind CSS v4, styles configured entirely in CSS.

Prerequisites

| Requirement | Version | | ------------ | -------------------- | | Node.js | ≥ 18 | | React | ^18.2.0 || ^19.0.0 | | Next.js | ≥ 14 | | Tailwind CSS | v4 |

Step 1 — Install the package

npm install ./react-mekari-pixel-1.0.0.tgz

Or reference it in package.json:

{
  "dependencies": {
    "react-mekari-pixel": "file:../react-mekari-pixel/react-mekari-pixel-1.0.0.tgz",
  },
}

Then run npm install.

Step 2 — Initialize a theme with the CLI

Run the init command in the root of your Next.js project:

npx react-mekari-pixel init

The CLI will:

Detect your framework (Next.js)
Prompt you to choose a theme:

? Choose a theme:
  ❯ Neutral   — grayscale palette, framework-agnostic
    Mekari    — Mekari brand palette with indigo primary

Generate a pixel-theme.css file inside your project (e.g. src/app/pixel-theme.css)

The generated file contains the CSS custom properties for the chosen theme.

Neutral theme:

:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 3.9%;
  --primary: 0 0% 9%;
  --primary-foreground: 0 0% 98%;
  /* ... */
}

Mekari theme:

:root {
  --background: 0 0% 100%;
  --foreground: 222 47% 11%;
  --primary: 243 75% 59%;
  --primary-foreground: 0 0% 100%;
  /* ... */
}

To switch themes at any time, re-run npx react-mekari-pixel init and select a different theme. The CLI overwrites pixel-theme.css in place.

Step 3 — Configure `globals.css`

Tailwind CSS v4 has no tailwind.config.js. All theme configuration lives in CSS. Update your src/app/globals.css:

@import "tailwindcss";
@import "react-mekari-pixel/dist/style.css";
@import "./pixel-theme.css";

@theme {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --radius-md: var(--radius);
}

The @theme block maps the HSL CSS variables from your chosen theme into Tailwind utility classes (e.g. bg-primary, text-foreground, border-border).

Import order matters. react-mekari-pixel/dist/style.css must come before pixel-theme.css so your theme values take effect.

Step 4 — Update `layout.tsx`

Since globals.css already imports the library stylesheet via @import, no extra import is needed in layout.tsx:

// src/app/layout.tsx
import "./globals.css";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Step 5 — Use components

// src/app/page.tsx
"use client";

import { Button } from "react-mekari-pixel";

export default function Home() {
  return (
    <main className="flex min-h-screen items-center justify-center gap-4">
      <Button>Default</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="destructive">Delete</Button>
    </main>
  );
}

Run the dev server:

npm run dev

Open http://localhost:3000 — you should see styled buttons using your chosen theme.

API Reference

`<Button>`

| Prop | Type | Default | Description | | ----------- | --------------------------------------------------------------------------------------- | ----------- | ----------------------------------------------- | | variant | "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "default" | Visual style variant | | size | "default" | "sm" | "lg" | "icon" | "default" | Button size | | asChild | boolean | false | Merge props onto the child element (Radix Slot) | | className | string | — | Additional CSS classes | | disabled | boolean | false | Disable the button | | ref | React.Ref<HTMLButtonElement> | — | Forwarded ref | | ... | React.ButtonHTMLAttributes | — | All native button attributes are supported |

`buttonVariants(props?)`

Returns a className string. Accepts the same variant and size options as <Button>.

import { buttonVariants } from "react-mekari-pixel";

<div className={buttonVariants({ variant: "outline", size: "lg" })}>
  I look like a button
</div>;

`cn(...inputs)`

Merges Tailwind class names safely, resolving conflicts (e.g. p-2 + p-4 → p-4).

import { cn } from "react-mekari-pixel";

<div className={cn("rounded-lg p-4", className)} />;

Button Variants Reference

import { Button } from "react-mekari-pixel";

// Variants
<Button variant="default">Default</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

// Sizes
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon">★</Button>

// Disabled
<Button disabled>Disabled</Button>

// Render as anchor (asChild)
<Button asChild variant="outline">
  <a href="https://github.com" target="_blank" rel="noopener noreferrer">
    GitHub ↗
  </a>
</Button>

// Render as Next.js Link (asChild)
<Button asChild>
  <Link href="/about">About</Link>
</Button>

Troubleshooting

Components render without styles

Ensure the @import order in globals.css is correct — library styles must come before your theme:

@import "tailwindcss";
@import "react-mekari-pixel/dist/style.css"; /* ← must come before pixel-theme.css */
@import "./pixel-theme.css";

Tailwind utility classes not applying to library components

Make sure the @theme block in globals.css maps all the CSS variables used by the library (see Step 3).

Peer dependency warnings

The library requires react and react-dom as peer dependencies:

npm ls react react-dom

Development

# Install dependencies
pnpm install

# Start playground (component preview)
pnpm dev

# Build the library (ES module, CJS, types, CSS)
pnpm build

# Pack into .tgz for distribution
pnpm pack

Build outputs in dist/:

| File | Description | | --------------- | ------------------------ | | index.es.js | ES module | | index.cjs.js | CommonJS module | | index.d.ts | TypeScript declarations | | style.css | Bundled component styles | | cli/index.mjs | CLI executable |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

react-mekari-pixel

Getting Started (Next.js + Tailwind CSS v4)

Prerequisites

Step 1 — Install the package

Step 2 — Initialize a theme with the CLI

Step 3 — Configure globals.css

Step 4 — Update layout.tsx

Step 5 — Use components

API Reference

<Button>

buttonVariants(props?)

cn(...inputs)

Button Variants Reference

Troubleshooting

Components render without styles

Tailwind utility classes not applying to library components

Peer dependency warnings

Development

Step 3 — Configure `globals.css`

Step 4 — Update `layout.tsx`

`<Button>`

`buttonVariants(props?)`

`cn(...inputs)`