Glintly UI Library

A modern, accessible, and customizable React UI component library built with TypeScript and styled-components. Glintly UI provides a comprehensive set of components designed for building beautiful, responsive web applications with a consistent design system.

✨ Features

• 🎨 Modern Design System: Built with a comprehensive theme system supporting light/dark modes
• 🔧 TypeScript First: Full TypeScript support with excellent type definitions
• 🎭 Styled Components: Built with styled-components for flexible styling
• 📱 Responsive: Mobile-first design approach with responsive breakpoints
• ♿ Accessible: WCAG compliant components with proper ARIA attributes
• 🎯 Customizable: Extensive theming and customization options
• 📦 Tree Shakeable: Optimized bundle size with tree shaking support
• 🚀 Performance: Optimized components with minimal re-renders

🚀 Installation

npm install glintly-ui
# or
yarn add glintly-ui
# or
pnpm add glintly-ui

📦 Peer Dependencies

{
  "react": ">=18.0.0",
  "react-dom": ">=18.0.0"
}

🎯 Quick Start

import React from 'react';
import { ThemeProvider, Button, Input, Card } from 'glintly-ui';

function App() {
  return (
    <ThemeProvider>
      <div>
        <Card>
          <h2>Welcome to Glintly UI</h2>
          <Input placeholder="Enter your name" />
          <Button variant="primary">Get Started</Button>
        </Card>
      </div>
    </ThemeProvider>
  );
}

🎨 Theme System

Glintly UI comes with a powerful theme system that allows you to customize colors, typography, spacing, and more.

import { ThemeProvider, useTheme } from 'glintly-ui';

const customTheme = {
  colors: {
    primary: {
      500: '#6366f1',
      600: '#4f46e5',
    },
    // ... more custom colors
  },
  typography: {
    fontFamily: '"Inter", sans-serif',
  },
};

function App() {
  return (
    <ThemeProvider theme={customTheme}>
      <YourApp />
    </ThemeProvider>
  );
}

function ThemedComponent() {
  const { theme, mode, toggleMode } = useTheme();
  
  return (
    <div>
      <button onClick={toggleMode}>
        Current mode: {mode}
      </button>
    </div>
  );
}

🧩 Components

🎯 Core Components

Button

Versatile button component with multiple variants, sizes, and states.

import { Button } from 'glintly-ui';

<Button variant="primary" size="lg" shade="500">
  Click Me
</Button>

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

Variants: primary, secondary, gray, transparent
Sizes: xs, sm, md, lg, xl
Shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900

Input

Comprehensive input components with validation and styling.

import { Input } from 'glintly-ui';

<Input.TextInput 
  placeholder="Enter text" 
  size="md" 
  hasError={false}
/>

<Input.PasswordInput 
  placeholder="Enter password" 
  showToggle={true}
/>

<Input.SelectInput 
  options={[
    { value: '1', label: 'Option 1' },
    { value: '2', label: 'Option 2' }
  ]}
/>

Types: TextInput, PasswordInput, SelectInput, CheckboxInput, RadioInput, DateInput, TimeInput, PhoneInput, FileInput
Sizes: xs, sm, md, lg

Card

Flexible card component for content organization.

import { Card } from 'glintly-ui';

<Card>
  <h3>Card Title</h3>
  <p>Card content goes here</p>
</Card>

📊 Data Display

DataTable

Advanced data table with sorting, pagination, and selection.

import { DataTable } from 'glintly-ui';

const columns = [
  { key: 'name', label: 'Name', sortable: true },
  { key: 'email', label: 'Email' },
  { key: 'role', label: 'Role' }
];

const data = [
  { id: 1, name: 'John Doe', email: '[email protected]', role: 'Admin' }
];

<DataTable
  data={data}
  columns={columns}
  pagination={{
    currentPage: 1,
    totalPages: 10,
    onPageChange: (page) => console.log(page)
  }}
  checkboxSelection={true}
/>

Table

Simple table component for basic data display.

import { Table, TableHead, TableBody, TableRow, TableCell } from 'glintly-ui';

<Table>
  <TableHead>
    <TableRow>
      <TableCell>Name</TableCell>
      <TableCell>Email</TableCell>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableCell>John Doe</TableCell>
      <TableCell>[email protected]</TableCell>
    </TableRow>
  </TableBody>
</Table>

🎨 Layout & Navigation

Grid

Flexbox-based grid system for responsive layouts.

import { Row, Col } from 'glintly-ui';

<Row>
  <Col xs={12} md={6} lg={4}>
    <div>Column 1</div>
  </Col>
  <Col xs={12} md={6} lg={4}>
    <div>Column 2</div>
  </Col>
  <Col xs={12} md={12} lg={4}>
    <div>Column 3</div>
  </Col>
</Row>

Navbar

Responsive navigation component.

import { Navbar } from 'glintly-ui';

