Skip to content
RapidRoot Docs

UI Components Overview

RapidRoot comes with a set of pre-built and customizable UI components using shadcn/ui and Tailwind CSS. This page provides an overview of the available components, their purpose, and basic usage patterns. Where necessary, links to dedicated docs or code examples are provided.

1. Styling Approach

  1. Tailwind CSS

    • A utility-first CSS framework that enables rapid styling without leaving your markup.
    • Configured in tailwind.config.js for custom themes, fonts, spacing, etc.

  2. shadcn/ui

    • A collection of accessible, unstyled components built on top of Radix Primitives.
    • Offers an opinionated design system with easily overrideable classes, so you can adapt each component to your branding.

  3. Custom Components

    • In addition to the library components, we have custom wrappers and specialized components for domain-specific features.
    • Typically located in app/(components)/ or components/ (depending on your Next.js structure).

Why this combo? Tailwind + shadcn/ui allows you to move fast, maintain consistent design, and easily scale to more advanced use cases.

2. Component Categories

2.1 Layout & Structure

  • ClientLayout: Client-side layout wrapper that provides essential app-wide functionality including theme support, loading indicators, toasts, tooltips, and customer chat integration.

2.2 Navigation & Menus

  • AppSidebar: Responsive application sidebar that provides navigation structure with a header, main navigation menu, and user profile section in the footer.
  • NavMain: Renders a sidebar menu with collapsible sections and nested items, supporting both mobile and desktop layouts.
  • NavUser: Displays the user’s avatar and email with a dropdown menu for profile actions and authentication controls.

2.3 Data Display

  • Table: Display tabular data with sorting/pagination (if implemented).
  • Card: A container used to group related content.
  • Badge: A small component for status indicators or category labels.
  • Avatar: A round profile image or icon representing a user or entity.

2.4 Forms & Inputs

  • Input / TextField: Basic text input fields.
  • Select / Dropdown: Standard select box with custom styling.
  • Checkbox / Radio: Styled checkboxes and radio buttons.
  • Button: Primary, secondary, or destructive button variants using Tailwind utilities.

2.5 Feedback & Overlays

  • Dialog: A popup or overlay used for user confirmation or additional forms.
  • Alert: Notifications or status messages (success, warning, error).
  • Tooltip: Hover-based informational popups for icons or text.

2.6 Custom / Advanced

  • ButtonSupport: A support/help button component, likely used for customer assistance or documentation access.
  • ButtonSignIn: An authentication button that displays either a sign-in link or the user’s profile information with a link to their account dashboard.
  • DateRangePicker: A calendar-based date range selector component for choosing start and end dates.

Note: The actual list in your repo may differ. This table of contents helps devs find relevant components quickly.

3. General Usage Patterns

3.1 Importing Components

'use client';


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


export default function ExamplePage() {
  return (
    <div className="p-4">
      <Card>
        <h2 className="text-xl font-bold mb-2">Sample Card</h2>
        <Button variant="primary">Click me</Button>
      </Card>
    </div>
  );
}

Tip: Depending on how you’ve organized your components, your imports might come from shadcn/ui or custom wrappers. Adjust paths accordingly.

3.2 Styling & Customization

  • Tailwind Classes: Apply utility classes directly in JSX (e.g., className="p-4 bg-gray-100").
  • Variants: Some components have built-in variants (e.g., variant="outline").
  • Extending Components: If you need a special variant, copy the base code from shadcn/ui, then create a custom component (e.g., CustomButton.tsx).

3.3 Theming

  • Tailwind Config: Adjust global theme settings in tailwind.config.js (colors, spacing, fonts).
  • CSS Variables: For advanced theming, consider using CSS variables or theming solutions like theme.config.ts.

4. Custom Components & Wrappers

While most UI elements come from shadcn/ui, we’ve also included some domain-specific or app-specific components:

  1. /components/ai/PromptContainer.tsx: A specialized component for AI prompts or chatbot interactions.
  2. /components/ai/PromptInput.tsx: A custom input field for AI prompts.
  3. /components/Pricing.tsx: A custom pricing component for subscription plans or product tiers.
  4. /components/ThemeProvider.tsx: A wrapper component for applying global themes or dark mode.

For more specialized components, go to the /components top level folder or the /components folders within the routes.

5. Conventions & Best Practices

  • Folder Structure:
    • app/(components)/ or /components/ for UI code.
    • app/(modules)/ if you’re grouping by feature or domain.
  • Naming: Keep component names PascalCase (e.g., Card, UserAvatar) for consistency.
  • Reusability:
    • Keep components generic. Pass data via props rather than embedding logic.
    • For specialized logic, create separate hooks or utility functions.
  • Accessibility:
    • Follow the ARIA guidelines (especially for modals, dialogs, and forms).
    • Use Headless UI or Radix primitives (as included in shadcn/ui) to handle focus traps and keyboard navigation.

6. Learning More

  • shadcn/ui Docs: Official website for usage and advanced configurations.
  • Tailwind CSS Docs: Official Tailwind site with usage patterns and best practices.
  • Radix Primitives: Radix Docs for accessibility features (if you need more under-the-hood knowledge).

8. FAQs / Troubleshooting (UI)

  • My layout is broken!
    • Check for missing Tailwind classes or incorrectly nested components.
  • Styling overrides aren’t working
    • Make sure Tailwind’s order-of-classes isn’t overshadowed by other CSS or libraries.
  • Accessibility issues
    • Ensure you’re using the correct ARIA attributes for modals, popovers, etc.

Conclusion

This overview provides the high-level structure for styling and using components in RapidRoot. If you need more in-depth information or want to explore advanced usage, refer to the code comments in each component file or open a GitHub issue.

Happy building!