Core Components
Number Effects
Interactive Elements
Advanced Effects
Radix UI Components
- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Direction
- Drawer
- Dropdown Menu
- Empty
- Field
- Hover Card
- Input
- Input Group
- Input OTP
- Item
- Kbd
- Label
- Menubar
- Native Select
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Tooltip
- Typography
Base UI Components
- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Direction
- Drawer
- Dropdown Menu
- Empty
- Field
- Hover Card
- Input
- Input Group
- Input OTP
- Item
- Kbd
- Label
- Menubar
- Native Select
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Tooltip
- Typography
Sliding Number#
A component that slides numbers.
Examples#
Clock#
0
01234567890
01234567890
01234567890
01234567890
01234567890
0123456789Sliding number with slider#
Current ARR:
$
0
01234567890
01234567890
0123456789Sliding number basic#
0
0123456789Installation#
npx shadcn@latest add "https://components.dylanwlim.com/c/sliding-number.json"
Component API#
SlidingNumber#
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | The numerical value to be displayed. | |
| padStart | boolean | false | Whether to pad the integer part with a leading zero if it is less than 10. |
| decimalSeparator | string | '.' | The character to use as the decimal separator. |
Credits#
Inspired by Number Flow and Animated Counter.
Build with DWL Components
Use the copied registry, charts, blocks, and create tools in one place.
Start from the DWL Components create flow and customize from there.
Open DWL Components Create