https://github.com/camwebby/shadcn-react-number-scrubber

https://github.com/camwebby/shadcn-react-number-scrubber

react shadcn shadcn-react shadcn-ui

Last synced: 8 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/camwebby/shadcn-react-number-scrubber
• Owner: camwebby
• Created: 2024-12-31T18:12:10.000Z (about 1 month ago)
• Default Branch: main
• Last Pushed: 2024-12-31T18:36:45.000Z (about 1 month ago)
• Last Synced: 2024-12-31T19:28:51.171Z (about 1 month ago)
• Topics: react, shadcn, shadcn-react, shadcn-ui
• Language: TypeScript
• Homepage:
• Size: 53.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-shadcn-ui - Link

README

        
# Shadcn Number Scrubber Component

A draggable numeric input component for React, built with [shadcn/ui](https://ui.shadcn.com/), inspired by desktop video editing software like Resolve.

### View a demo:

[https://shadcn-react-number-scrubber.vercel.app/](https://shadcn-react-number-scrubber.vercel.app/)

## Features

- Click and drag horizontally to adjust values

- Configurable sensitivity for fine/coarse control

- Supports min/max bounds

- Customizable step sizes

- Fully typed with TypeScript

- Follows shadcn/ui styling conventions

## Installation

You can install this component using the shadcn CLI:

```bash

npx shadcn@latest add https://raw.githubusercontent.com/camwebby/shadcn-react-number-scrubber/refs/heads/main/public/registry/number-scrubber.json

```

Currently prerequires TypeScript and the Shadcn Input component.