ArnisGUI

A modern React + Tailwind CSS UI component library built for developers who value simplicity, performance, and clean design. Perfect for building dark-mode applications with minimal setup.

What Makes ArnisGUI Different

• Built for Speed - Optimized bundle with tree-shaking. Only import what you need
• Dark Theme First - Beautiful components that look great out of the box
• Accessible by Default - WCAG compliant with proper keyboard navigation
• Runtime Theming - Change colors and styles on the fly without rebuilding
• Mobile Responsive - Works perfectly on all screen sizes
• TypeScript Native - Full type safety and excellent IntelliSense
• Zero Bloat - Only React and React-DOM as dependencies

Quick Start

Install

npm install arnis-gui

Basic Usage

import { Button, Card, Hero } from 'arnis-gui'
import 'arnis-gui/style.css'

function App() {
  return (
    <div>
      <Hero title="Welcome" subtitle="Get started with ArnisGUI" />
      <Card>
        <Button>Click me</Button>
      </Card>
    </div>
  )
}

Component Library

Forms

• Button - Primary, secondary, and ghost variants with multiple sizes
• Input - Text input with validation states and custom styling
• Textarea - Multi-line text input with resize options
• Checkbox - Accessible checkbox with custom styling
• Radio - Radio button groups with proper form handling
• Switch - Toggle switch component with smooth animations
• Slider - Range input with custom thumb and track styling
• Combobox - Searchable select with multi-selection support
• DatePicker - Date selection with calendar interface
• Upload - File upload with drag & drop support
• Dropdown - Custom dropdown component

Feedback & Status

• Alert - Informational, warning, and error messages
• Badge - Status indicators and labels
• Progress - Linear progress bars with indeterminate support
• ProgressCircle - Circular progress indicators
• Skeleton - Loading placeholders for content
• Loader - Spinner and loading animations
• LoadingOverlay - Fullscreen loading states
• Toast - Notification system with auto-dismiss

Navigation & Layout

• Navbar - Responsive navigation header
• Tabs - Tabbed content with smooth transitions
• Breadcrumbs - Navigation path indicators
• Pagination - Page navigation with configurable limits
• Menu - Dropdown menu system
• Drawer - Slide-in side panels

Content Display

• Card - Content containers with flexible layouts
• Avatar - User profile images with fallbacks
• Accordion - Collapsible content sections
• Table - Data tables with sorting and pagination
• Carousel - Image and content carousels

Utilities

• Separator - Visual dividers and spacing
• Tooltip - Contextual information on hover
• Popover - Floating content panels
• Modal - Overlay dialogs with focus management
• Hero - Landing page hero sections
• Footer - Page footers with organized links

Theming System

Theme Provider

Wrap your app with ThemeProvider for dynamic theming:

import { ThemeProvider } from 'arnis-gui'

function App() {
  return (
    <ThemeProvider theme={{
      accent: '#3b82f6',
      accentHover: '#2563eb',
      onAccent: '#ffffff',
      radius: '0.75rem'
    }}>
      {/* Your app content */}
    </ThemeProvider>
  )
}

CSS Variables

All colors and styles use CSS variables for easy customization:

:root {
  --arnis-background: #121212;
  --arnis-heading: #ffffff;
  --arnis-body: #b3b3b3;
  --arnis-accent: #ffffff;
  --arnis-accent-hover: #e5e5e5;
  --arnis-on-accent: #0b0b0b;
  --arnis-radius: 0.5rem;
}

Tailwind Preset

Use the included Tailwind preset for consistent styling:

// tailwind.config.js
module.exports = {
  presets: [require('arnis-gui/tailwind-preset')],
  content: ['./index.html', './src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        accent: '#3b82f6',
        accentHover: '#2563eb',
      },
      borderRadius: {
        md: '0.75rem',
      }
    }
  }
}

Package Structure

arnis-gui/
├── dist/                    # Built components
├── tailwind-preset.js      # Tailwind configuration preset
├── style.css               # Base styles and CSS variables
├── animations.css          # Optional animation utilities
└── README.md              # This file

Development

Prerequisites

• Node.js 18+
• npm or yarn

Setup

git clone https://github.com/arnis-lv/arnis-gui.git
cd arnis-gui
npm install

Available Scripts

npm run dev          # Start development server
npm run build        # Build for production
npm run preview      # Preview production build
npm run release      # Build and publish to npm
npm run size         # Check bundle size

Documentation Site

npm run docs:dev     # Start docs development server
npm run docs:build   # Build docs for production
npm run docs:preview # Preview docs build

Bundle Information

• ESM Bundle: ~3KB gzipped
• UMD Bundle: ~4KB gzipped
• Tree-shaking: Supported for individual component imports
• CSS: ~26KB (includes all component styles)

Examples

Component Composition

import { Card, Button, Input, Alert } from 'arnis-gui'

function UserForm() {
  return (
    <Card className="max-w-md mx-auto">
      <h2 className="text-xl font-semibold mb-4">User Profile</h2>
      
      <div className="space-y-4">
        <Input placeholder="Full Name" />
        <Input placeholder="Email" type="email" />
        
        <Button className="w-full">Save Profile</Button>
        
        <Alert variant="info">
          Your profile will be updated immediately.
        </Alert>
      </div>
    </Card>
  )
}

Custom Styling

import { Button } from 'arnis-gui'

function CustomButton() {
  return (
    <Button 
      className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600"
    >
      Gradient Button
    </Button>
  )
}

Contributing

We welcome contributions! Here's how to get started:

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.

Links

• Documentation: [Coming Soon]
• NPM Package: https://www.npmjs.com/package/arnis-gui
• GitHub: https://github.com/arnis-lv/arnis-gui
• Issues: https://github.com/arnis-lv/arnis-gui/issues
• Discussions: https://github.com/arnis-lv/arnis-gui/discussions

Built With

• React - UI library
• Tailwind CSS - Utility-first CSS framework
• Lucide - Beautiful icons
• Vite - Build tool

Made with ❤️ by the ArnisGUI team