A loading spinner component with customizable size.
Open inSmall Spinner
Medium Spinner (Default)
Large Spinner
Custom Color (Primary)
Custom Color (Destructive)
A full-screen loading overlay component with spinner and customizable message.
Open inClick the button to toggle the full-screen loading overlay
A component for displaying a list of badges with optional click and delete handlers.
Open inBasic 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 inPager 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 inImage 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 inA component that detects when scroll reaches edges using IntersectionObserver.
Open inScroll 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 inInfinite Scroll List
Scroll to the bottom to load more items automatically
A dynamic array field component with add/remove functionality for form arrays.
Open inArray Field with Inputs
An input component that displays values as removable badges, supporting multiple entries.
Open inTag 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 inStar Rating
Rating: 3 / 5
Volume Control
Volume: 50%
Current Values
{
"rating": "3",
"volume": "50"
}A file picker component with preview and remove functionality.
Open inImage 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 inText Input
Email Input
Textarea
Select Dropdown
Multiple Select
A comprehensive pagination table component for CRUD operations with MobX RESTful integration.
Open in| Repository Name | Home Page | Programming Language | Topic | Star Count | Description |
|---|