​
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

Component Toolbox Interface
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.
ShadCN Component Examples
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.
Customization Toolbar Interface
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

Customization Bar Interface
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.
Performance Tracking Dashboard
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

Layout Components

Components for structuring page layouts

Navigation Elements

Menus, tabs, and navigation controls

Form Controls

Input fields, selectors, and form utilities

Data Display

Tables, lists, and data visualization tools

Feedback Components

Alerts, notifications, and progress indicators

Disclosure Widgets

Accordions, tabs, and expandable content

Media Components

Image displays, carousels, and media players

Overlay Components

Modals, drawers, and popover components

Utility Components

Tooltips, badges, and helper elements

​
Using the Toolbox

1

Browse Components

Explore the Component Toolbox through categories or use the search function to find specific components.
2

Preview Components

Click on any component to view its preview, including different states and variants.
3

Customize Properties

Adjust component properties through the properties panel to match your design requirements.
4

Add to Your Project

Drag and drop the component into your canvas or click “Add to Project” to include it in your application.
5

Modify the Code

For more advanced customization, access and modify the component’s source code directly.

​
Component Preview & Properties

When selecting a component, the toolbox displays:
Component Preview Interface
The preview panel shows how the component appears with current property settings.

Button

Versatile button component with multiple variants and states

Data Table

Advanced table with sorting, filtering, and pagination

Form

Complete form system with validation and submission handling

Modal Dialog

Accessible modal dialog for secondary content

Navigation Menu

Responsive navigation system with dropdown support

Card

Versatile content container with multiple layout options

​
Customization Options

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

Property Customization

Adjust component properties through the visual interface

Theme Customization

Apply site-wide theme changes that affect all components

Code Customization

Directly edit component code for advanced modifications

CSS Overrides

Add custom CSS/Tailwind classes to modify appearance

​
Component Creation

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

Create a New Component

In the Component Toolbox, click “Create Custom Component” to start with a template or from scratch.
2

Build Your Component

Use the visual editor or code editor to build your component’s structure and behavior.
3

Define Properties

Configure customizable properties that will appear in the properties panel.
4

Save to Your Library

Save your component to your personal or team component library for reuse.

​
Best Practices

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.
  • 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

Frontend Dashboard

Return to the main Frontend Dashboard

Component Generation

Generate components using AI-powered descriptions

Deployment Dashboard

Prepare your website for launch