Artivism Design System
54 Components

Component Library

Complete showcase of all 54 components with live interactive examples

1. Accordion
Vertically stacked set of interactive headings that reveal content

2. Alert
Displays a callout for user attention
3. Alert Dialog
Modal dialog that interrupts the user with important content
4. Aspect Ratio
Displays content within a desired aspect ratio
16:9 Ratio
5. Avatar
Image element with fallback for representing a user
CNJDAB
6. Badge
Displays a badge or a component that looks like a badge
DefaultSecondaryDestructiveOutline
7. Breadcrumb
Displays the path to the current resource
8. Button
Displays a button or a component that looks like a button

Variants

Sizes

With Icons

9. Button Group
Groups related buttons together
10. Calendar
Date picker component for selecting dates
October 2026
11. Card
Container component with header, content, and footer
Card Title
Card Description

This is the card content area.

12. Carousel
A carousel with motion and swipe built using Embla
1
2
3
4
5
13. Chart
Chart components built with Recharts

Chart component (requires Recharts configuration)

14. Checkbox
Checkbox with label for selections
15. Collapsible
Interactive component to show and hide content

@peduarte starred 3 repositories

@radix-ui/primitives
16. Command
Fast, composable, unstyled command menu

Command Palette

Search for a command to run...

17. Context Menu
Displays a menu at the pointer location
Right click here
18. Dialog
Modal dialog that overlays the main content
19. Drawer
Drawer component that slides in from the edge
20. Dropdown Menu
Displays a menu to the user
21. Empty State
Placeholder for empty content areas

No results found

Try adjusting your search or filter criteria

22. Field
Form field wrapper with label and description

This is your public display name.

23. Form
Form components with validation (requires react-hook-form)
24. Hover Card
For sighted users to preview content
25. Input
Text input field for user input
26. Input Group
Input with buttons or text addons
27. Input OTP
One-time password input component
28. Item
Generic list item component
Item 1
Item 2
Item 3
29. Keyboard Key
Displays keyboard shortcuts
⌘ShiftK
30. Label
Label for form controls
31. Menubar
Visually persistent menu common in desktop apps
32. Navigation Menu
Collection of links for site navigation
34. Popover
Displays rich content in a portal
35. Progress
Progress indicator

13% complete

36. Radio Group
Set of checkable buttons where only one can be checked
37. Scroll Area
Visually augments scrollable areas
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26
Item 27
Item 28
Item 29
Item 30
38. Select
Displays a list of options for selection
39. Separator
Visually or semantically separates content

Content above

Content below

40. Sheet
Extends Dialog with side panel positioning
41. Sidebar
Composable sidebar component

Sidebar component (requires layout setup)

42. Skeleton
Placeholder for loading content
43. Slider
Input for selecting a value from a range
44. Sonner
Toast notification system

Sonner toast component (requires Sonner provider)

45. Spinner
Loading spinner indicator
46. Switch
Toggle switch for binary choices
47. Table
Data table for structured content
A list of recent transactions
IDStatusEmailAmount
#001Successuser1@example.com$250.00
#002Pendinguser2@example.com$150.00
#003Faileduser3@example.com$350.00
48. Tabs
Set of layered sections of content

Account settings and information.

49. Textarea
Multi-line text input
50. Toggle
Two-state button that can be on or off
51. Toggle Group
Group of toggle buttons
52. Tooltip
Popup that displays information
Component Index
Quick reference to all 54 components (52 active + 2 placeholders)
AccordionAlertAlert DialogAspect RatioAvatarBadgeBreadcrumbButtonButton GroupCalendarCardCarouselChartCheckboxCollapsibleCommandContext MenuDialogDrawerDropdown MenuEmptyFieldFormHover CardInputInput GroupInput OTPItemKbdLabelMenubarNavigation MenuPaginationPopoverProgressRadio GroupScroll AreaSelectSeparatorSheetSidebarSkeletonSliderSonnerSpinnerSwitchTableTabsTextareaToggleToggle GroupTooltip