@damarkuncoro/agnostic-ui

A comprehensive UI component system with framework-agnostic architecture and modular skin system.

Features

• Framework Agnostic: Core UI logic separated from framework-specific implementations (React/Vue)
• Modular Skin System: Visual styles can be swapped without changing UI logic
• Consistent API Contracts: Uniform variants, sizes, events, and props across all skins
• Stable Export Paths: Reliable integration paths for application usage
• TypeScript First: Full type safety and excellent IDE support

Installation

npm install @damarkuncoro/agnostic-ui
# or
yarn add @damarkuncoro/agnostic-ui
# or
pnpm add @damarkuncoro/agnostic-ui

Quick Start

React

import { UIProvider } from '@damarkuncoro/agnostic-ui/react'
import { tailwind_modern as skin } from '@damarkuncoro/agnostic-ui/skin'

export default function App() {
  return (
    <UIProvider skin={skin}>
      {/* Your components using the skin system */}
    </UIProvider>
  )
}

Vue

<script setup lang="ts">
import { UIProvider } from '@damarkuncoro/agnostic-ui/vue'
import { tailwind_modern as skin } from '@damarkuncoro/agnostic-ui/skin'
</script>

<template>
  <UIProvider :skin="skin">
    <!-- Your components using the skin system -->
  </UIProvider>
</template>

Exports & Imports

React Components

import { UIProvider } from '@damarkuncoro/agnostic-ui/react'

Vue Components

import { UIProvider } from '@damarkuncoro/agnostic-ui/vue'

Skin System

import { tailwind, tailwind_modern, shadcn, retro } from '@damarkuncoro/agnostic-ui/skin'

Themes

import * as themes from '@damarkuncoro/agnostic-ui/themes'

Type Contracts

import * as contracts from '@damarkuncoro/agnostic-ui/contracts'

CSS Skins

You can import pre-compiled CSS skins through the aggregator paths:

• @damarkuncoro/agnostic-ui/skin/tailwind.css
• @damarkuncoro/agnostic-ui/skin/tailwind-modern.css
• @damarkuncoro/agnostic-ui/skin/retro.css

Or integrate CSS skins into your application's build pipeline.

Available Skins

• tailwind: Classic Tailwind CSS styling
• tailwind_modern: Modern Tailwind CSS with latest features
• shadcn: shadcn/ui inspired styling
• retro: Retro/vintage aesthetic

Architecture

This package serves as the main aggregator for the Agnostic UI ecosystem, providing a single entry point to all sub-packages:

@damarkuncoro/agnostic-ui
├── react/          # React adapter (components, provider)
├── vue/            # Vue adapter (provider)
├── skin/           # Skin aggregator with CSS wrappers
├── themes/         # Design themes and tokens
└── contracts/      # UI contracts (types, props, events)

Development

Building from Source

npm run build

This generates artifacts in packages/agnostic-ui/dist/src/* and ensures all export paths are available.

Prerequisites

• Node.js >= 16
• npm, yarn, or pnpm
• React >= 16.8.0 (for React components)
• Vue >= 3.0.0 (for Vue components)

Design Principles

• SRP, DRY, KISS, YAGNI: Single Responsibility, Don't Repeat Yourself, Keep It Simple, You Aren't Gonna Need It
• SOLID: Object-oriented design principles
• Composition over Inheritance: Flexible component composition
• Architecture: UI Contract → Base UI → Skin → Modules → Pages

Contributing

Contributions are welcome! Please read our contributing guidelines and feel free to submit pull requests.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

• Documentation
• Issues
• Discussions