@andrsgrza/ui-library

A comprehensive React TypeScript UI component library with 70+ components and CSS variable customization.

🚀 Features

• 70+ Components organized into 7 categories
• TypeScript Support with full type definitions
• CSS Variables for easy theming and customization
• React 18+ Compatible
• Minimal Dependencies (only react-icons)
• Tree Shakeable - import only what you need
• Modern Design System with consistent styling

📦 Installation

npm install @andrsgrza/ui-library

Or with yarn:

yarn add @andrsgrza/ui-library

🎨 Quick Start

1. Import the CSS Variables

// In your main entry file (e.g., App.tsx or index.tsx)
import "@andrsgrza/ui-library/ui-library.css";

2. Import and Use Components

import React from "react";
import { Button, Message, Loader, Modal } from "@andrsgrza/ui-library";

function App() {
  return (
    <div>
      <Button variant="primary">Click me</Button>
      <Message type="success">Operation successful!</Message>
      <Loader size="medium" />
    </div>
  );
}

3. Customize with CSS Variables (Optional)

/* Override default variables in your CSS */
:root {
  --ui-primary: #37ff00;
  --ui-secondary: #ff6600;
  --ui-font-family: "Your Custom Font", sans-serif;
  --ui-border-radius: 8px;
  --ui-space-unit: 8px;
}

🎯 Component Categories

Core Components (8)

• ActionButtons - Action button group with primary/secondary actions
• Button - Versatile button with multiple variants
• ButtonGroup - Group of related buttons
• IconButton - Button with icon support
• ButtonBar - Horizontal bar of action buttons
• Switch - Toggle switch component
• AuthFormCard - Authentication form wrapper
• LinkButton - Styled link that looks like a button

Feedback Components (7)

• Loader - Loading spinner with size options
• Message - Notification message with types (success, error, warning, info)
• StatusIndicator - Visual status indicator
• Toast - Toast notification
• ToastContainer - Container for toast notifications
• InfoBox - Information box with icon
• InfoTooltip - Tooltip with information

Form Components (11)

• Input - Text input with variants
• NativeSelect - Native select dropdown
• LabeledInput - Input with integrated label
• LabeledTextarea - Textarea with integrated label
• EditableTitle - Inline editable title
• FormLayout - Layout wrapper for forms
• FormRow - Row in a form layout
• QuestionAnswerForm - Q&A form component
• QuestionAnswerInterface - Interactive Q&A interface
• MultiCategorySelector - Multi-category selection
• NestedDragAndDropEditor - Drag and drop editor for nested items

Data Display Components (20)

• Accordion - Collapsible content sections
• Badge - Status or count badge
• Dropdown - Dropdown menu
• Pill - Pill-shaped label
• PillsGrid - Grid of selectable pills
• OptionGrid - Grid of option cards
• DateField - Date display field
• KeyValueList - List of key-value pairs
• AddableList - List with add/remove functionality
• CollapsibleSection - Collapsible content section
• JsonTree - JSON tree viewer
• JsonTreeView - Alternative JSON tree viewer
• ModeSelector - Mode selection component
• PillSelector - Pill-based selector
• QuickActionsDropdown - Quick action menu
• SectionedStepper - Multi-section stepper
• SelectibleList - Selectable list items
• SortFilterControls - Sort and filter controls
• AutoNextToggle - Auto-advance toggle
• GenericReport - Generic report component

Layout Components (6)

• Card - Content card with header/body/footer
• ContentCard - Card for content display
• PageLayout - Full page layout wrapper
• AppLayout - Application shell layout
• HeroSection - Hero banner section
• WelcomePanel - Welcome/onboarding panel

Navigation Components (5)

• TopBar - Top navigation bar
• NavigationMenu - Side navigation menu
• CollapsibleSidebar - Collapsible sidebar navigation
• UserProfileMenu - User profile dropdown menu
• CollapsibleNavigationMenu - Collapsible navigation menu

Overlay Components (2)

• Modal - Modal dialog with header/body/footer
• ConfirmModal - Confirmation dialog

🎨 CSS Variables System

The library uses a comprehensive CSS variables system for easy customization. All variables are prefixed with --ui-:

Color System

/* Primary Brand Colors */
--ui-primary: #37ff00;
--ui-primary-hover: #1d8200;
--ui-primary-light: #f1fcf7;

/* Semantic Colors */
--ui-success: #20c997;
--ui-danger: #e63946;
--ui-warning: #ffe066;
--ui-info: #3b5bdb;

Typography

--ui-font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  sans-serif;
--ui-font-size-base: 16px;
--ui-font-semibold: 600;
--ui-font-bold: 700;
--ui-line-height-base: 1.5;

Spacing

--ui-space-unit: 8px;
--ui-space-1: 8px;
--ui-space-2: 16px;
--ui-space-3: 24px;
--ui-space-4: 32px;
/* ... up to space-10 */

Border & Radius

--ui-border-radius: 8px;
--ui-border-width: 1px;
--ui-border-primary: #e9ecef;

For a complete list of CSS variables, see VARIABLES.md.

📖 Usage Examples

Button Component

import { Button } from "@andrsgrza/ui-library";

<Button variant="primary" onClick={() => console.log("Clicked!")}>
  Primary Button
</Button>

<Button variant="secondary" disabled>
  Disabled Button
</Button>

Modal Component

import {
  Modal,
  ModalHeader,
  ModalBody,
  ModalFooter,
  Button,
} from "@andrsgrza/ui-library";

function MyComponent() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Modal</Button>

      <Modal open={open} onClose={() => setOpen(false)} size="medium">
        <ModalHeader>Modal Title</ModalHeader>
        <ModalBody>
          <p>Modal content goes here...</p>
        </ModalBody>
        <ModalFooter>
          <Button variant="secondary" onClick={() => setOpen(false)}>
            Cancel
          </Button>
          <Button variant="primary" onClick={() => setOpen(false)}>
            Confirm
          </Button>
        </ModalFooter>
      </Modal>
    </>
  );
}

Form Components

import {
  Input,
  NativeSelect,
  FormLayout,
  FormRow,
} from "@andrsgrza/ui-library";

function MyForm() {
  return (
    <FormLayout>
      <FormRow>
        <Input
          label="Name"
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder="Enter your name"
        />
      </FormRow>
      <FormRow>
        <NativeSelect
          label="Country"
          value={country}
          onChange={setCountry}
          options={[
            { value: "us", label: "United States" },
            { value: "mx", label: "Mexico" },
          ]}
        />
      </FormRow>
    </FormLayout>
  );
}

🔧 TypeScript Support

All components are written in TypeScript and come with full type definitions:

import { ButtonProps, ModalProps } from "@andrsgrza/ui-library";

// Use types in your components
const MyButton: React.FC<ButtonProps> = (props) => {
  return <Button {...props} />;
};

🎨 Theming

You can create custom themes by overriding CSS variables:

/* Light Theme (default) */
:root {
  --ui-bg-primary: #ffffff;
  --ui-text: #1a202c;
}

/* Dark Theme */
[data-theme="dark"] {
  --ui-bg-primary: #1a202c;
  --ui-text: #ffffff;
  --ui-border-primary: #2d3748;
}

Then toggle themes in your app:

document.documentElement.setAttribute("data-theme", "dark");

📚 Documentation

For detailed component documentation, interactive examples, and API references, visit our documentation site.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🐛 Issues

Found a bug? Have a feature request? Please file an issue on GitHub.

📦 Package Info

• Package Name: @andrsgrza/ui-library
• Version: 1.0.0
• License: MIT
• Repository: github.com/andrsgrza/ui-library

Made with ❤️ by Andres Garza