Konui-svelte NPM

KonUI: A Svelte Component Library

⚠️ Warning: KonUI is currently in alpha and not recommended for production use. We are expecting to have a refined Beta available some time in the new year. Please expect missing features and significant changes.

Welcome to KonUI, your one-stop solution for building fast, responsive, and versatile UI components for Svelte applications. This library is designed to simplify development and empower you to focus on your application's core functionality. 🚀

⚠️ Missing Features

User Accessibility: Full accessibility support is not yet available.
Event Handling: Advanced event handling features are still in progress.
Svelte 4 Compatibility: Compatibility with Svelte 4 is not yet implemented.

📚 About the Library

KonUI provides a growing collection of reusable and customizable UI components, built specifically for Svelte. Each component is designed to:

Reduce development time.
Improve application consistency.
Enable seamless customization and integration.

Note: KonUI is currently in alpha and not recommended for production use.

⚡ Features

30+ Prebuilt Components: From forms to charts, feedback to navigation.
JSON-Driven Configuration: Generate tables, forms, and charts dynamically from a single JSON object.
Built-In Theming: Quickly switch between light and dark modes or customize themes to match your brand.
Powered by D3.js: Interactive and data-driven visualizations with minimal configuration.
Responsive Design: Every component is designed to work across devices and screen sizes.

Note: This library is still under active development, and we recommend caution when using it in production applications.

📦 Installation

Install KonUI from NPM:

npm install konui-svelte

Note: KonUI is currently in alpha. Please do not use it in production environments.

🔧 Getting Started

Import KonUI into your Svelte project:

Import the global styles into your application:

<script>
  import 'konui-svelte/styles.scss';
</script>

Use components in your Svelte files:

<script>
  import { Button, Table } from 'konui-svelte';
</script>

<Button label="Click Me!" />
<Table
  label="User Data"
  value={[{ name: 'John Doe', email: 'john@example.com' }]}
  group={[{ name: 'name', label: 'Name', variant: 'text' }, { name: 'email', label: 'Email', variant: 'email' }]}
/>

Note: Please note that this library is in alpha, and we do not recommend using it in production just yet.

🌟 Highlights

1. Form & Table Generation

Define your form or table layout with JSON, and KonUI generates it for you:

<Table
  label="User List"
  value=[
    { name: "Alice", email: "alice@example.com" },
    { name: "Bob", email: "bob@example.com" }
  ]
  group=[
    { name: "name", label: "Name", variant: "text" },
    { name: "email", label: "Email", variant: "email" }
  ]
/>

Note: This component is part of an alpha release. Avoid using it in production.

2. Charts

Effortlessly create charts with minimal configuration:

<PieChart
  data=[
    { label: "Apples", value: 40 },
    { label: "Oranges", value: 30 }
  ]
  title="Fruit Distribution"
/>

Note: Charts are still in development. We do not recommend using them in production environments at this time.

3. Customizable Buttons & Inputs

Easily customize button styles and input configurations:

<Button label="Save" variant="solid" color="success" />
<Input field={{ name: "email", label: "Email", variant: "email" }} value="user@example.com" />

Note: KonUI is in alpha and should not be used in production.

🔍 Documentation

Explore the full documentation and examples at svelte-face-processing-2.vercel.app.

Note: KonUI is under alpha development and not yet ready for production use.

Component Groups

Forms: Input, Button, Form, Table.
Charts: PieChart, BarChart, Heatmap, LineChart.
Navigation: Navbar, Sidebar, Breadcrumbs.
Feedback: Toast, Alert, Dialog.
Media: Audio, Carousel.
Content Display: Accordion, Modal, Card.

Each component comes with a clear API, examples, and customization options.

🛠️ Development Status

Alpha Version: KonUI is under active development and not recommended for production use yet. The first stable release is planned for early 2025. Stay tuned for updates!