Crisp Blocks

Community-built data blocks for the Crisp prediction market terminal.

What is this?

Crisp has a modular dashboard with drag-and-drop data blocks. This repo lets you:

• Build custom blocks using our SDK
• Test blocks locally in the playground
• Share blocks with the Crisp community

Installation

npm install @intuition-bends/crisp-blocks

Quick Start

import {
  Block,
  CrispProvider,
  FederalStatusBlock
} from "@intuition-bends/crisp-blocks";

// Wrap your app with CrispProvider
function App() {
  return (
    <CrispProvider config={{
      navigation: {
        openMarket: (id, name) => console.log('Open market:', name),
        openTrader: (id, name) => console.log('Open trader:', name),
      }
    }}>
      <FederalStatusBlock onRemove={() => {}} />
    </CrispProvider>
  );
}

What's Included

Core Components

• Block - Base block wrapper with header, fullscreen toggle, and drag handle
• CrispProvider - React context for block configuration
• useCrisp / useCrispOptional - Hooks to access context

Community Blocks

• FederalStatusBlock - Live federal government operating status from OPM.gov

Types

import type {
  BlockMetadata,
  BlockProps,
  BlockComponent,
  Market,
  Position,
  Order,
  Trade,
  Trader,
} from "@intuition-bends/crisp-blocks";

Utilities

import { matchBlockToEvent, getBlocksForEvent } from "@intuition-bends/crisp-blocks";

Creating a Block

import { Block, BlockComponent, BlockProps } from "@intuition-bends/crisp-blocks";
import { Star } from "lucide-react";

interface MyBlockProps extends BlockProps {
  title?: string;
}

export const MyBlock: BlockComponent<MyBlockProps> = ({ onRemove, title = "Hello" }) => {
  return (
    <Block title="My Block" icon={<Star size={14} />} onRemove={onRemove}>
      <div className="p-4 rounded-lg bg-surface-secondary text-primary">
        {title}
      </div>
    </Block>
  );
};

MyBlock.metadata = {
  id: "my-block",
  name: "My Block",
  description: "Does something cool",
  author: "your-username",
  version: "1.0.0",
  category: "community",
  tags: ["example"],
  dependencies: { dataProviders: [], features: [] },
  layout: { minWidth: 2, minHeight: 2, defaultWidth: 4, defaultHeight: 3 },
};

Tailwind v4 Setup

This package uses Tailwind v4 semantic color classes. Add the package to your Tailwind sources:

/* In your global.css or tailwind entry file */
@import "tailwindcss";

/* Scan the package for class names */
@source "../node_modules/@intuition-bends/crisp-blocks/dist/*.mjs";

/* Define semantic colors */
@theme inline {
  --color-accent-red: #f87171;
  --color-accent-green: #4ade80;
  --color-accent-yellow: #facc15;
  --color-accent-cyan: #22d3ee;
  --color-accent-pink: #f472b6;
  --color-accent-blue: #3b82f6;

  --color-primary: var(--crisp-text-primary, #ffffff);
  --color-secondary: var(--crisp-text-secondary, #a0a0a0);
  --color-muted: var(--crisp-text-muted, #666666);

  --color-surface-primary: var(--crisp-surface-primary, #0a0a0a);
  --color-surface-secondary: var(--crisp-surface-secondary, #141414);
  --color-surface-hover: var(--crisp-surface-hover, #1a1a1a);

  --color-border-primary: var(--crisp-border-primary, #262626);
  --color-border-secondary: var(--crisp-border-secondary, #333333);
}

Semantic Color Classes

| Class | Use | | ----------------------- | ------------------------ | | bg-surface-primary | Block background | | bg-surface-secondary | Nested sections | | bg-surface-hover | Hover states | | text-primary | Headings, important text | | text-secondary | Body text | | text-muted | Labels, hints | | border-border-primary | Borders | | text-accent-green | Success, positive values | | text-accent-red | Errors, negative values | | text-accent-cyan | Links, primary actions | | text-accent-yellow | Warnings | | text-accent-pink | Highlights |

Opacity Modifiers

<div className="bg-accent-green/10 text-accent-green">Success</div>
<div className="bg-accent-red/10 text-accent-red">Error</div>

Contributing

# Clone and setup
git clone https://github.com/crisp-markets/crisp-blocks.git
cd crisp-blocks
pnpm install
pnpm build

# Start the playground
pnpm playground

Open http://localhost:3333 to preview blocks with theme switching.

See the full guide: CONTRIBUTING.md

Links

• Crisp App
• Contributing Guide
• Issues

MIT License