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

Usage

Import the styles in your app's entry point:

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

Then 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://m3000.market/r/price.json

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

Components

Primitives

Building blocks for marketplace UIs:

Price - Format cryptocurrency and fiat prices with customizable precision
Feedback - Attach animated inline feedback to buttons and other triggers
Ranking - Render already-sorted ranked items with group boundaries
Countdown - Countdown timer with semantic labels
Receipt - Build order summaries with items, taxes, and totals

Blocks

Pre-assembled declarative interfaces built from primitives for marketplace user flows:

Blocks Overview - Learn how Blocks package full user flows from composable primitives
Auction Soon - Complete auction interface with bid rankings and forms