Documentation

Learn how to integrate and customize CodeHut UI components in your projects

Quick Links
InstallationBasic UsageThemingComponents

Need Help?

Get priority support with a subscription

Contact Support
Installation
Get started with CodeHut UI components

Install the component library using your preferred package manager:

BASH
# Install via npm
npm install @codehut/ui-components

# Install via yarn  
yarn add @codehut/ui-components

# Install via pnpm
pnpm add @codehut/ui-components

Note: Some components require a subscription for access. Free tier includes basic components and previews.

Basic Usage
How to use components in your React application

Import and use components in your React components:

JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
import { LoadingSpinner, Button } from '@codehut/ui-components';

function App() {
  return (
    <div>
      <LoadingSpinner variant="code-matrix" size="lg" />
      <Button variant="primary">Get Started</Button>
    </div>
  );
}
Theming & Customization
Customize components to match your design system

Customize the color scheme by extending your Tailwind CSS configuration:

JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f0f9ff',
          500: '#3b82f6',
          900: '#1e3a8a',
        }
      }
    }
  }
}
Component Reference
Complete list of available components and their props
Loading Spinner
Feedback
Tech-themed loading animations with multiple variants

Props:

variantsizemessageclassName
Advanced Button
Input
Enhanced button component with loading states and icons

Props:

variantsizeloadingiconchildren
Data Table
Display
Fully featured table with sorting, filtering, and pagination

Props:

datacolumnssortablefilterablepageSize
Form Builder
Input
Drag-and-drop form builder with validation

Props:

schemaonSubmitvalidationtheme
Explore All Components