Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/demiinfinity/elementrix-ui
Elementrix-UI is an open-source, modular UI component library designed to simplify and enhance user interface development with reusable, framework-agnostic components.
https://github.com/demiinfinity/elementrix-ui
component-library design-system frontend frontend-library modular open-source responsive scss stenciljs storybook typescript ui-components web-components
Last synced: 3 days ago
JSON representation
Elementrix-UI is an open-source, modular UI component library designed to simplify and enhance user interface development with reusable, framework-agnostic components.
- Host: GitHub
- URL: https://github.com/demiinfinity/elementrix-ui
- Owner: DemiInfinity
- License: mit
- Created: 2024-10-21T23:48:06.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2025-01-17T11:56:50.000Z (3 days ago)
- Last Synced: 2025-01-17T12:28:14.373Z (3 days ago)
- Topics: component-library, design-system, frontend, frontend-library, modular, open-source, responsive, scss, stenciljs, storybook, typescript, ui-components, web-components
- Language: TypeScript
- Homepage:
- Size: 923 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# 🚀 **Elementrix-UI: Framework-Agnostic UI Component Library**
**Elementrix-UI** is a modern, open-source web components library built with [Stencil.js](https://stenciljs.com/). Designed to be reusable, lightweight, and customizable, it provides the foundation for building visually appealing and responsive user interfaces.
⚠️ **Note**: Elementrix-UI is in its early stages of development. The library is currently focused on building its core features and foundational components. Expect updates and improvements as it evolves.
---
## 🌟 **Features**
### **Up Coming Features**
- **Reusable Components**: A limited set of core components, including buttons and modals, for basic UI needs.
- **Customizable Styles**: Easily adapt component appearance with CSS Variables to fit your design system.
- **Framework-Agnostic**: Use components with React, Vue, Angular, or vanilla JavaScript.
- **Storybook Integration**: Explore components via live previews and interactive documentation.
### **Planned Features**
- **Advanced Components**: Grids, charts, and forms for enterprise-grade applications.
- **Dark Mode and Theming**: Support for both light and dark themes out of the box.
- **Accessibility (a11y)**: WCAG-compliant components to ensure inclusivity.
- **Localization (i18n)**: Built-in multi-language support.
---
## 📦 **Installation**
Install the library using npm:
```bash
yarn add @elementrix-ui/component-library
```
---
## 🚀 **Getting Started**
Follow these steps to integrate **Elementrix-UI** into your project:
1. Import and Configure
- Initialize the library in your project:
```javascript
import { defineCustomElements } from '@elementrix-ui/component-library/loader';
// Initialize Elementrix-UI components
defineCustomElements(window);
```
2. Use Components
- Add components to your HTML:
```html
```
---
## 📚 **Documentation**
Detailed usage instructions and live demos are coming soon via Storybook:
- Elementrix-UI Storybook (Coming Soon)
---
## 🎯 **Roadmap**
Elementrix-UI is in the process of developing its foundational components and features. Here's what's in progress and what's planned:
### In Progress
- Core components: Button, Modal, Input, and Card.
- Storybook setup for interactive documentation and demos.
### Planned Features
- Advanced components for complex UI needs, including data grids and charts.
- Theming and design tokens for consistent styling across applications.
- Accessibility and localization for inclusive and global usage.
---
## 🤝 Contributing
As Elementrix-UI is still in its early stages, contributions are highly encouraged! Whether you want to help build core components, improve documentation, or provide feedback, we’d love to have you on board.
### How to Contribute
1. Fork the repository:
```bash
git clone https://github.com/DemiInfinity/elementrix-ui.git
```
2. Install dependencies:
```bash
yarn
```
3. Start the development server:
```bash
yarn start
```
4. Run Storybook:
```bash
yarn storybook
```
5. Make your changes: Add components, fix bugs, or enhance documentation.
6. Submit a pull request: Open a PR on GitHub to contribute your work.
---
## 🛠️ Technologies Used
- Component Framework: Stencil.js
- Documentation: Storybook
- Language: TypeScript
- Styling: SCSS Variables for customization
- Testing: Stencils in built testing for unit tests and E2E coming soon
- Build Tool: Rollup for efficient bundling
---
## 📝 License
This project is licensed under the [MIT License](./LICENSE.md). See the LICENSE file for full details.
---
## 🌍 Join the Community
Elementrix-UI is in its infancy, and we’re building it into a comprehensive, developer-first library for modern applications. Join us to shape its future!
- GitHub Discussions: Join the Conversation (Comming soon)