Modern Design

Clean and modern components with a focus on user experience.

Responsive

Fully responsive components that work on all screen sizes.

Lightweight

Minimal CSS and JavaScript for optimal performance.

Angular Components

Customisable components for the latest Angular 19.

Introduction

BODUI is a modern and lightweight UI component library for building beautiful web interfaces. Its a highly customisable and scalable design system library developed specifically for the PIMS, Clinic and Brochure. Built with modularity and adaptability in mind, BODUI empowers teams to create consistent and accessible user interfaces while maintaining the unique visual identity of each product.

What makes BODUI truly powerful is its ability to serve multiple domains from a single source of truth. On page load, the library intelligently adapts its styles to match the specific branding and theme of the active domain.

Key Features

Single Library, Multiple Domains: Seamlessly adapts design tokens and component styles for all three projects.
Token-Driven Customisation: Easily configurable via JSON-based design tokens—colors, typography, spacing, shadows, and more can be tailored to match each domain's brand.
Built for Flexibility: Every part of the system is driven by CSS variables and rem units, making it easy to scale, and extend.
Consistent UI/UX: Promotes design and code consistency across all interfaces while allowing room for customisation.

PIMS

Select to view components tailored for the PIMS project.

Clinic

Select to view components tailored for the Clinic project.

Brochure

Select to view components tailored for the Brochure project.

Installation

Get started with BODUI in your project.

CDN

<link href="https://cdn.jsdelivr.net/gh/tayabraza/bodui/bodui.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/tayabraza/bodui/bodui.min.js"></script>

NPM

npm install bodui

Usage

Learn how to use BODUI components and utilities in your project.

Using Components

BODUI components can be used by adding the appropriate classes to your HTML elements. Here's an example with buttons:

<button class="pc-btn pc-btn-primary">Primary Button</button>
<button class="pc-btn pc-btn-secondary">Secondary Button</button>

Using Utility Classes

BODUI provides utility classes for common styling needs. All utility classes are prefixed with 'pc-':

Primary Background

Neutral Background

<div class="pc-bg-primary pc-text-primary pc-p-4 pc-rounded-md">Primary Background</div>
<div class="pc-mt-2 pc-bg-neutral pc-text-primary pc-p-4 pc-rounded-md">Neutral Background</div>

Responsive Design

BODUI includes responsive utility classes that can be used with different breakpoints:

sm: Small screens (640px and up)
md: Medium screens (768px and up)
lg: Large screens (1024px and up)

This text changes size at different breakpoints

<div class="pc-text-sm md-pc-text-base lg-pc-text-lg">
    This text changes size at different breakpoints
</div>

Customization

BODUI can be customised using CSS variables. Override these variables in your CSS:

:root {
    /* Colors */
    --color-primary-600: #2563eb;
    --color-neutral-600: #4b5563;
    
    /* Spacing */
    --space-sm: 1rem;
    --space-md: 1.25rem;
    --space-lg: 1.5rem;
    
    /* Typography */
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
}

Best Practices

Always use the 'pc-' prefix for all the classes to avoid conflicts
Combine utility classes for complex layouts
Use responsive utilities for mobile-first design
Customize through CSS variables rather than modifying the source
Keep your HTML semantic while using utility classes

Buttons

Examples and customization options for BODUI buttons.

Button Variants

<button class="pc-btn pc-btn-primary">Primary Button</button>
<button class="pc-btn pc-btn-secondary">Secondary Button</button>
<button class="pc-btn pc-btn-success">Success Button</button>
<button class="pc-btn pc-btn-danger">Danger Button</button>
<button class="pc-btn pc-btn-warning">Warning Button</button>
<button class="pc-btn pc-btn-info">Info Button</button>

<cp-button btnText="Submit" className="pc-m-5"></cp-button>

Button Sizes

