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
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.
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.
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
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.
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
Browse Components
Explore the Component Toolbox through categories or use the search function to find specific components.
Preview Components
Click on any component to view its preview, including different states and variants.
Customize Properties
Adjust component properties through the properties panel to match your design requirements.
Add to Your Project
Drag and drop the component into your canvas or click “Add to Project” to include it in your application.
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:
The preview panel shows how the component appears with current property settings.
The preview panel shows how the component appears with current property settings.
The properties panel allows you to:
- Adjust styling (colors, typography, spacing)
- Configure component behavior
- Set content and data values
- Enable or disable features
Access the component’s JSX/TSX code for direct editing or for learning how it’s constructed.
Popular Components
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:
Create a New Component
In the Component Toolbox, click “Create Custom Component” to start with a template or from scratch.
Build Your Component
Use the visual editor or code editor to build your component’s structure and behavior.
Define Properties
Configure customizable properties that will appear in the properties panel.
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