Skip to main content

UI Components Overview

Foundational elements for building your dashboard.

Overview​

LibreApps Desktop's UI components are based on shadcn/ui, a collection of beautifully designed, accessible components that you can copy and paste into your apps. We've customized these components to fit LibreApps Desktop aesthetic and integrated them with our rebranding engine.

Key Components​

  • Buttons: Various styles and sizes for user actions.
  • Inputs: Text fields, checkboxes, radios, and more for data entry.
  • Cards: Versatile containers for grouping related content.
  • Modals: Dialogs for focused user interactions.
  • Tables: For displaying structured data with sorting and filtering.
  • Tabs: For organizing content into different views.

Customization​

You can customize these components in two ways:

  1. Tailwind CSS: Pass custom classes to the className prop.
  2. Theme Variables: Update the CSS variables in your theme definition to change colors, border radii, and more.

Accessibility​

All UI components are built using Radix UI primitives, which provide a solid foundation for accessibility. They support keyboard navigation, screen readers, and follow WAI-ARIA best practices.

Best Practices​

  • ✅ Do this: Use the appropriate component for the task (e.g., use a Button for actions, not a Link).
  • ✅ Do this: Provide clear labels and descriptions for all input fields.
  • ❌ Don't do this: Modify the core component files in src/components/ui directly; instead, wrap them or use Tailwind classes for customization.