Niusday.Design System
Component Showcase
Comprehensive collection of all UI components in the Niusday design system.
Form Components
Input
FormText input field with various states
Textarea
FormMulti-line text input
Select
FormDropdown selection component
Checkbox
FormCheckbox for boolean selections
Radio Group
FormRadio button group for single selection
Switch
FormToggle switch component
Label
FormForm label component
Input Group
FormInput with addons
Input OTP
FormOne-time password input
Native Select
FormNative HTML select element
Slider
FormRange slider component
Navigation
Tabs
NavigationTabbed interface component
Tab 1 Content
This is the content for tab 1.
Accordion
NavigationCollapsible content sections
Breadcrumb
NavigationNavigation breadcrumb trail
Pagination
NavigationPage navigation component
Overlay
Dialog
OverlayModal dialog component
Sheet
OverlaySide sheet component
Drawer
OverlayBottom drawer component
Popover
OverlayPopover component
Tooltip
OverlayTooltip component
Hover Card
OverlayHover card component
Alert Dialog
OverlayAlert confirmation dialog
Display
Card
DisplayCard container component
Card Title
Card description goes here
This is the card content area.
Badge
DisplayBadge component with variants
DefaultSecondaryDestructiveOutline
Alert
DisplayAlert notification component
Info
This is an informational alert.
Error
This is an error alert.
Avatar
DisplayAvatar component
CNND
Skeleton
DisplayLoading skeleton component
Empty
DisplayEmpty state component
No data found
There are no items to display at this time.
Table
DisplayTable component
| Name | Status | Role |
|---|---|---|
| John Doe | Active | Admin |
| Jane Smith | Active | User |
Progress
DisplayProgress bar component
Separator
DisplayVisual separator component
Section 1
Content above separator
Section 2
Content below separator
Aspect Ratio
DisplayAspect ratio container
16:9 Aspect Ratio
Buttons
Button
ButtonsButton component with variants
Button Group
ButtonsGrouped buttons
Toggle
ButtonsToggle button
Toggle Group
ButtonsToggle button group
Data
Calendar
DataCalendar date picker
Carousel
DataCarousel component
1
2
3
4
5
Scroll Area
DataScrollable area component
Command
DataCommand palette component
No results found.
Calendar
Profile
Settings
Miscellaneous
Kbd
MiscKeyboard shortcut display
⌘K
Item
MiscList item component
User Profile
View and edit your profile
Settings
Manage your preferences
Resizable
MiscResizable panels
Panel 1
Panel 2
Collapsible
MiscCollapsible content
Spinner
MiscLoading spinner
Animate UI Components
Tabs
Animate UIAnimated tabs
Animated Button
Animate UIButton with animation variants
Copy Button
Animate UIButton with copy functionality
Click to copy "Hello World"
Icon Button
Animate UIButton with particle effect
Liquid Button
Animate UILiquid fill effect button
Theme Toggler
Animate UITheme toggler button
Management Bar
Animate UIManagement bar with animated actions
/ 10
Motion Carousel
Animate UICarousel with motion effects
Notification List
Animate UIAnimated notification list
NPM Install Complete
2
just now • 1,227 packages added!
Build Succeeded
1m 11s • Build finished in 12.34s
Lint Passed
5m • No problems found
3
NotificationsView all Pin List
Animate UIList with pinning functionality
Home Dashboard
Main dashboard view
All Items
User Profile
Personal settings
Settings
System configuration
Playful Todolist
Animate UITodolist with playful animations
Headless Checkbox
Animate UICheckbox with framer motion
Files
Animate UIFile tree component
Notes.txt
Hover Card
Animate UIHover card component
Preview Link Card
Animate UILink preview card
Progress
Animate UIAnimated progress bar
Sidebar
Animate UIAnimated sidebar
Niusday Design System © 2026
Built with Shadcn UI, Radix UI, and Tailwind CSS