https://github.com/contractrabbit/cr-components
Contract Rabbit Shadcn Component Library
https://github.com/contractrabbit/cr-components
cdf filter react selector shadcn
Last synced: 2 months ago
JSON representation
Contract Rabbit Shadcn Component Library
- Host: GitHub
- URL: https://github.com/contractrabbit/cr-components
- Owner: contractrabbit
- Created: 2025-10-29T11:43:36.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-12-12T14:38:25.000Z (7 months ago)
- Last Synced: 2026-05-01T23:38:58.488Z (2 months ago)
- Topics: cdf, filter, react, selector, shadcn
- Language: TypeScript
- Homepage: https://cr-components.vercel.app/
- Size: 224 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @contractrabbit/ui Components
A React component library featuring a cumulative density filter and shadcn/ui components.
**Live Demo:** https://cr-components.vercel.app
## Quick Start
Install the cumulative density filter component:
```bash
npx shadcn@latest add https://cr-components.vercel.app/registry/cumulative-density-filter.json
```
Or install the full package:
```bash
pnpm add @contractrabbit/ui
```
### Testing
We use Vitest for unit tests within the `@contractrabbit/ui` package.
Commands:
- `pnpm -C packages/ui test` – run tests once
- `pnpm -C packages/ui test:watch` – watch mode
## Adding components
To add components to your app, run the following command at the root of your `web` app:
```bash
pnpm dlx shadcn@latest add button -c apps/web
```
This will place the ui components in the `packages/ui/src/components` directory.
## Tailwind
Your `tailwind.config.ts` and `globals.css` are already set up to use the components from the `ui` package.
## Using components
Import components from `@contractrabbit/ui` in your app.
```tsx
import { Button } from "@contractrabbit/ui/components/button"
import { CumulativeDensityFilter } from "@contractrabbit/ui"
```
## Components
### CumulativeDensityFilter
An interactive chart component that displays a cumulative distribution with a draggable threshold for filtering numeric data.
**Features:**
- Smooth cumulative distribution visualization
- Draggable threshold with real-time updates
- Support for logarithmic and linear scales
- Customizable colors and styling
- Fully responsive
- Optimized performance
**Example:**
```tsx
import { CumulativeDensityFilter } from "@contractrabbit/ui"
{
console.log(`Threshold: ${threshold}, Count: ${count}`)
}}
className="border rounded-md p-4"
/>
```
For full documentation, see [`packages/ui/README.md`](./packages/ui/README.md)