TrueArmor UI Component Library

A modern React component library built with TypeScript, Tailwind CSS, and Flowbite React. All components follow a compound component pattern similar to Shadcn UI and Flowbite React, providing maximum flexibility and customization.

Installation

npm install atoms-ta-main

Note: If using a scoped package, use:

npm install @chaitanya123123/truearmor-ui-components

Peer Dependencies

Make sure you have these installed in your project:

npm install react react-dom flowbite-react lucide-react

Import Styles

Import the library stylesheet once in your application entry point (e.g., App.jsx, main.tsx):

import "atoms-ta-main/styles.css";

Note: If using a scoped package, use:

import "@chaitanya123123/truearmor-ui-components/styles.css";

Usage Pattern

All components follow a compound component pattern. Each component has:

• A wrapper component (e.g., ButtonTA) that provides context and styling
• Sub-components (e.g., ButtonTAIcon, ButtonTALabel) that compose the UI

Basic Import

import { ButtonTA, ButtonTAIcon, ButtonTALabel, ButtonTAContent } from "atoms-ta-main";

Note: If using a scoped package, replace atoms-ta-main with @chaitanya123123/truearmor-ui-components

Components

AccordionTA

Expandable content sections with smooth animations.

import { AccordionTA, AccordionPanel, AccordionTitle, AccordionContent } from "atoms-ta-main";

<AccordionTA>
  <AccordionPanel>
    <AccordionTitle>AI Findings</AccordionTitle>
    <AccordionContent>
      <p>Your content here...</p>
    </AccordionContent>
  </AccordionPanel>
</AccordionTA>

Exports:

• AccordionTA (default) - Wrapper component
• AccordionPanel - Individual accordion panel
• AccordionTitle - Panel title/header
• AccordionContent - Panel content

AlertTA

Alert messages with icons and customizable types.

import { AlertTA, Alert, AlertIcon, AlertTitle, AlertDescription } from "atoms-ta-main";

// Simple usage
<AlertTA type="success" title="Success!" message="Operation completed successfully" />

// Compound usage
<Alert type="error">
  <AlertIcon type="error" />
  <div>
    <AlertTitle type="error">Error</AlertTitle>
    <AlertDescription>Something went wrong</AlertDescription>
  </div>
</Alert>

Types: success, error, warning, info

Exports:

• AlertTA (default) - Simple wrapper with props
• Alert - Base wrapper component
• AlertIcon - Icon component
• AlertTitle - Title component
• AlertDescription - Description component

BadgeTA

Small status indicators with color variants.

import { BadgeTA, Badge, BadgeIcon, BadgeLabel } from "atoms-ta-main";
import { CheckCircle } from "lucide-react";

// Simple usage
<BadgeTA label="Active" color="success" icon={CheckCircle} />

// Compound usage
<Badge color="info">
  <BadgeIcon icon={CheckCircle} />
  <BadgeLabel>New</BadgeLabel>
</Badge>

Colors: success, error, warning, info, neutral, pink, purple, yellow, green, blue

Exports:

• BadgeTA (default) - Simple wrapper
• Badge - Base wrapper
• BadgeIcon - Icon component
• BadgeLabel - Label component

BreadCrumbTA

Navigation breadcrumbs with separators.

import { BreadCrumbTA, BreadCrumbItem, BreadCrumbSeperator } from "atoms-ta-main";
import { Home } from "lucide-react";

<BreadCrumbTA>
  <BreadCrumbItem label="Home" icon={Home} href="/" />
  <BreadCrumbSeperator />
  <BreadCrumbItem label="Products" href="/products" />
  <BreadCrumbSeperator />
  <BreadCrumbItem label="Current" active />
</BreadCrumbTA>

Exports:

• BreadCrumbTA (default) - Wrapper
• BreadCrumbItem - Individual breadcrumb item
• BreadCrumbSeperator - Separator component

ButtonTA

Flexible button component with multiple variants.

import { ButtonTA, ButtonTAIcon, ButtonTALabel, ButtonTAContent } from "atoms-ta-main";
import { Download } from "lucide-react";

// Simple usage (backward compatible)
<ButtonTA label="Click Me" buttonType="primary" onClick={() => alert('clicked')} />

// Compound usage
<ButtonTA buttonType="secondary" onClick={handleClick}>
  <ButtonTAContent>
    <ButtonTAIcon>
      <Download size={16} />
    </ButtonTAIcon>
    <ButtonTALabel>Download</ButtonTALabel>
  </ButtonTAContent>