<button class="pc-btn pc-btn-primary pc-btn-sm">Small Button</button>
<button class="pc-btn pc-btn-primary pc-btn-md">Medium Button</button>
<button class="pc-btn pc-btn-primary pc-btn-lg">Large Button</button>

// Angular code for button sizes
// <button pcButton variant="primary" size="sm">Small Button</button>
// <button pcButton variant="primary" size="md">Medium Button</button>
// <button pcButton variant="primary" size="lg">Large Button</button>

Outline Buttons

<button class="pc-btn pc-btn-primary-outline">Primary Outline</button>
<button class="pc-btn pc-btn-secondary-outline">Secondary Outline</button>
<button class="pc-btn pc-btn-success-outline">Success Outline</button>
<button class="pc-btn pc-btn-danger-outline">Danger Outline</button>
<button class="pc-btn pc-btn-warning-outline">Warning Outline</button>
<button class="pc-btn pc-btn-info-outline">Info Outline</button>

// Angular code for outline buttons
// <button pcButton variant="primary" outline>Primary Outline</button>
// <button pcButton variant="secondary" outline>Secondary Outline</button>
// <button pcButton variant="success" outline>Success Outline</button>
// <button pcButton variant="danger" outline>Danger Outline</button>
// <button pcButton variant="warning" outline>Warning Outline</button>
// <button pcButton variant="info" outline>Info Outline</button>

Button Playground

Variant:

Size:

Outline:

Inputs

Examples and customization options for BODUI input fields.

Text Input

<input type="text" class="pc-input" placeholder="Enter text here">

// Angular code for text input
// <input pcInput placeholder="Enter text here">

Password Input

<input type="password" class="pc-input" placeholder="Enter password">

// Angular code for password input
// <input pcInput type="password" placeholder="Enter password">

Email Input

<input type="email" class="pc-input" placeholder="Enter email">

// Angular code for email input
// <input pcInput type="email" placeholder="Enter email">

Input Playground

Type:

Placeholder:

Disabled:

Forms

Examples and customization options for BODUI form components.

Basic Form

<form class="pc-form">
    <div class="pc-form-group">
        <label class="pc-form-label" for="name">Name</label>
        <input type="text" class="pc-form-input" id="name" placeholder="Enter your name">
    </div>
    <div class="pc-form-group">
        <label class="pc-form-label" for="email">Email</label>
        <input type="email" class="pc-form-input" id="email" placeholder="Enter your email">
    </div>
    <div class="pc-form-group">
        <label class="pc-form-label" for="message">Message</label>
        <textarea class="pc-form-textarea" id="message" placeholder="Enter your message"></textarea>
    </div>
    <button type="submit" class="pc-btn pc-btn-primary">Submit</button>
</form>

Form with Select

Country

State

<form class="pc-form">
    <div class="pc-form-group">
        <label class="pc-form-label" for="country">Country</label>
        <select class="pc-form-select" id="country">
            <option value="">Select a country</option>
            <option value="us">United States</option>
            <option value="ca">Canada</option>
            <option value="uk">United Kingdom</option>
            <option value="au">Australia</option>
        </select>
    </div>
    <div class="pc-form-group">
        <label class="pc-form-label" for="state">State</label>
        <select class="pc-form-select" id="state">
            <option value="">Select a state</option>
            <option value="ca">California</option>
            <option value="ny">New York</option>
            <option value="tx">Texas</option>
        </select>
    </div>
    <button type="submit" class="pc-btn pc-btn-primary">Submit</button>
</form>

Form with Checkboxes and Radio Buttons

Preferences

Subscribe to newsletter

Receive updates

Gender

Male

Female

Other

