Skip to main content

Styling / UI Components

This section explains the styling architecture, UI component system, and how to extend and create new components.

📄️ Styling Overview

The application uses a modern, utility-first styling approach combining:

📄️ Tailwind CSS

Configuration

📄️ Component Library (shadcn/ui)

Overview

📄️ CSS Variables & Theming

Color System

📄️ UI Components Location

Directory Structure

📄️ Creating New Components

1. Creating a Base UI Component

📄️ Extending Components

1. Extending with Variants

📄️ Best Practices

1. Component Design

📄️ Utility Functions

cn() - Class Name Utility

📄️ Adding shadcn/ui Components

Using CLI (Recommended)

📄️ Custom Styling Examples

Custom Button Variant

📄️ Summary

| Aspect | Solution | Location |