> ## Documentation Index
> Fetch the complete documentation index at: https://shivamgoyal.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Component Toolbox

> Explore and use pre-built components to accelerate your frontend development

# Component Toolbox

The Component Toolbox provides a comprehensive collection of pre-built UI components that you can easily add to your web applications. This powerful feature accelerates your development process by providing ready-made, customizable components that follow best practices for design and accessibility.

## Overview

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/shivamgoyal/images/component-toolbox-overview.png" alt="Component Toolbox Interface" />
</Frame>

The Component Toolbox gives you access to a wide range of UI components built with ShadCN and Tailwind CSS. These components are:

* **Production-ready**: Thoroughly tested and optimized for performance
* **Accessible**: Following WCAG guidelines for inclusive design
* **Customizable**: Easily adaptable to match your brand's visual identity
* **Responsive**: Designed to work on all device sizes
* **Well-documented**: Complete with usage examples and prop details

## ShadCN UI Component Library

ShadCN UI serves as the primary component library in CodeNull, providing accessible, customizable interface elements that follow best practices for web applications. The system maintains a comprehensive library of ShadCN component definitions, each including import instructions and usage examples.

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/shivamgoyal/images/shadcn-components.png" alt="ShadCN Component Examples" />
</Frame>

Key benefits of ShadCN UI components:

* **Built on Radix UI primitives**: Ensures a strong foundation for accessibility
* **Proper keyboard navigation**: Tab focus management and intuitive controls
* **ARIA attributes**: Built-in accessibility features for screen readers
* **"Copy and paste" approach**: Allows for complete developer control and customization
* **Consistent design language**: Maintains visual harmony across your application

## Customization Toolbar for Non-Technical Users

The customization toolbar provides an intuitive interface for non-technical users to adjust the frontend of their website without writing code.

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/shivamgoyal/images/customization-toolbar.png" alt="Customization Toolbar Interface" />
</Frame>

With the customization toolbar, you can:

* **Modify visual elements**: Change colors, fonts, spacing, and layouts
* **Adjust component properties**: Configure behaviors and appearances
* **Manage content**: Update text, images, and other media
* **Apply themes**: Switch between predefined design themes
* **Preview changes**: See updates in real-time before publishing

This toolbar makes it easy for teams to collaborate, allowing both technical and non-technical members to contribute to the frontend development process.

## Customization Bar

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/shivamgoyal/images/customization-bar.png" alt="Customization Bar Interface" />
</Frame>

The Customization Bar is built to give users an uninterrupted editing experience. It automatically fills in default element class names at the start, creating a uniform design framework across your application.

### Key Features

* **Default Style Management**: Default class names are automatically applied to all elements
* **Class Name Editing**: Users can modify these class names using the editor
* **Change Persistence**: Modified class names are stored for future editing sessions
* **Automatic Fallback**: If no changes are made, default class names are automatically saved

This approach carefully balances consistency and flexibility in your design workflow:

* **Reduced Errors**: By maintaining default styles unless explicitly changed, the system minimizes styling mistakes
* **Simplified Editing**: The interface streamlines the customization process
* **Design Safety**: Users can experiment with styling without compromising the underlying design structure
* **Focus on Improvement**: Concentrate on enhancing the design without risking disruption to the default layout

The Customization Bar creates a workflow where you can confidently make style adjustments while maintaining the integrity of your application's overall design system.

## Persistent Performance Tracking

CodeNull includes built-in performance tracking that continuously monitors your application's frontend performance.

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/shivamgoyal/images/performance-dashboard.png" alt="Performance Tracking Dashboard" />
</Frame>

The performance tracking features include:

* **Core Web Vitals monitoring**: Track LCP, FID, CLS, and other key metrics
* **Component-level analysis**: Identify which components impact performance
* **Trend visualization**: Monitor performance changes over time
* **Optimization suggestions**: Receive AI-powered recommendations for improvements

This persistent tracking ensures your application maintains optimal performance as you add and customize components.

## Component Categories

<CardGroup cols={3}>
  <Card title="Layout Components" icon="columns">
    Components for structuring page layouts
  </Card>

  <Card title="Navigation Elements" icon="compass">
    Menus, tabs, and navigation controls
  </Card>

  <Card title="Form Controls" icon="input-text">
    Input fields, selectors, and form utilities
  </Card>

  <Card title="Data Display" icon="table">
    Tables, lists, and data visualization tools
  </Card>

  <Card title="Feedback Components" icon="bell">
    Alerts, notifications, and progress indicators
  </Card>

  <Card title="Disclosure Widgets" icon="caret-down">
    Accordions, tabs, and expandable content
  </Card>

  <Card title="Media Components" icon="image">
    Image displays, carousels, and media players
  </Card>

  <Card title="Overlay Components" icon="square-dashed">
    Modals, drawers, and popover components
  </Card>

  <Card title="Utility Components" icon="tools">
    Tooltips, badges, and helper elements
  </Card>
