Nuraly 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
```bash
# 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/themes
```
### Or Install Individual Components
```bash
npm install @nuralyui/button
npm install @nuralyui/input
npm install @nuralyui/datepicker
```
## 🚀 Quick Start
### Vanilla JavaScript/HTML
```html
Click me
```
### React
```jsx
import { NrButton } from "@nuralyui/button/react";
import { NrInput } from "@nuralyui/input/react";
function App() {
return (
<>
alert('Clicked!')}>
Click me
console.log(e.target.value)}
/>
);
}
```
### Vue
```vue
Click me
```
## � Available Components
### 📦 Package Bundles
- **[@nuralyui/common](https://www.npmjs.com/package/@nuralyui/common)** - Mixins, Controllers, Themes, Utilities
- **[@nuralyui/forms](https://www.npmjs.com/package/@nuralyui/forms)** - Input, Textarea, Checkbox, Radio, Select, Datepicker, Timepicker, Colorpicker, File Upload, Form, Slider
- **[@nuralyui/layout](https://www.npmjs.com/package/@nuralyui/layout)** - Layout, Grid, Flex, Card
- **[@nuralyui/themes](https://www.npmjs.com/package/@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:
```css
:root {
--nr-primary-color: #4F46E5;
--nr-font-family: 'Inter', sans-serif;
--nr-border-radius: 6px;
}
```
Or use our pre-built themes:
```html
```
### Required CSS (CDN consumers)
Components rely on theme tokens shipped in `@nuraly/lumenui` at `packages/themes/dist/default.css`. Pin the same `${VERSION}` you use for the JS bundle:
```html
```
Concrete example with the current version:
```html
```
The `dist/cdn.js` loader auto-injects this `` (tagged `data-nuralyui-themes`) when no `@nuraly/lumenui` or `@nuralyui/themes` stylesheet is already present. Link your own themes CSS first to override the default (for example to pick `carbon.css`) and the auto-inject is skipped.
## 🌍 Browser Support
| Chrome | Firefox | Safari | Edge |
| --- | --- | --- | --- |
| ✅ 88+ | ✅ 78+ | ✅ 14+ | ✅ 88+ |
## � Development
### Local Setup
```bash
# Clone the repository
git clone https://github.com/Nuralyio/NuralyUI.git
cd NuralyUI
# Install dependencies
npm install
# Start development server
npm start
```
### Available Scripts
```bash
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 Prettier
```
### Project 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](https://github.com/NuralyUI/NuralyUI/issues)
- 💡 Suggest features in [Discussions](https://github.com/NuralyUI/NuralyUI/discussions)
- 🔧 Submit pull requests for bug fixes or new components
- � Improve documentation
See [CONTRIBUTING.md](./CONTRIBUTING.md) for detailed guidelines.
## 📄 License
BSD 3-Clause License - see [LICENSE](./LICENSE) file for details.
---
Built with ❤️ by the Nuraly Team
Documentation •
GitHub •
NPM