randmarcomps

A simple TypeScript React component library with Tailwind CSS v4 styling.

Randmar UI/UX guidelines: https://api.randmar.io/Guidelines

Installation

npm install randmarcomps

Requirements

This component library requires the following dependencies:

Tailwind CSS v4

npm install tailwindcss@^4.0.0

For Tailwind CSS v4, import the library CSS from the same Tailwind-processed entry file where you import Tailwind:

/* In your main CSS file (e.g., src/index.css) */
@import "tailwindcss";
@plugin "tailwindcss-animate";
@custom-variant dark (&:is(.dark *));
@import "randmarcomps/style.css";

/* Rest of your CSS */

Avoid ../node_modules/... import paths; use the package export path shown above.

React Router

Several components require React Router:

npm install react-router-dom@^7.3.0

Usage

1. Import the CSS (recommended)

Import randmarcomps styles from the same Tailwind-processed CSS entry file where you import Tailwind (so Tailwind v4 directives like @theme are processed):

/* In your main CSS file (e.g., src/index.css) */
@import "tailwindcss";
@import "randmarcomps/style.css";

Avoid ../node_modules/randmarcomps/dist/... paths; they bypass package exports and are more fragile across different package managers/layouts.

Note: some CSS minifiers/transformers may de-duplicate backdrop-filter declarations; randmarcomps defines overlay blur effects using @supports blocks to keep the correct behavior in production builds.

If your build tool errors that ./style.css is not exported from randmarcomps, ensure you’re on a randmarcomps version that exports ./style.css (under the style/default export conditions).

2. Apply a portal theme (recommended)

At the root of your app, apply the portal theme class to the document root:

import { PortalThemeProvider } from "randmarcomps";

export function Root() {
  return (
    <PortalThemeProvider theme="central">
      {/* your routers/providers/app */}
    </PortalThemeProvider>
  );
}

Supported themes: central, partner, reseller, manufacturer, shopify. Unknown/missing values safely fall back to default (no portal theme class applied).

3. Import Components

Then import the components you need:

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
  Button
} from 'randmarcomps';

function App() {
  return (
    <div>
      <Button variant="blue">Blue Button</Button>
      <Button variant="red">Red Button</Button>
      
      <InputOTP maxLength={6}>
        <InputOTPGroup>
          <InputOTPSlot index={0} />
          <InputOTPSlot index={1} />
          <InputOTPSlot index={2} />
        </InputOTPGroup>
        <InputOTPSeparator />
        <InputOTPGroup>
          <InputOTPSlot index={3} />
          <InputOTPSlot index={4} />
          <InputOTPSlot index={5} />
        </InputOTPGroup>
      </InputOTP>
    </div>
  );
}

Alternative: Tailwind @source (optional)

Most portals don’t need this. If your build requires explicit source scanning for library class usage, point @source at where your package manager installs randmarcomps:

/* In your main CSS file (e.g., src/index.css) */
@import 'tailwindcss';
@import "randmarcomps/style.css";
@source "../node_modules/randmarcomps/dist/**/*.{js,ts,jsx,tsx}";

/* Rest of your CSS */

Prefer @import "randmarcomps/style.css"; (package export path) over hardcoded ../node_modules/... paths.

Custom Colors

The library includes these custom Randmar colors:

• randmar-red
• randmar-blue
• randmar-purple
• randmar-green
• randmar-black

These are available when you import the CSS file.

Compatibility

This library is designed to work with:

• React 19
• React Router 7
• Tailwind CSS v4

If you're using earlier versions, you may encounter compatibility issues:

• Tailwind v3: You may encounter styling issues due to differences in the CSS layer system
• React Router <7: The API may have changed between versions

Development

• npm run dev - Start development server
• npm run build - Build the library
• npm run lint - Lint the code
• Do not manually bump the package.json version; CI/CD handles versioning/publishing.