NuralyioNuraly UI
A comprehensive collection of enterprise-class web components built with Lit and TypeScript.
Documentation & Demo • GitHub • NPM
✨ Features
- 🌈 Enterprise-grade Components - Professional UI components for modern web applications
- 📦 40+ Components - Complete library of ready-to-use web components
- 🛡 TypeScript First - Full type safety and excellent developer experience
- ⚙️ Framework Agnostic - Works with React, Vue, Angular, or vanilla JavaScript
- 🎨 Themeable - Easy customization with CSS custom properties
- 📱 Responsive - Mobile-first design that works everywhere
- ♿ Accessible - ARIA-compliant and keyboard navigable
- 🚀 Lightweight - Minimal bundle size, maximum performance
📦 Installation
Install Package Bundles
# Shared utilities (mixins, controllers, themes, utils)
npm install @nuralyui/common
# Form components (input, select, checkbox, radio, etc.)
npm install @nuralyui/forms
# Layout components (grid, flex, card, layout)
npm install @nuralyui/layout
# Theme CSS bundles
npm install @nuralyui/themesOr Install Individual Components
npm install @nuralyui/button
npm install @nuralyui/input
npm install @nuralyui/datepicker🚀 Quick Start
Vanilla JavaScript/HTML
<script type="module">
import '@nuralyui/button';
import '@nuralyui/input';
</script>
<nr-button variant="primary">Click me</nr-button>
<nr-input placeholder="Enter text" label="Name"></nr-input>React
import { NrButton } from "@nuralyui/button/react";
import { NrInput } from "@nuralyui/input/react";
function App() {
return (
<>
<NrButton variant="primary" onClick={() => alert('Clicked!')}>
Click me
</NrButton>
<NrInput
placeholder="Enter text"
label="Name"
onInput={(e) => console.log(e.target.value)}
/>
</>
);
}Vue
<template>
<nr-button variant="primary" @click="handleClick">Click me</nr-button>
<nr-input placeholder="Enter text" label="Name" @input="handleInput" />
</template>
<script>
import '@nuralyui/button';
import '@nuralyui/input';
export default {
methods: {
handleClick() { alert('Clicked!'); },
handleInput(e) { console.log(e.target.value); }
}
}
</script>� Available Components
📦 Package Bundles
- @nuralyui/common - Mixins, Controllers, Themes, Utilities
- @nuralyui/forms - Input, Textarea, Checkbox, Radio, Select, Datepicker, Timepicker, Colorpicker, File Upload, Form, Slider
- @nuralyui/layout - Layout, Grid, Flex, Card
- @nuralyui/themes - Carbon & Default theme CSS
🧩 All Components
Form & Input
- Button, Input, Textarea, Checkbox, Radio, Radio Group, Select, Slider Input, File Upload, Form, Datepicker, Timepicker, Colorpicker
Layout & Structure
- Layout, Grid, Flex, Card, Divider
Navigation
- Tabs, Menu, Dropdown, Breadcrumb
Feedback
- Modal, Toast, Tooltips, Popconfirm, Alert
Display
- Table, Collapse, Carousel, Timeline, Badge, Label, Icon, Image, Video, Canvas, Skeleton
Advanced
- Chatbot, Document, Console
🎨 Theming
Customize components with CSS custom properties:
:root {
--nr-primary-color: #4F46E5;
--nr-font-family: 'Inter', sans-serif;
--nr-border-radius: 6px;
}Or use our pre-built themes:
<link rel="stylesheet" href="node_modules/@nuralyui/themes/carbon.css">🌍 Browser Support
| Chrome | Firefox | Safari | Edge |
|---|---|---|---|
| ✅ 88+ | ✅ 78+ | ✅ 14+ | ✅ 88+ |
� Development
Local Setup
# Clone the repository
git clone https://github.com/Nuralyio/NuralyUI.git
cd NuralyUI
# Install dependencies
npm install
# Start development server
npm startAvailable Scripts
npm start # Start dev server with watch mode
npm run build # Build all components
npm run test # Run tests
npm run lint # Lint code
npm run format # Format with PrettierProject Structure
hybrid-ui/
├── src/
│ └── components/ # All web components
├── packages/ # Package bundles
│ ├── common/
│ ├── forms/
│ ├── layout/
│ └── themes/
└── dist/ # Built components🤝 Contributing
We welcome contributions! Here's how to help:
- 🐛 Report bugs via GitHub Issues
- 💡 Suggest features in Discussions
- 🔧 Submit pull requests for bug fixes or new components
- � Improve documentation
See CONTRIBUTING.md for detailed guidelines.
📄 License
BSD 3-Clause License - see LICENSE file for details.
Built with ❤️ by the Nuraly Team
Documentation • GitHub • NPM