Guidelines

Welcome

An introduction to the AgKit.io-UI Component Gallery, highlighting key features and design principles.

Features

  • Overview of the component gallery
  • Key features and benefits
  • Getting started guide
  • Design principles summary

Welcome to AgKit.io-UI Component Gallery

Discover a comprehensive collection of reusable UI components built with SvelteKit, Tailwind CSS, and the Adapter Pattern. This gallery showcases components designed for modern web applications, emphasizing accessibility, responsiveness, and ease of integration.

Whether you're a developer looking to speed up your workflow or a designer exploring component possibilities, this gallery provides interactive previews, code examples, and detailed documentation for each component.

Key Features

  • Modular Components: Each component is self-contained and reusable, following best practices for Svelte development.
  • Adapter Pattern: Components use adapters for data abstraction, making them easy to test and integrate with different data sources.
  • Accessibility First: All components are built with accessibility in mind, ensuring compliance with WCAG guidelines.
  • Responsive Design: Components adapt seamlessly to different screen sizes using Tailwind CSS utilities.
  • Interactive Previews: See components in action with live previews and editable code examples.

Getting Started

Browse the component categories in the sidebar to explore different types of components. Click on any component to view its preview, code, and documentation.

Components are organized into categories like Foundations, Contacts, Clients, and more. Each category contains reference implementations and variants to suit different use cases.

Tip: Use the code tabs to copy implementation examples directly into your projects. All components are built on top of shadcn-svelte for consistency and reliability.

Design Principles

  • Consistency: Use consistent spacing, colors, and typography across all components. Use Tailwind utility classes for uniformity.
  • Accessibility: Ensure all interactive elements are accessible via keyboard and screen readers.
  • Responsiveness: Design layouts with mobile devices in mind. All components must be mobile-friendly.