Components

This section provides an overview of the main components available in the theme.

Core Components

UI Components

The theme includes a comprehensive set of UI components built with modern design principles and accessibility in mind:

Basic Components

  • Avatar: User avatar component with fallback images, size variants, and status indicators. Supports both single and group avatars.

  • Button: Versatile button component with multiple variants (primary, secondary, ghost, link, success, danger, warning, info, light, dark), sizes, and states (loading, disabled). Supports icons and custom styling.

  • Card: Flexible card component with header, content, and footer sections. Supports various styles and hover effects.

  • Label: Form label component with proper accessibility attributes and styling options.

  • Tabs: Animated transitions and support for both horizontal and vertical layouts.

Form Components

  • Input: Enhanced input field with validation states, icons, and custom styling. Supports various input types and sizes.

  • Checkbox: Custom checkbox with indeterminate state, proper labeling, and accessibility support.

  • RadioGroup: Radio button group with proper keyboard navigation and accessibility attributes.

  • Select: Enhanced select dropdown with search, multi-select, and custom option rendering. Includes scroll buttons and group support.

  • Switch: Toggle switch component with smooth animations and accessibility support.

  • Toggle: Simple toggle button with pressed state and custom styling.

  • ToggleGroup: Group of toggle buttons with single or multiple selection modes.

Navigation Components

  • Breadcrumb: Navigation breadcrumb with proper hierarchy, styling, and support for ellipsis.

  • Sidebar: Advanced collapsible sidebar with menu items, submenus, search functionality, and proper navigation. Includes support for badges, actions, and custom content.

  • DropdownMenu: Contextual dropdown menu with support for sub-menus, checkboxes, radio groups, and keyboard navigation.

Feedback Components

  • Dialog: Modal dialog with proper focus management, accessibility, and support for custom content and actions.

  • Popover: Floating popover with positioning and arrow support.

  • Tooltip: Information tooltip with positioning and delay options.

  • Progress: Progress indicator with customizable appearance and animation.

  • Skeleton: Loading skeleton with customizable shapes and animations.

Layout Components

  • Sheet: Side sheet component with various positions, animations, and customizable content areas.

  • ScrollArea: Custom scrollable area with proper styling and behavior.

  • Separator: Visual separator with orientation options.

  • Collapsible: Collapsible content with smooth animations.

  • Accordion: Expandable/collapsible content sections with smooth animations and proper accessibility.

Data Display

  • Table: Enhanced table component with sorting, filtering, pagination, and customizable cells.

  • Calendar: Date picker with month/year navigation and range selection.

  • Chart: Advanced chart component with various visualization types (Bar, Line, Area, Pie) and customization options. Includes tooltips, legends, and responsive design.

  • EventCalendar: A comprehensive calendar component built using the FullCalendar library, which can be found at npm. It provides a full view of months, weeks, and days, and supports event management, including adding, editing, and deleting events. The component is highly customizable, allowing for different views such as agenda, list, and timeline. It also includes features like drag-and-drop event handling, timezone support, and integration with external data sources for dynamic event loading.

Custom Form Components

The custom form components in this theme are designed to enhance user interaction and data input efficiency. Here’s a brief explanation of each component:

  • CustomSelect: This is an advanced dropdown component that supports search functionality, multi-select options, and custom rendering of options. It allows users to easily find and select items from a list, improving the overall user experience.

  • CustomDateRangePicker: This component provides a user-friendly interface for selecting date ranges. It includes preset options, the ability to define custom ranges, and a calendar view for easy navigation and selection of dates.

  • CustomFileUpload: A versatile file upload component that supports drag-and-drop functionality. It provides users with a preview of the files to be uploaded and tracks the progress of the upload process, ensuring a smooth and informative experience.

  • CustomSearch: This search input component is equipped with debounce functionality to optimize performance by limiting the number of search requests. It also offers suggestions and a clear button to enhance the search experience.

  • CustomDialogWrapper: A modal dialog component that allows for customizable content, actions, and animations. It provides a flexible way to display important information or gather user input in a focused manner.

  • CustomDatePicker: This component is designed for selecting individual dates with ease. It offers a simple and intuitive calendar interface, making it easy for users to pick dates accurately.

Chart Components

  • BarChartComponent - Interactive bar chart with tooltips, legends, and responsive design
  • PieChartComponent - Donut/pie chart with percentage display and interactive segments
  • AreaChartComponent - Area chart with gradient fills, tooltips, and time series support
  • LineChartComponent - A versatile line chart supporting multiple data series, tooltips, and zoom functionality for detailed data analysis.

Component Features

Each component comes with the following features:

  • Responsive Design: Works across all device sizes
  • Dark Mode Support: Seamless dark/light theme integration
  • Customization: Easy to customize through props and themes
  • Performance: Optimized for fast loading and rendering
  • TypeScript Support: Full type safety and autocompletion

Usage Guidelines

  1. Import Components: Import components from the theme library
  2. Configure Props: Set required and optional props
  3. Style Customization: Use theme variables for consistent styling
  4. Event Handling: Implement necessary event handlers
  5. Performance: Optimize component usage for better performance

Next Steps