</CardGroup>

## Using the Toolbox

<Steps>
  <Step title="Browse Components">
    Explore the Component Toolbox through categories or use the search function to find specific components.
  </Step>

  <Step title="Preview Components">
    Click on any component to view its preview, including different states and variants.
  </Step>

  <Step title="Customize Properties">
    Adjust component properties through the properties panel to match your design requirements.
  </Step>

  <Step title="Add to Your Project">
    Drag and drop the component into your canvas or click "Add to Project" to include it in your application.
  </Step>

  <Step title="Modify the Code">
    For more advanced customization, access and modify the component's source code directly.
  </Step>
</Steps>

## Component Preview & Properties

When selecting a component, the toolbox displays:

<Tabs>
  <Tab title="Preview">
    <Frame>
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/shivamgoyal/images/component-preview.png" alt="Component Preview Interface" />
    </Frame>

    The preview panel shows how the component appears with current property settings.
  </Tab>

  <Tab title="Properties">
    <Frame>
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/shivamgoyal/images/component-properties.png" alt="Component Properties Interface" />
    </Frame>

    The properties panel allows you to:

    * Adjust styling (colors, typography, spacing)
    * Configure component behavior
    * Set content and data values
    * Enable or disable features
  </Tab>

  <Tab title="Code">
    <Frame>
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/shivamgoyal/images/component-code.png" alt="Component Code Interface" />
    </Frame>

    Access the component's JSX/TSX code for direct editing or for learning how it's constructed.
  </Tab>
</Tabs>

## Popular Components

<CardGroup cols={2}>
  <Card title="Button" icon="square-caret-right" href="/frontend-dashboard/prebuilt-components#button">
    Versatile button component with multiple variants and states
  </Card>

  <Card title="Data Table" icon="table" href="/frontend-dashboard/prebuilt-components#data-table">
    Advanced table with sorting, filtering, and pagination
  </Card>

  <Card title="Form" icon="file-lines" href="/frontend-dashboard/prebuilt-components#form">
    Complete form system with validation and submission handling
  </Card>

  <Card title="Modal Dialog" icon="window-maximize" href="/frontend-dashboard/prebuilt-components#dialog">
    Accessible modal dialog for secondary content
  </Card>

  <Card title="Navigation Menu" icon="bars" href="/frontend-dashboard/prebuilt-components#navigation-menu">
    Responsive navigation system with dropdown support
  </Card>

  <Card title="Card" icon="credit-card" href="/frontend-dashboard/prebuilt-components#card">
    Versatile content container with multiple layout options
  </Card>
</CardGroup>

## Customization Options

The Component Toolbox allows you to customize components in multiple ways:

<CardGroup cols={2}>
  <Card title="Property Customization" icon="sliders">
    Adjust component properties through the visual interface
  </Card>

  <Card title="Theme Customization" icon="palette">
    Apply site-wide theme changes that affect all components
  </Card>

  <Card title="Code Customization" icon="code">
    Directly edit component code for advanced modifications
  </Card>

  <Card title="CSS Overrides" icon="paintbrush">
    Add custom CSS/Tailwind classes to modify appearance
  </Card>
</CardGroup>

## Component Creation

In addition to using pre-built components, you can create your own:

<Steps>
  <Step title="Create a New Component">
    In the Component Toolbox, click "Create Custom Component" to start with a template or from scratch.
  </Step>

  <Step title="Build Your Component">
    Use the visual editor or code editor to build your component's structure and behavior.
  </Step>

  <Step title="Define Properties">
    Configure customizable properties that will appear in the properties panel.
  </Step>

  <Step title="Save to Your Library">
    Save your component to your personal or team component library for reuse.
  </Step>
</Steps>

## Best Practices

<Tip>
  Maintain consistency in your component usage. Try to reuse the same component variants throughout your application rather than creating slightly different versions for each instance.
</Tip>

* **Start with existing components**: Modify pre-built components before creating custom ones
* **Use composition**: Combine simple components to create complex interfaces
* **Maintain accessibility**: Ensure that customizations preserve accessibility features
* **Document custom components**: Add comments and descriptions to your custom components
* **Create component variants**: Define variants for different contexts rather than creating new components

## Next Steps

<CardGroup cols={3}>
  <Card title="Frontend Dashboard" icon="palette" href="/frontend-dashboard/overview">
    Return to the main Frontend Dashboard
  </Card>

  <Card title="Component Generation" icon="magic-wand" href="/frontend-dashboard/component-generation">
    Generate components using AI-powered descriptions
  </Card>

  <Card title="Deployment Dashboard" icon="rocket" href="/deployment-dashboard/overview">
    Prepare your website for launch
  </Card>
</CardGroup>