A loading spinner component with customizable size.
Open innpx shadcn-helper add @mobx-restful-shadcn/spinnerCopied!
Small Spinner
Medium Spinner (Default)
Large Spinner
Custom Color (Primary)
Custom Color (Destructive)
A Typewriter Text component with Interval-based Character Rendering.
Open innpx shadcn-helper add @mobx-restful-shadcn/type-writerCopied!
A Copy-to-Clipboard overlay component that captures click interactions from its parent area.
Open innpx shadcn-helper add @mobx-restful-shadcn/copy-overlayCopied!
npx shadcn-helper add @mobx-restful-shadcn/copy-overlayCopied!
A Command Line prompt component with Typing Animation & Click-to-Copy behavior.
Open innpx shadcn-helper add @mobx-restful-shadcn/command-lineCopied!
npx shadcn-helper add @mobx-restful-shadcn/command-lineCopied!
A full-screen loading overlay component with spinner and customizable message.
Open innpx shadcn-helper add @mobx-restful-shadcn/loadingCopied!
Click the button to toggle the full-screen loading overlay
A component for displaying a list of badges with optional click and delete handlers.
Open innpx shadcn-helper add @mobx-restful-shadcn/badge-barCopied!
Basic Badge Bar
- ReactTypeScriptNext.js
Badge Bar with Click Handler
Badge Bar with Delete Handler
- ReactTypeScriptNext.jsTailwind CSSShadcn UIMobX
Badge Bar with Links and Delete
A pagination component with page size and page index controls.
Open innpx shadcn-helper add @mobx-restful-shadcn/pagerCopied!
Pager Component
Current: Page 1 of 20, showing 10 items per page
Pager at First Page
Pager at Last Page
Pager in Middle
An image preview component with modal viewing and download functionality.
Open innpx shadcn-helper add @mobx-restful-shadcn/image-previewCopied!
Image Preview
Click on the image to view it in a modal with download option
Loading State Example
The component shows a loading spinner while the image is being loaded
A file preview component supporting images, audio, video, and documents.
Open innpx shadcn-helper add @mobx-restful-shadcn/file-previewCopied!
A component that detects when scroll reaches edges using IntersectionObserver.
Open innpx shadcn-helper add @mobx-restful-shadcn/scroll-boundaryCopied!
Scroll Boundary
Scroll to the edges to detect touch events. Touched edges: None
Top Edge
Left
Scrollable Content
Scroll in any direction to trigger edge detection
Right
Bottom Edge
An infinite scroll list component using MobX for state management.
Open innpx shadcn-helper add @mobx-restful-shadcn/scroll-listCopied!
Infinite Scroll List
Scroll to the bottom to load more items automatically
A dynamic array field component with add/remove functionality for form arrays.
Open innpx shadcn-helper add @mobx-restful-shadcn/array-fieldCopied!
Array Field with Inputs
An input component that displays values as removable badges, supporting multiple entries.
Open innpx shadcn-helper add @mobx-restful-shadcn/badge-inputCopied!
Tag Input
- ReactTypeScriptNext.js
Press Enter to add a tag, Backspace to remove the last tag
Email Input
- user@example.com
Current Values
Tags:
[ "React", "TypeScript", "Next.js" ]
Emails:
[ "user@example.com" ]
A range slider input with optional custom icon display for each step.
Open innpx shadcn-helper add @mobx-restful-shadcn/range-inputCopied!
Star Rating
Rating: 3 / 5
Volume Control
Volume: 50%
Current Values
{
"rating": "3",
"volume": "50"
}A file picker component with preview and remove functionality.
Open innpx shadcn-helper add @mobx-restful-shadcn/file-pickerCopied!
Image Picker
+
Click to upload an image
Document Picker
+
Click to upload a document
Selected Files
Image:
No file selected
Document:
No file selected
A unified form field component supporting input, textarea, and select elements with labels.
Open innpx shadcn-helper add @mobx-restful-shadcn/form-fieldCopied!
Text Input
Email Input
Textarea
Select Dropdown
Multiple Select
A comprehensive pagination table component for CRUD operations with MobX RESTful integration.
Open innpx shadcn-helper add @mobx-restful-shadcn/rest-tableCopied!
| Repository Name | Home Page | Programming Language | Topic | Star Count | Description |
|---|
A lightweight rich text editor based on Edkit and Shadcn UI with various formatting tools.
Open innpx shadcn-helper add @mobx-restful-shadcn/editorCopied!