https://github.com/camwebby/shadcn-react-number-scrubber
Number scrubber ui component inspired by Resolve
https://github.com/camwebby/shadcn-react-number-scrubber
nextjs react shadcn shadcn-react shadcn-ui
Last synced: 14 days ago
JSON representation
Number scrubber ui component inspired by Resolve
- Host: GitHub
- URL: https://github.com/camwebby/shadcn-react-number-scrubber
- Owner: camwebby
- Created: 2024-12-31T18:12:10.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-01-02T22:45:23.000Z (4 months ago)
- Last Synced: 2025-01-27T17:01:50.344Z (3 months ago)
- Topics: nextjs, react, shadcn, shadcn-react, shadcn-ui
- Language: TypeScript
- Homepage: https://shadcn-react-number-scrubber.vercel.app
- Size: 64.5 KB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-shadcn-ui - Link - 01-07 | (Libs and Components)
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.