<form class="pc-form">
    <div class="pc-form-group">
        <label class="pc-form-label">Preferences</label>
        <div class="pc-form-checkbox">
            <input type="checkbox" id="newsletter">
            <label for="newsletter">Subscribe to newsletter</label>
        </div>
        <div class="pc-form-checkbox">
            <input type="checkbox" id="updates">
            <label for="updates">Receive updates</label>
        </div>
    </div>
    <div class="pc-form-group">
        <label class="pc-form-label">Gender</label>
        <div class="pc-form-radio">
            <input type="radio" id="male" name="gender" value="male">
            <label for="male">Male</label>
        </div>
        <div class="pc-form-radio">
            <input type="radio" id="female" name="gender" value="female">
            <label for="female">Female</label>
        </div>
        <div class="pc-form-radio">
            <input type="radio" id="other" name="gender" value="other">
            <label for="other">Other</label>
        </div>
    </div>
    <button type="submit" class="pc-btn pc-btn-primary">Submit</button>
</form>

Form Playground

Layout:

Style:

Spacing:

Tables

Examples and customization options for BODUI table components.

Basic Table

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User
Bob Johnson	bob@example.com	Editor

<table class="pc-table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Role</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>john@example.com</td>
            <td>Admin</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>jane@example.com</td>
            <td>User</td>
        </tr>
        <tr>
            <td>Bob Johnson</td>
            <td>bob@example.com</td>
            <td>Editor</td>
        </tr>
    </tbody>
</table>

Striped Table

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User
Bob Johnson	bob@example.com	Editor

<table class="pc-table pc-table-striped">
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Role</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>john@example.com</td>
            <td>Admin</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>jane@example.com</td>
            <td>User</td>
        </tr>
        <tr>
            <td>Bob Johnson</td>
            <td>bob@example.com</td>
            <td>Editor</td>
        </tr>
    </tbody>
</table>

Bordered Table

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User
Bob Johnson	bob@example.com	Editor

<table class="pc-table pc-table-bordered">
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Role</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>john@example.com</td>
            <td>Admin</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>jane@example.com</td>
            <td>User</td>
        </tr>
        <tr>
            <td>Bob Johnson</td>
            <td>bob@example.com</td>
            <td>Editor</td>
        </tr>
    </tbody>
</table>

Table Playground

Style:

Size:

Hover Effect:

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User
Bob Johnson	bob@example.com	Editor

Cards

Examples and customization options for BODUI cards.

Basic Card

Card Title

This is a basic card body with some content.

Card Footer

<div class="pc-card">
    <div class="pc-card-header">Card Title</div>
    <div class="pc-card-body pc-p-3">
        <p>This is a basic card body with some content.</p>
    </div>
    <div class="pc-card-footer">Card Footer</div>
</div>

Card Playground

Header Text:

Body Text:

Footer Text:

Shadow:

Padding:

Card Title

This is a basic card body with some content.

Card Footer

Modals

Examples and customization options for BODUI modals.

Basic Modal

<button class="pc-btn pc-btn-primary" id="open-pc-modal-1">Open Modal</button>

<div class="pc-modal" id="pc-modal-1">
    <div class="pc-modal-content">
        <div class="pc-modal-header">
            <h2>Modal Title</h2>
            <button class="pc-close-modal">×</button>
        </div>
        <div class="pc-modal-body">
            <p>This is the content of the modal.</p>
            <p>Click the close button or outside to dismiss.</p>
        </div>
        <div class="pc-modal-footer">
            <button class="pc-btn pc-btn-secondary pc-close-modal">Close</button>
            <button class="pc-btn pc-btn-primary">Save Changes</button>
        </div>
    </div>
</div>

Dropdowns

Examples and customization options for BODUI dropdown menus.

Basic Dropdown

<div class="pc-dropdown">
    <button class="pc-btn pc-btn-primary pc-dropdown-toggle">
        Dropdown Menu <i class="fas fa-caret-down"></i>
    </button>
    <div class="pc-dropdown-menu">
        <a href="#" class="pc-dropdown-item">Action 1</a>
        <a href="#" class="pc-dropdown-item">Action 2</a>
        <a href="#" class="pc-dropdown-item">Action 3</a>
    </div>
</div>

Tabs

Examples and customization options for BODUI tabbed interfaces.