<Navbar>
  <Navbar.Brand>Glintly UI</Navbar.Brand>
  <Navbar.Nav>
    <Navbar.NavItem>Home</Navbar.NavItem>
    <Navbar.NavItem>About</Navbar.NavItem>
  </Navbar.Nav>
</Navbar>

Container

Responsive container for content centering.

import { Container } from 'glintly-ui';

<Container>
  <h1>Centered Content</h1>
  <p>This content is centered within the viewport</p>
</Container>

🔄 Interactive Components

Tabs

Tabbed interface component.

import { Tabs } from 'glintly-ui';

<Tabs>
  <Tabs.Tab label="Tab 1">Content for tab 1</Tabs.Tab>
  <Tabs.Tab label="Tab 2">Content for tab 2</Tabs.Tab>
  <Tabs.Tab label="Tab 3">Content for tab 3</Tabs.Tab>
</Tabs>

Accordion

Collapsible content sections.

import { Accordion } from 'glintly-ui';

<Accordion>
  <Accordion.Item>
    <Accordion.Header>Section 1</Accordion.Header>
    <Accordion.Body>Content for section 1</Accordion.Body>
  </Accordion.Item>
  <Accordion.Item>
    <Accordion.Header>Section 2</Accordion.Header>
    <Accordion.Body>Content for section 2</Accordion.Body>
  </Accordion.Item>
</Accordion>

Stepper

Step-by-step process indicator.

import { Stepper, Step, StepLabel, StepContent } from 'glintly-ui';

<Stepper activeStep={1}>
  <Step>
    <StepLabel>Step 1</StepLabel>
    <StepContent>Complete step 1</StepContent>
  </Step>
  <Step>
    <StepLabel>Step 2</StepLabel>
    <StepContent>Complete step 2</StepContent>
  </Step>
</Stepper>

Modal

Overlay dialog component.

import { Modal } from 'glintly-ui';

<Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
  <Modal.Header>Modal Title</Modal.Header>
  <Modal.Body>Modal content goes here</Modal.Body>
  <Modal.Footer>
    <Button onClick={() => setIsOpen(false)}>Close</Button>
  </Modal.Footer>
</Modal>

🎭 Feedback & Status

Spinner

Loading indicators with multiple variants.

import { Spinner } from 'glintly-ui';

<Spinner size="md" color="#3b82f6" />
<Spinner.BouncingBallLoader />
<Spinner.CubeLoader />
<Spinner.PyramidLoader />
<Spinner.ThreeDBoxLoader />

Toast

Notification system for user feedback.

import { toast, ToastContainer } from 'glintly-ui';

// Show a toast
toast.success('Operation completed successfully!');
toast.error('Something went wrong!');
toast.info('Here is some information');
toast.warning('Please be careful');

// Include ToastContainer in your app
<ToastContainer />

Badge

Status indicators and labels.

import { Badge, BadgeGroup } from 'glintly-ui';

<Badge variant="success">Active</Badge>
<Badge variant="error">Error</Badge>
<Badge variant="warning">Warning</Badge>

<BadgeGroup>
  <Badge>Tag 1</Badge>
  <Badge>Tag 2</Badge>
</BadgeGroup>

🎨 Media & Content

Avatar

User profile images with fallbacks.

import { Avatar } from 'glintly-ui';

<Avatar src="/user.jpg" alt="User" size="lg" />
<Avatar name="John Doe" size="md" />
<Avatar icon="user" size="sm" />

Carousel

Image and content carousel.

import { Carousel, CarouselItem, CarouselCaption } from 'glintly-ui';

<Carousel>
  <CarouselItem>
    <img src="/image1.jpg" alt="Image 1" />
    <CarouselCaption>
      <h3>First Slide</h3>
      <p>Description for first slide</p>
    </CarouselCaption>
  </CarouselItem>
  <CarouselItem>
    <img src="/image2.jpg" alt="Image 2" />
    <CarouselCaption>
      <h3>Second Slide</h3>
      <p>Description for second slide</p>
    </CarouselCaption>
  </CarouselItem>
</Carousel>

CodeViewer

Syntax-highlighted code display.

import { CodeViewer } from 'glintly-ui';

<CodeViewer
  code={`function hello() {
  console.log("Hello, World!");
}`}
  language="javascript"
  theme="dark"
/>

🛠️ Utility Components

Tooltip

Contextual information on hover.

import { Tooltip } from 'glintly-ui';

<Tooltip content="This is a helpful tooltip">
  <Button>Hover me</Button>
</Tooltip>

Offcanvas

Side panel component.

import { Offcanvas } from 'glintly-ui';

<Offcanvas show={isOpen} onHide={() => setIsOpen(false)}>
  <Offcanvas.Header>Side Panel</Offcanvas.Header>
  <Offcanvas.Body>Side panel content</Offcanvas.Body>
</Offcanvas>

Pagination

Page navigation component.

import { Pagination } from 'glintly-ui';

<Pagination
  currentPage={1}
  totalPages={10}
  onPageChange={(page) => console.log(page)}
  showFirstLast={true}
  showPrevNext={true}
/>

🔍 Toolbars

SearchBar

Search functionality component.

import { SearchBar } from 'glintly-ui';

<SearchBar
  placeholder="Search..."
  onSearch={(query) => console.log(query)}
  debounceMs={300}
/>

FilterBar

Data filtering interface.

import { FilterBar } from 'glintly-ui';

<FilterBar
  filters={[
    { key: 'status', label: 'Status', options: ['Active', 'Inactive'] },
    { key: 'role', label: 'Role', options: ['Admin', 'User'] }
  ]}
  onFilterChange={(filters) => console.log(filters)}
/>

SortBar

Data sorting interface.

import { SortBar } from 'glintly-ui';

<SortBar
  sortOptions={[
    { key: 'name', label: 'Name' },
    { key: 'email', label: 'Email' },
    { key: 'createdAt', label: 'Created Date' }
  ]}
  onSortChange={(sort) => console.log(sort)}
/>

🎨 Theming

Glintly UI provides a comprehensive theming system with:

• Color Palettes: Primary, secondary, gray, success, warning, error scales
• Typography: Font families, sizes, weights, and line heights
• Spacing: Consistent spacing scale
• Border Radius: Configurable border radius values
• Shadows: Light and dark mode shadow systems
• Breakpoints: Responsive design breakpoints

Custom Theme Example

import { ThemeProvider } from 'glintly-ui';

const customTheme = {
  colors: {
    primary: {
      50: '#eff6ff',
      100: '#dbeafe',
      500: '#3b82f6',
      600: '#2563eb',
      900: '#1e3a8a',
    },
    secondary: {
      500: '#8b5cf6',
      600: '#7c3aed',
    },
    gray: {
      50: '#f9fafb',
      100: '#f3f4f6',
      500: '#6b7280',
      900: '#111827',
    },
  },
  typography: {
    fontFamily: '"Inter", "Segoe UI", sans-serif',
    fontSize: {
      xs: '0.75rem',
      sm: '0.875rem',
      md: '1rem',
      lg: '1.125rem',
      xl: '1.25rem',
    },
  },
  spacing: {
    xs: '0.25rem',
    sm: '0.5rem',
    md: '1rem',
    lg: '1.5rem',
    xl: '2rem',
  },
  borderRadius: {
    sm: '0.25rem',
    md: '0.375rem',
    lg: '0.5rem',
    xl: '0.75rem',
  },
};

<ThemeProvider theme={customTheme}>
  <YourApp />
</ThemeProvider>

🚀 Getting Started

1. Install the package

npm install glintly-ui

2. Wrap your app with ThemeProvider

import React from 'react';
import { ThemeProvider } from 'glintly-ui';

function App() {
  return (
    <ThemeProvider>
      <YourApp />
    </ThemeProvider>
  );
}

3. Import and use components

import { Button, Input, Card } from 'glintly-ui';

function MyComponent() {
  return (
    <Card>
      <Input placeholder="Enter your name" />
      <Button variant="primary">Submit</Button>
    </Card>
  );
}

📱 Responsive Design

All components are built with mobile-first responsive design:

• xs: Extra small devices (portrait phones)
• sm: Small devices (landscape phones)
• md: Medium devices (tablets)
• lg: Large devices (desktops)
• xl: Extra large devices (large desktops)

♿ Accessibility

Glintly UI components are built with accessibility in mind:

• Proper ARIA attributes
• Keyboard navigation support
• Screen reader compatibility
• High contrast support
• Focus management

🔧 Development

Prerequisites

• Node.js >= 18.0.0
• npm, yarn, or pnpm

Setup

git clone https://github.com/abhimanyuyadav0/glintly-ui-lib.git
cd glintly-ui-lib
npm install

Available Scripts

npm run dev          # Start development server
npm run build        # Build the library
npm run lint         # Run ESLint
npm run preview      # Preview the build
npm run clean        # Clean build directory

Building

npm run build

The build output will be in the dist/ directory.

📦 Bundle Information

• Main: ./dist/glintly-ui.umd.cjs (CommonJS)
• Module: ./dist/glintly-ui.js (ES Module)
• Types: ./dist/glintly-ui.d.ts (TypeScript definitions)
• Browser: ./dist/glintly-ui.umd.cjs (UMD)

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Guidelines

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

📄 License

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

🙏 Acknowledgments

• React - The JavaScript library for building user interfaces
• styled-components - Visual primitives for the component age
• TypeScript - Typed JavaScript at any scale

📞 Support

• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Documentation: GitHub Wiki

🌟 Star History

If you find this library helpful, please consider giving it a star on GitHub!

Made with ❤️ by Abhimanyu Yadav