Getting Started

Build Faster, Build Better

Welcome to the heart of Insites development – our Component Library! This is your ultimate toolkit for crafting beautiful, responsive, and highly functional web applications with speed and consistency.

At Insites, we believe in developer efficiency and design consistency. That's why our Component Library offers a rich collection of pre-built, robust web components designed to integrate seamlessly into your projects. Each component is engineered to be:

• Reusable: Use them across different parts of your application, or even in different projects, without recreating code.
• Accessible: Built with accessibility best practices in mind, ensuring your applications are inclusive for all users.
• Customizable: Easily adapt components to match your brand's unique look and feel through simple attributes and CSS variables.
• Performant: Optimized for speed and efficiency, contributing to a smooth user experience.
• Encapsulated: Each component manages its own structure, style, and behavior, preventing conflicts and making maintenance a breeze.

What You'll Find Here

Our Component Library documentation is structured to help you quickly find what you need and master our components:

Overview & Principles

Dive into the core concepts behind our components, including our Design System principles that ensure visual and functional harmony across your application. Learn about our component hierarchy and how attribute inheritance helps you manage design variations efficiently.

General-Use Components

These are the building blocks for almost any UI. From interactive buttons and elegant carousels to dynamic galleries and essential loaders, you'll find everything you need for common UI patterns.

Layout Components

Craft flexible and responsive layouts with components like accordions, backdrops, drawers, headers, and modals. These tools help you structure your content effectively and guide user interaction.

Data Entry Components

Simplify form creation and user input with our specialized components. Explore card selectors, customizable checkboxes, versatile inputs, intuitive sliders, and powerful editors for rich content creation.

Data Display Components

Present complex data clearly and engagingly. Utilize our Kanban boards for project management, various chart types for data visualization, dynamic tables for structured information, and interactive timelines for sequential events.

Icons & Assets

Enhance your UI with our scalable and customizable Font Icons, designed to add lightweight visual cues and improve user comprehension.

How to Use Components

Each component within this library comes with detailed documentation, including:

• Live Demos: See the component in action and interact with its features.
• Code Examples: Get ready-to-use code snippets for integrating the component into your project.
• Properties & Attributes: Understand all configurable options to customize behavior and appearance.
• Events: Learn how to respond to user interactions and component lifecycle events.
• Slots & Theming: Discover how to inject custom content and apply your brand's styling.

Naming Conventions

All Insites web components use the ins- prefix, followed by the component name in kebab-case, like <ins-button>, <ins-table>, <ins-card>, etc.

Start exploring the Insites Component Library today and accelerate your web development workflow! If you have any questions or need assistance, don't hesitate to contact our Support Team.

Ready to build something amazing? Let's go!