UI Component Library

A modern, accessible UI component library built with React, TypeScript, and Styled Components.

Features

• 🎨 Themeable with light/dark mode support
• ♿ Accessible components with proper ARIA attributes
• 📱 Responsive and mobile-friendly
• 🔧 Easily customizable through theme configuration
• 🧩 Modular and reusable components

Installation

npm install penta-ui

Quick Start

import React from 'react';
import { ThemeProvider, Button, Input, Container } from 'penta-ui';

function App() {
  return (
    <ThemeProvider>
      <Container>
        <h1>Hello, UI Library!</h1>
        <Input label="Username" placeholder="Enter your username" />
        <Button variant="primary">Click me</Button>
      </Container>
    </ThemeProvider>
  );
}

export default App;

Components

• Button: A styled button component.
• Input: A styled input field component.
• Tabs: A styled tabs component.
• Checkbox: A styled checkbox component.
• ThemeProvider: A context provider for managing theme.

Theming

The library comes with a default theme, but you can customize it to match your brand:

import { ThemeProvider, defaultTheme } from 'penta-ui';

const customTheme = {
  ...defaultTheme,
  colors: {
    ...defaultTheme.colors,
    primary: '#ff6b6b',
    secondary: '#546de5'
  }
};

function App() {
  return (
    <ThemeProvider initialTheme="light" customTheme={customTheme}>
      {/* Your app content */}
    </ThemeProvider>
  );
}

Contributing

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

License

MIT