Inkwell UI React

A React component library that provides PrimeReact 11 components with the Aura theme pre-applied. This package makes it easy to use beautifully styled PrimeReact components without any additional theme configuration.

Features

• ✅ PrimeReact 11 Components - All the latest PrimeReact components
• ✅ Aura Theme Pre-applied - Beautiful Aura theme automatically applied
• ✅ Zero Configuration - Just import and use, no theme setup required
• ✅ TypeScript Support - Full TypeScript definitions included

Installation

npm install inkwell-ui-react

Quick Start

Option 1: Use InkwellProvider

Wrap your app with InkwellProvider to automatically apply the Aura theme to all components:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { InkwellProvider, Button, Card } from 'inkwell-ui-react';

function App() {
  return (
    <InkwellProvider>
      <Card header="Welcome">
        <Button>Click me</Button>
      </Card>
    </InkwellProvider>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Option 2: Manual Setup (Advanced)

If you prefer to set up the theme manually:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { PrimeReactProvider } from 'primereact/core';
import Aura from '@primeuix/themes/aura';

const theme = {
  preset: Aura, // You can use different themes here
};

function App() {
  return (
    <PrimeReactProvider theme={theme}>
      {/* Your app content */}
    </PrimeReactProvider>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Available Components

All PrimeReact 11 components are available with the Aura theme pre-applied:

Form Components

• Button - Primary, secondary, success, warning, danger, info variants
• InputText - Text input with various styles
• Checkbox - Checkbox component
• RadioButton - Radio button component
• Switch - Toggle switch component
• Label - Form labels

Layout Components

• Card - Content containers with headers
• Panel - Collapsible content panels
• Fieldset - Grouped form elements
• Divider - Visual separators
• Tabs - Tabbed content
• Stepper - Step-by-step navigation
• Toolbar - Action toolbars

Data Display

• Avatar - User avatars
• Badge - Notification badges
• Tag - Status indicators
• Chip - Removable tags
• ProgressBar - Progress indicators
• ProgressSpinner - Loading spinners
• Skeleton - Loading placeholders

Utilities

• ScrollArea - Scrollable content areas
• Splitter - Resizable panels
• StyleClass - CSS class management
• ToggleButton - Toggle buttons

Usage Examples

Basic Form

import { Card, InputText, Button, Label } from 'inkwell-ui-react';

function ContactForm() {
  return (
    <Card header="Contact Form">
      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
        <div>
          <Label htmlFor="name">Name</Label>
          <InputText id="name" placeholder="Enter your name" />
        </div>
        <div>
          <Label htmlFor="email">Email</Label>
          <InputText id="email" type="email" placeholder="Enter your email" />
        </div>
        <Button severity="success">Submit</Button>
      </div>
    </Card>
  );
}

Data Display

import { Card, Badge, Tag, Avatar } from 'inkwell-ui-react';

function UserCard() {
  return (
    <Card header="User Profile">
      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
        <Avatar label="JD" size="large" />
        <div>
          <h3>John Doe</h3>
          <Tag value="Active" severity="success" />
          <Badge value="5" severity="danger" />
        </div>
      </div>
    </Card>
  );
}

Layout with Tabs

import { Card, Tabs, Button, ProgressBar } from 'inkwell-ui-react';

function Dashboard() {
  return (
    <Card header="Dashboard">
      <Tabs>
        <Tabs.Panel header="Overview">
          <ProgressBar value={75} />
          <Button>View Details</Button>
        </Tabs.Panel>
        <Tabs.Panel header="Settings">
          <p>Settings content here</p>
        </Tabs.Panel>
      </Tabs>
    </Card>
  );
}

Peer Dependencies

This package requires the following peer dependencies:

{
  "primereact": "^11.0.0",
  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
}

Included Dependencies

The following dependencies are included in this package:

• @primeuix/themes - PrimeReact 11 theme system

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT