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:

1. Import the global styles into your application:

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

2. 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: '[email protected]' }]}
     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: "[email protected]" },
    { name: "Bob", email: "[email protected]" }
  ]
  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="[email protected]" />

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!

Note: This library is in alpha. Please avoid using it in any production environment.

🤝 Contribution

We welcome contributions from the community. Feel free to:

• Submit issues.
• Suggest new components or features.
• Open pull requests.

Repository

GitHub Repo

Note: KonUI is in alpha, and contributions are welcome to help us make it production-ready.

📄 License

KonUI is licensed under the MIT License.

🚀 Get Started Today!

Start building faster and smarter with KonUI. Visit svelte-face-processing-2.vercel.app for a live showcase of all components!

Note: KonUI is in alpha. We do not recommend using it in production just yet.