Wizcamp

Component Library

20 production-ready components built with Shadcn UI and enhanced with Relume patterns. All components use Tabler icons, modern React patterns, and semantic design tokens.

i

Accordion

complete

Collapsible content sections with custom icons

View Test Page

Badge

complete

Small status indicators and labels

View Test Page

Breadcrumb

complete

Navigation hierarchy with custom separators

View Test Page

Button

complete

Interactive buttons with icons and variants

View Test Page

Carousel

complete

Embla-based image and content carousel

View Test Page

Checkbox

complete

Checkboxes with indeterminate state

View Test Page

Dialog

complete

Modal dialogs with custom close button positioning

View Test Page

Dropdown Menu

complete

Context menus with checkboxes, radio groups, and sub-menus

View Test Page

Input

complete

Text inputs with icons and prefixes

View Test Page

Label

complete

Form labels with peer-disabled states

View Test Page

Pagination

complete

Page navigation with active states

View Test Page

Radio Group

complete

Radio buttons with dot and check indicators

View Test Page

Select

complete

Dropdown selects with chevron rotation

View Test Page

Separator

complete

Horizontal and vertical dividers

View Test Page

Sheet

complete

Slide-over panels from all four sides

View Test Page

Sidebar

complete

Collapsible navigation sidebar with keyboard shortcuts

View Test Page

Skeleton

complete

Loading state placeholders

View Test Page

Switch

complete

Toggle switches with shadow styling

View Test Page

Tabs

complete

Pill-style tabbed interfaces

View Test Page

Textarea

complete

Multi-line text inputs

View Test Page

Tooltip

complete

Contextual popover hints

View Test Page

Video Player

complete

Custom HTML5 video player with controls and overlay

View Test Page

Integration Details

Shadcn Features Kept

  • ✅ Superior focus states and accessibility
  • ✅ Modern styling with semantic tokens
  • ✅ Radix UI primitives for robust behavior
  • ✅ Dark mode support out of the box
  • ✅ Responsive design patterns

Relume Enhancements Added

  • ✅ Icon support (iconLeft, iconRight props)
  • ✅ Additional variants (primary, tertiary, link-alt)
  • ✅ Custom positioning options
  • ✅ Enhanced animations and transitions
  • ✅ Slottable pattern for composition

Technical Stack

Icons

Tabler Icons React - Consistent, modern icon set

Styling

Tailwind CSS v4 with semantic design tokens

Patterns

Modern React.ComponentRef, CVA variants, Slot composition