Basic Tabs

Content for Tab 1

This is the content for the first tab.

Content for Tab 2

This is the content for the second tab.

Content for Tab 3

This is the content for the third tab.

<div class="pc-tabs">
    <div class="pc-tabs-list">
        <button class="pc-tabs-item active" data-tab="tab1">Tab 1</button>
        <button class="pc-tabs-item" data-tab="tab2">Tab 2</button>
        <button class="pc-tabs-item" data-tab="tab3">Tab 3</button>
    </div>
    <div class="pc-tabs-content">
        <div id="tab1" class="pc-tabs-panel active">
            <h3>Content for Tab 1</h3>
            <p>This is the content for the first tab.</p>
        </div>
        <div id="tab2" class="pc-tabs-panel">
            <h3>Content for Tab 2</h3>
            <p>This is the content for the second tab.</p>
        </div>
        <div id="tab3" class="pc-tabs-panel">
            <h3>Content for Tab 3</h3>
            <p>This is the content for the third tab.</p>
        </div>
    </div>
</div>

Accordions

Examples and customization options for BODUI collapsible accordions.

Basic Accordion

This is the content for accordion item 1.

This is the content for accordion item 2.

This is the content for accordion item 3.

<div class="pc-accordion">
    <div class="pc-accordion-item">
        <button class="pc-accordion-header">Accordion Item 1</button>
        <div class="pc-accordion-content">
            <p>This is the content for accordion item 1.</p>
        </div>
    </div>
    <div class="pc-accordion-item">
        <button class="pc-accordion-header">Accordion Item 2</button>
        <div class="pc-accordion-content">
            <p>This is the content for accordion item 2.</p>
        </div>
    </div>
    <div class="pc-accordion-item">
        <button class="pc-accordion-header">Accordion Item 3</button>
        <div class="pc-accordion-content">
            <p>This is the content for accordion item 3.</p>
        </div>
    </div>
</div>

Carousels

Examples and customization options for BODUI image carousels.

Basic Carousel

<div class="pc-carousel" data-autoplay="true" data-interval="3000">
    <div class="pc-carousel-container">
        <div class="pc-carousel-item active">
            <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=800&auto=format&fit=crop&q=60" alt="Mountain Landscape">
        </div>
        <div class="pc-carousel-item">
            <img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=800&auto=format&fit=crop&q=60" alt="Ocean View">
        </div>
        <div class="pc-carousel-item">
            <img src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=800&auto=format&fit=crop&q=60" alt="Forest Scene">
        </div>
    </div>
    <div class="pc-carousel-indicators">
        <span class="pc-carousel-indicator active" data-slide-to="0"></span>
        <span class="pc-carousel-indicator" data-slide-to="1"></span>
        <span class="pc-carousel-indicator" data-slide-to="2"></span>
    </div>
</div>

Tooltips

Examples and customization options for BODUI tooltips.

Basic Tooltip

Basic Tooltips

Text with Tooltip

Tooltip Positions

Tooltip Sizes

Tooltip Colors

<button class="pc-btn pc-btn-primary" data-tooltip="This is a simple tooltip">Hover Me</button>
<span data-tooltip="Another tooltip example">Text with Tooltip</span>

<!-- With position -->
<button data-tooltip="Top tooltip" data-tooltip-position="top">Top</button>
<button data-tooltip="Bottom tooltip" data-tooltip-position="bottom">Bottom</button>
<button data-tooltip="Left tooltip" data-tooltip-position="left">Left</button>
<button data-tooltip="Right tooltip" data-tooltip-position="right">Right</button>

<!-- With size -->
<button data-tooltip="Small tooltip" data-tooltip-size="sm">Small</button>
<button data-tooltip="Medium tooltip">Medium</button>
<button data-tooltip="Large tooltip" data-tooltip-size="lg">Large</button>

