Documentation

Getting Started

A collection of beautifully crafted React components for marketplace applications.

Introduction

@m3000/market is a collection of market UI components designed for marketplace applications. It includes primitives for displaying prices, rankings, countdowns, and receipts, plus pre-assembled Blocks for complete marketplace user flows.

Installation

pnpm add @m3000/market

Styling

You can either use the bundled library styles or provide the design tokens yourself.

Use the bundled styles

Import the styles in your app's entry point:

import "@m3000/market/styles.css";

Use the library theme with Tailwind

If your app runs Tailwind v4, import the library's theme alongside it. This gives you the full design token set (colors, typography, variants) while keeping Tailwind in your own build:

@import "tailwindcss";
@import "@m3000/market/theme.css";

Bring your own tokens

If you already own your app theme, keep Tailwind v4 in your app stylesheet and define the tokens our components use:

@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));
@custom-variant data-active (&[data-state~="active"]);
@custom-variant data-open (&[data-state~="open"]);
@custom-variant data-close (&[data-state~="close"]);
@custom-variant data-disabled (&[data-state~="disabled"]);

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-hover: var(--primary-hover);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-hover: var(--secondary-hover);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-accent: var(--accent);
  --color-accent-hover: var(--accent-hover);
  --color-accent-active: var(--accent-active);
  --color-accent-foreground: var(--accent-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-disabled: var(--disabled);
  --color-disabled-foreground: var(--disabled-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-hover: var(--destructive-hover);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-destructive-muted: var(--destructive-muted);
  --color-destructive-muted-foreground: var(--destructive-muted-foreground);
  --color-success: var(--success);
  --color-success-hover: var(--success-hover);
  --color-success-foreground: var(--success-foreground);
  --color-success-muted: var(--success-muted);
  --color-success-muted-foreground: var(--success-muted-foreground);
  --color-warning: var(--warning);
  --color-warning-hover: var(--warning-hover);
  --color-warning-foreground: var(--warning-foreground);
  --color-warning-muted: var(--warning-muted);
  --color-warning-muted-foreground: var(--warning-muted-foreground);
  --color-separator: var(--separator);
  --font-sans: var(--font-sans);
}

Use Tailwind's default typography utilities for sizing. No custom text-1 or leading-1 scale is required.

Usage

Import and use the components:

import { Price, Feedback, Countdown, Ranking, Receipt } from "@m3000/market";

function MyComponent() {
  return (
    <Feedback.Root show>
      <button>Submit</button>
      <Feedback.Content>Saved</Feedback.Content>
    </Feedback.Root>
  );
}

Copy-Paste with shadcn CLI

You can also add individual components to your project using the shadcn CLI:

pnpm dlx shadcn@latest add https://market.m3000.io/r/price.json

This will copy the component source code directly into your project, giving you full control over customization.