A React component library that provides a curated set of PrimeReact components with Inkwell design system integration. Includes quill for Editor component and chart.js for Chart component.
npm install inkwell-ui-reactA 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.
- ✅ 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
``bash`
npm install inkwell-ui-react
Wrap your app with InkwellProvider to automatically apply the Aura theme to all components:
`tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { InkwellProvider, Button, Card } from 'inkwell-ui-react';
function App() {
return (
);
}
ReactDOM.createRoot(document.getElementById('root')).render(
);
`
If you prefer to set up the theme manually:
`tsx
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 (
{/ Your app content /}
);
}
ReactDOM.createRoot(document.getElementById('root')).render(
);
`
All PrimeReact 11 components are available with the Aura theme pre-applied:
- Button - Primary, secondary, success, warning, danger, info variantsInputText
- - Text input with various stylesCheckbox
- - Checkbox componentRadioButton
- - Radio button componentSwitch
- - Toggle switch componentLabel
- - Form labels
- Card - Content containers with headersPanel
- - Collapsible content panelsFieldset
- - Grouped form elementsDivider
- - Visual separatorsTabs
- - Tabbed contentStepper
- - Step-by-step navigationToolbar
- - Action toolbars
- Avatar - User avatarsBadge
- - Notification badgesTag
- - Status indicatorsChip
- - Removable tagsProgressBar
- - Progress indicatorsProgressSpinner
- - Loading spinnersSkeleton
- - Loading placeholders
- ScrollArea - Scrollable content areasSplitter
- - Resizable panelsStyleClass
- - CSS class managementToggleButton
- - Toggle buttons
`tsx
import { Card, InputText, Button, Label } from 'inkwell-ui-react';
function ContactForm() {
return (
);
}
`
`tsx
import { Card, Badge, Tag, Avatar } from 'inkwell-ui-react';
function UserCard() {
return (
John Doe
);
}
`
`tsx
import { Card, Tabs, Button, ProgressBar } from 'inkwell-ui-react';
function Dashboard() { Settings content here
return (
);
}
`
This package requires the following peer dependencies:
`json`
{
"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"
}
The following dependencies are included in this package:
- @primeuix/themes` - PrimeReact 11 theme system
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
MIT