</ButtonTA>

Button Types: primary, secondary, tertiary

Exports:

• ButtonTA (default) - Wrapper component
• ButtonTAIcon - Icon container
• ButtonTALabel - Label text
• ButtonTAContent - Content wrapper (handles icon position)

CalendarTA

Full-featured calendar component for date selection.

import { CalendarTA } from "atoms-ta-main";

<CalendarTA
  initialDate={new Date()}
  onOk={(date) => console.log('Selected:', date)}
  onCancel={() => console.log('Cancelled')}
/>

Props:

• initialDate?: Date - Initial selected date
• onOk?: (date: Date) => void - Callback when OK is clicked
• onCancel?: () => void - Callback when Cancel is clicked
• onSelectDate?: (date: Date) => void - Callback when date is selected

CardTA

Card container with header, content, and footer sections.

import { CardTA, CardTitle, CardContent, CardDescription, CardFooter, CardLeftIcon, CardRightIcon } from "atoms-ta-main";
import { FileText, Check } from "lucide-react";

<CardTA>
  <CardTitle>Document Title</CardTitle>
  <CardContent>
    <CardLeftIcon icon={FileText} />
    <CardDescription>This is a description of the card content.</CardDescription>
  </CardContent>
  <CardFooter repos={5} badgeColor="success" />
  <CardRightIcon icon={Check} isVisible={true} />
</CardTA>

Exports:

• CardTA (default) - Wrapper
• CardTitle - Card header
• CardContent - Main content area
• CardDescription - Description text
• CardFooter - Footer with badge
• CardLeftIcon - Left side icon
• CardRightIcon - Right side icon

CheckboxTA

Custom checkbox with label support.

import { CheckboxTA, CheckboxTAInput, CheckboxTALabel } from "atoms-ta-main";

<CheckboxTA checked={isChecked} onChange={setIsChecked}>
  <CheckboxTAInput />
  <CheckboxTALabel>Accept terms and conditions</CheckboxTALabel>
</CheckboxTA>

Exports:

• CheckboxTA (default) - Wrapper
• CheckboxTAInput - Checkbox input
• CheckboxTALabel - Label component

ContextMenuTA

Context menu with grouped actions.

import { ContextMenuTA, ContextMenuTASection, ContextMenuTAItem, defaultMenuItems } from "atoms-ta-main";
import { Download, Share } from "lucide-react";

<ContextMenuTA onSelect={(label) => console.log(label)}>
  <ContextMenuTASection
    title="Actions"
    items={defaultMenuItems.action}
    customItems={[{ label: "Custom", icon: <Share /> }]}
  />
  <ContextMenuTAItem label="Delete" icon={<Download />} />
</ContextMenuTA>

Exports:

• ContextMenuTA (default) - Wrapper
• ContextMenuTASection - Section with title
• ContextMenuTAItem - Individual menu item
• defaultMenuItems - Predefined menu items

CustomRadioTA

Custom radio button component.

import { CustomRadioTA, CustomRadioTAInput, CustomRadioTALabel } from "atoms-ta-main";

<CustomRadioTA name="option" checked={selected === "option1"} onChange={() => setSelected("option1")}>
  <CustomRadioTAInput />
  <CustomRadioTALabel>Option 1</CustomRadioTALabel>
</CustomRadioTA>

Exports:

• CustomRadioTA (default) - Wrapper
• CustomRadioTAInput - Radio input
• CustomRadioTALabel - Label component

DatePickerTA

Date picker with calendar popup.

import { DatePickerTA, DatePickerTAInput, DatePickerTACalendar } from "atoms-ta-main";

<DatePickerTA initialDate={new Date()} onDateChange={(date) => console.log(date)}>
  <DatePickerTAInput placeholder="Select date" />
  <DatePickerTACalendar />
</DatePickerTA>

Exports:

• DatePickerTA (default) - Wrapper
• DatePickerTAInput - Input field
• DatePickerTACalendar - Calendar popup

DropDownTA

Searchable dropdown with custom rendering.

import { DropDownTA, DropDownTATrigger, DropDownTASearch, DropDownTAList } from "atoms-ta-main";

<DropDownTA
  items={users}
  placeholder="Select user"
  getItemLabel={(item) => item.name}
>
  <DropDownTATrigger />
  <DropDownTASearch />
  <DropDownTAList renderItem={(item) => (
    <div>
      <span>{item.name}</span>
      <span className="text-gray-500">({item.email})</span>
    </div>
  )} />
</DropDownTA>

Exports:

• DropDownTA (default) - Wrapper
• DropDownTATrigger - Trigger button
• DropDownTASearch - Search input
• DropDownTAList - Dropdown list

FileInputTA

File upload component with drag-and-drop.

import { FileInputTA, FileInputTADropzone, FileInputTAIcon, FileInputTAText, FileInputTAButton } from "atoms-ta-main";

<FileInputTA accept="image/*">
  <FileInputTADropzone>
    <FileInputTAIcon />
    <FileInputTAText 
      mainText="Click to upload" 
      subText="SVG, PNG, JPG or GIF (MAX. 800x400px)" 
    />
    <FileInputTAButton label="Browse File" />
  </FileInputTADropzone>
</FileInputTA>

Exports:

• FileInputTA (default) - Wrapper
• FileInputTADropzone - Dropzone container
• FileInputTAIcon - Upload icon
• FileInputTAText - Text content
• FileInputTAButton - Browse button

InputTA

Text input with label and multiline support.

import { InputTA, InputTALabel, InputTAField } from "atoms-ta-main";

// Single line
<InputTA id="email" multiline={false}>
  <InputTALabel>Email Address</InputTALabel>
  <InputTAField 
    type="email" 
    placeholder="Enter your email"
    value={email}
    onChange={(e) => setEmail(e.target.value)}
  />
</InputTA>

// Multiline
<InputTA id="message" multiline={true} rows={5}>
  <InputTALabel>Message</InputTALabel>
  <InputTAField 
    placeholder="Enter your message"
    value={message}
    onChange={(e) => setMessage(e.target.value)}
  />
</InputTA>

Exports:

• InputTA (default) - Wrapper
• InputTALabel - Label component
• InputTAField - Input/textarea field

ModalTA

Modal dialog with header, body, and footer.

import { ModalTA, ModalTAHeader, ModalTABody, ModalTAFooter } from "atoms-ta-main";

<ModalTA open={isOpen} onClose={() => setIsOpen(false)}>
  <ModalTAHeader>Confirm Action</ModalTAHeader>
  <ModalTABody>
    <p>Are you sure you want to proceed?</p>
  </ModalTABody>
  <ModalTAFooter>
    <button onClick={() => setIsOpen(false)}>Cancel</button>
    <button onClick={handleConfirm}>Confirm</button>
  </ModalTAFooter>
</ModalTA>

Exports:

• ModalTA (default) - Wrapper
• ModalTAHeader - Header section
• ModalTABody - Body content
• ModalTAFooter - Footer section

PaginationTA

Pagination controls for tables and lists.

import { PaginationTA, PaginationTAControls } from "atoms-ta-main";

// Simple usage
<PaginationTA 
  totalPages={10} 
  initialPage={1}
  onChange={(page) => console.log(page)}
/>

// Compound usage
<PaginationTA totalPages={10} initialPage={1} onChange={handlePageChange}>
  <PaginationTAControls previousLabel="<" nextLabel=">" />
</PaginationTA>

Exports:

• PaginationTA (default) - Wrapper
• PaginationTAControls - Pagination controls

ProgressBarTA

Progress bar with percentage display.

import { ProgressBarTA, ProgressBarTALabel, ProgressBarTABar } from "atoms-ta-main";

<ProgressBarTA progress={75} height="h-2">
  <ProgressBarTALabel />
  <ProgressBarTABar />
</ProgressBarTA>

Exports:

• ProgressBarTA (default) - Wrapper
• ProgressBarTALabel - Percentage label
• ProgressBarTABar - Progress bar

RangeSliderTA

Range slider with tooltip and marks.

import { RangeSliderTA, RangeSliderTAInput, RangeSliderTATooltip, RangeSliderTAMarks } from "atoms-ta-main";

<RangeSliderTA min={0} max={100} defaultValue={50} step={1}>
  <RangeSliderTATooltip />
  <RangeSliderTAInput />
  <RangeSliderTAMarks />
</RangeSliderTA>

Exports:

• RangeSliderTA (default) - Wrapper
• RangeSliderTAInput - Slider input
• RangeSliderTATooltip - Value tooltip
• RangeSliderTAMarks - Mark labels
• RangeSliderTAMark - Individual mark

StepperTA

Step indicator for multi-step processes.

import { StepperTA, StepperTAStep, StepperTAConnector } from "atoms-ta-main";

