arnis-ux

v0.1.21

Published

9 months ago

A lightweight, multi-framework UI component library with React, Vue, and vanilla JavaScript support

0High
0Medium
0Low

arnis-lv

react vue svelte tailwind ui components library dark vite multi-framework typescript accessible lightweight

ArnisUX

A lightweight, multi-framework UI component library built with Tailwind CSS. Use the same components across React, Vue, and vanilla JavaScript with consistent styling and behavior.

What Makes This Different

Multi-Framework Support: Works with React, Vue 3, and vanilla JavaScript
Consistent Design: Components look and work the same across all frameworks
Lightweight: Small bundle size with tree-shaking support
Accessible: Built with accessibility best practices
Themeable: Change colors and styles without rebuilding
Responsive: Works well on all screen sizes
TypeScript: Full type safety and better development experience

Getting Started

Install the Package

npm install arnis-ux

Basic Usage

React

import { Button, Modal, Alert } from 'arnis-ux'
import 'arnis-ux/style.css'

function App() {
  return (
    <div>
      <Button variant="primary">Click me</Button>
      <Alert variant="success">Success message!</Alert>
    </div>
  )
}

Vue 3

<template>
  <div>
    <Button variant="primary">Click me</Button>
    <Alert variant="success">Success message!</Alert>
  </div>
</template>

<script setup>
import { Button, Alert } from 'arnis-ux/vue'
import 'arnis-ux/style.css'
</script>

Vanilla JavaScript

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="node_modules/arnis-ux/style.css">
</head>
<body>
  <button data-arnis-button data-variant="primary">Click me</button>
  <div data-arnis-alert data-variant="success">Success message!</div>
  
  <script type="module">
    import 'arnis-ux/vanilla'
  </script>
</body>
</html>

Changing Themes

Use Built-in Themes

import { ThemeProvider, themes } from 'arnis-ux'

function App() {
  return (
    <ThemeProvider theme={themes.blue}>
      <YourApp />
    </ThemeProvider>
  )
}

Create Your Own Theme

const customTheme = {
  '--arnis-primary': '#ff6b6b',
  '--arnis-background': '#2d3436',
  '--arnis-heading': '#ffffff',
  '--arnis-body': '#b2bec3'
}

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

Available Components

Form Components

Button - Different styles, sizes, and states
Input - Text, email, password inputs with validation
Checkbox - Accessible checkbox with labels
Toggle - Switch component with loading states
Radio - Radio button groups
Select - Dropdown selection
Textarea - Multi-line text input

Layout Components

Card - Content containers with shadows
Modal - Overlay dialogs with focus management
Drawer - Slide-out side panels
Tabs - Tabbed content organization
Accordion - Collapsible content sections

Feedback Components

Alert - Status messages with different types
Toast - Notification system
Progress - Progress bars and spinners
Skeleton - Loading placeholders
Tooltip - Hover information
Popover - Rich popup content

Data Display

Table - Data tables with sorting
Avatar - User profile images
Badge - Status indicators
Tag - Categorization labels
Stats - Metric displays
Chart - Data visualization

Advanced Usage

Import from Specific Frameworks

// React (default)
import { Button } from 'arnis-ux'

// Vue
import { Button } from 'arnis-ux/vue'

// Vanilla JS
import { createButton } from 'arnis-ux/vanilla'

// Core logic only
import { ButtonCore } from 'arnis-ux/core'

Custom Styling

import { Button } from 'arnis-ux'

// Override with your own classes
<Button className="bg-red-500 hover:bg-red-600">
  Custom Button
</Button>

Create Components Programmatically

import { createModal } from 'arnis-ux/vanilla'

const modal = createModal({
  title: 'Custom Modal',
  content: 'This is a programmatically created modal',
  size: 'lg'
})

modal.open()

Responsive Design

All components work well on mobile and desktop:

// Responsive grid that adapts to screen size
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <Card>Content 1</Card>
  <Card>Content 2</Card>
  <Card>Content 3</Card>
</div>

Accessibility Features

Screen Reader Support: Proper labels and descriptions
Keyboard Navigation: Full keyboard support
Focus Management: Smart focus handling
Color Contrast: Meets accessibility standards
ARIA Support: Proper accessibility attributes

Performance Tips

Only Import What You Need

// Good - only imports Button code
import { Button } from 'arnis-ux'

// Bad - imports everything
import * as Arnis from 'arnis-ux'

Check Bundle Size

npm run size

Analyze Your Bundle

npm run analyze

Development

Set Up Locally

git clone https://github.com/arnis-lv/arnis-ux.git
cd arnis-ux
npm install
npm run dev

Build Commands

npm run build        # Build the library
npm run docs:build   # Build documentation
npm run size         # Check bundle size

API Reference

Button Component

interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'
  size?: 'sm' | 'md' | 'lg' | 'xl'
  disabled?: boolean
  loading?: boolean
  children: React.ReactNode
  onClick?: () => void
}

Modal Component

interface ModalProps {
  open: boolean
  onClose: () => void
  title?: string
  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
  children: React.ReactNode
}

Contributing

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

Development Setup

npm install
npm run dev
npm run test
npm run build

License

MIT License - see LICENSE file for details.

Support

Documentation: docs.arnis-ux.com
Issues: GitHub Issues
Discussions: GitHub Discussions

Version Updates

From v0.1.x to v0.2.x

Import paths stay the same
Better TypeScript types
Improved accessibility
Better tree-shaking support

Made with care by the ArnisUX team