A comprehensive collection of enterprise-class web components built with Lit and TypeScript.

GitHub Issues

See CONTRIBUTING.md for detailed guidelines.i/common">

Documentation & Demo • GitHub • NPM

• 🌈 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

# 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

npm install @nuralyui/button
npm install @nuralyui/input
npm install @nuralyui/datepicker

<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>

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)}
      />
    </>
  );
}

<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>

• @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

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

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">

# Clone the repository
git clone https://github.com/Nuralyio/NuralyUI.git
cd NuralyUI

# Install dependencies
npm install

# Start development server
npm start

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

hybrid-ui/
├── src/
│   └── components/     # All web components
├── packages/           # Package bundles
│   ├── common/
│   ├── forms/
│   ├── layout/
│   └── themes/
└── dist/              # Built components

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.

BSD 3-Clause License - see LICENSE file for details.

Built with ❤️ by the Nuraly Team

Documentation • GitHub • NPM