<StepperTA currentStep={2} color="#173B4E">
  <StepperTAStep label="Step 1" />
  <StepperTAStep label="Step 2" />
  <StepperTAStep label="Step 3" />
</StepperTA>

Exports:

• StepperTA (default) - Wrapper
• StepperTAStep - Individual step
• StepperTAConnector - Connector between steps

TableTA

Data table with pagination support.

import { TableTA, TableTAHead, TableTABody, TableTARow, TableTACell, TableTAPagination } from "atoms-ta-main";

// Simple usage
<TableTA
  data={tableData}
  columns={columns}
  onRowClick={(row) => console.log(row)}
  striped={true}
  hoverable={true}
/>

// Compound usage
<TableTA data={data} columns={columns}>
  <TableTAHead>
    <tr>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </TableTAHead>
  <TableTABody>
    {data.map((row) => (
      <TableTARow key={row.id} row={row}>
        <TableTACell value={row.name} />
        <TableTACell value={row.email} />
      </TableTARow>
    ))}
  </TableTABody>
  <TableTAPagination length={100} rowsCount={10} setPage={setPage} page={currentPage} />
</TableTA>

Exports:

• TableTA (default) - Wrapper
• TableTAHead - Table header
• TableTABody - Table body
• TableTARow - Table row
• TableTACell - Table cell
• TableTAPagination - Pagination component

TabsTA

Tabbed interface component.

import { TabsTA, TabsTAItem } from "atoms-ta-main";
import { Home, Settings } from "lucide-react";

<TabsTA variant="underline" color="#173B4E">
  <TabsTAItem index={0} title="Home" icon={<Home />}>
    Home content
  </TabsTAItem>
  <TabsTAItem index={1} title="Settings" icon={<Settings />}>
    Settings content
  </TabsTAItem>
</TabsTA>

Exports:

• TabsTA (default) - Wrapper
• TabsTAItem - Individual tab

ToastTA

Toast notification component.

import { ToastTA, ToastTAItem, ToastTAIcon, ToastTAMessage, ToastTAProgress } from "atoms-ta-main";

<ToastTA data={toasts} duration={3000}>
  {toasts.map((toast) => (
    <ToastTAItem key={toast.id} toast={toast}>
      <ToastTAIcon />
      <ToastTAMessage />
      <ToastTAProgress />
    </ToastTAItem>
  ))}
</ToastTA>

Exports:

• ToastTA (default) - Wrapper
• ToastTAItem - Individual toast
• ToastTAIcon - Icon component
• ToastTAMessage - Message text
• ToastTAProgress - Progress bar

ToggleSwitchTA

Toggle switch component.

import { ToggleSwitchTA, ToggleSwitchTAControl, ToggleSwitchTALabel, ToggleSwitchTADescription } from "atoms-ta-main";

<ToggleSwitchTA checked={isEnabled} onChange={setIsEnabled} size="md">
  <ToggleSwitchTAControl />
  <div>
    <ToggleSwitchTALabel>Enable notifications</ToggleSwitchTALabel>
    <ToggleSwitchTADescription>Receive email notifications</ToggleSwitchTADescription>
  </div>
</ToggleSwitchTA>

Sizes: sm, md, lg

Exports:

• ToggleSwitchTA (default) - Wrapper
• ToggleSwitchTAControl - Switch control
• ToggleSwitchTALabel - Label text
• ToggleSwitchTADescription - Description text

ToolTipTA

Tooltip component with dark/light variants.

import { ToolTipTA, ToolTipTAContent, ToolTipTAArrow } from "atoms-ta-main";

<ToolTipTA type="dark">
  <button>Hover me</button>
  <ToolTipTAContent>This is a tooltip</ToolTipTAContent>
  <ToolTipTAArrow />
</ToolTipTA>

Types: dark, light

Exports:

• ToolTipTA (default) - Wrapper
• ToolTipTAContent - Tooltip content
• ToolTipTAArrow - Arrow indicator

Styling

All components use Tailwind CSS and follow the TrueArmor design system. The primary color is #173B4E.

Customization

You can customize components using:

• className prop for additional Tailwind classes
• style prop for inline styles
• Component-specific props

Color Palette

• Primary: #173B4E
• Text: #1B1B1B
• Gray: #6B7280
• Border: #D1D5DB
• Background: #F9FAFB

TypeScript Support

All components are fully typed with TypeScript. Import types as needed:

import type { ButtonTAProps } from "atoms-ta-main";

Contributing

This is a private library. For issues or feature requests, please contact the maintainers.

License

MIT