<!-- With color -->
<button data-tooltip="Primary tooltip" data-tooltip-color="primary">Primary</button>
<button data-tooltip="Success tooltip" data-tooltip-color="success">Success</button>
<button data-tooltip="Warning tooltip" data-tooltip-color="warning">Warning</button>
<button data-tooltip="Error tooltip" data-tooltip-color="error">Error</button>

File Upload

Examples and customization options for BODUI file upload components.

Drag & Drop File Upload

Drag & drop files here or click to browse

<div class="pc-file-upload-area">
    <input type="file" id="pc-file-input" multiple>
    <span id="pc-file-upload-label">Drag & drop files here or click to browse</span>
</div>
<ul id="file-list"></ul>

Progress Bars

Examples and customization options for BODUI progress indicators.

Basic Progress Bar

75%

<div class="pc-progress-bar-container">
    <div class="pc-progress-bar" data-progress="75"></div>
    <span class="pc-progress-text">75%</span>
</div>

Animated Progress Bar

50%

<div class="pc-progress-bar-container">
    <div class="pc-progress-bar animated" data-progress="50"></div>
    <span class="pc-progress-text">50%</span>
</div>

Toast Notifications

Examples and customization options for BODUI toast messages.

Basic Toast

<button class="pc-btn pc-btn-primary" id="show-toast-btn">Show Toast</button>

Toast Playground

Message:

Type:

Duration (ms):

Spacing Utilities

Examples of BODUI spacing utility classes for margin and padding.

Margin Utilities

Apply uniform margins to all sides of an element:

.pc-m-0 (0px)

.pc-m-1 (0.25rem)

.pc-m-2 (0.5rem)

.pc-m-3 (0.75rem)

.pc-m-4 (1rem)

.pc-m-5 (1.25rem)

Directional margins (top, bottom, left, right):

.pc-mt-4

.pc-mb-4

.pc-ml-4

.pc-mr-4

<div class="pc-m-4">Element with 1rem margin on all sides</div>
<div class="pc-mt-4">Element with 1rem top margin</div>

Padding Utilities

Apply uniform padding to all sides of an element:

.pc-p-0 (0px)

.pc-p-1 (0.25rem)

.pc-p-2 (0.5rem)

.pc-p-3 (0.75rem)

.pc-p-4 (1rem)

.pc-p-5 (1.25rem)

Directional padding (top, bottom, left, right):

.pc-pt-4

.pc-pb-4

.pc-pl-4

.pc-pr-4

<div class="pc-p-4">Element with 1rem padding on all sides</div>
<div class="pc-pt-4">Element with 1rem top padding</div>

Responsive Spacing

Apply different spacing based on screen size (e.g., sm:pc-m-0, md:pc-p-4, lg:pc-m-6):

Resize your browser to see the responsive margins and padding in action.

Example: <div class="pc-m-2 md:pc-m-4 lg:pc-m-6 pc-p-2 md:pc-p-4 lg:pc-p-6 pc-bg-primary pc-text-white">Responsive Box</div>

Responsive Box

<div class="pc-m-2 md:pc-m-4 lg:pc-m-6 pc-p-2 md:pc-p-4 lg:pc-p-6 pc-bg-primary pc-text-white">Responsive Box</div>

Shadows

Examples of BODUI shadow utility classes.

Shadow Classes

Small Shadow (.pc-shadow-sm)

Medium Shadow (.pc-shadow-md)

Large Shadow (.pc-shadow-lg)

<div class="pc-shadow-sm"></div>
<div class="pc-shadow-md"></div>
<div class="pc-shadow-lg"></div>

Animations

Examples of BODUI animation utility classes.

Spin Animation

<i class="fas fa-spinner pc-spin"></i>

Fade In

This element fades in.

<div class="pc-fade-in">This element fades in.</div>

Transitions

Examples of BODUI transition utility classes.

Hover Transition

Hover to transition background

<div class="pc-transition hover:pc-bg-secondary">Hover to transition background</div>