Skip to main content

Components Overview

The modular building blocks of LibreApps Desktop UI.

Overview​

LibreApps Desktop provides a comprehensive library of reusable React components, built on top of shadcn/ui and Tailwind CSS. These components are designed to be highly customizable, accessible, and consistent with the overall dashboard aesthetic.

Component Categories​

1. UI Components​

Low-level, foundational components like buttons, inputs, and cards. These are the building blocks for more complex UI elements.

2. Dashboard Components​

Specialized components for building dashboard layouts, including sidebars, navbars, and various data visualization widgets.

3. AI Components​

Pre-built components for integrating AI features, such as the Smash AI Chat widget and prompt editors.

4. Layout Components​

Structural components like containers, grids, and sections that help you organize your page content.

Design Principles​

  • Consistency: All components follow a unified design language, ensuring a cohesive look and feel across the entire dashboard.
  • Customizability: Easily change the appearance of components using Tailwind CSS classes or by overriding CSS variables.
  • Accessibility: Built with accessibility in mind, following WAI-ARIA patterns and ensuring keyboard navigability.
  • Responsiveness: All components are designed to work seamlessly across different screen sizes, from mobile to desktop.

How to Use​

Most components are located in the src/components directory. You can import them into your pages or other components as needed:

import { Button } from '@/components/ui/button';

export function MyComponent() {
  return <Button>Click Me</Button>;
}

Best Practices​

  • ✅ Do this: Reuse existing components whenever possible to maintain consistency and reduce code duplication.
  • ✅ Do this: Use the cn utility for merging Tailwind CSS classes.
  • ❌ Don't do this: Manually style elements with inline styles; use Tailwind CSS classes instead.