lapikit Lapikit

Getting Started with Lapikit library for Svelte Projects

Install Lapikit in your Svelte project

Prerequisites

Before installing Lapikit, make sure you have:

  • basic familiarity with the command line
  • an existing Svelte project (SvelteKit, Vite, or another Svelte setup)

SvelteKit is recommended for the best experience, but Lapikit works with any Svelte project.

Lapikit is written in TypeScript and fully supports TypeScript environments.

JavaScript projects are also supported. You can ignore type annotations if needed.

That said, TypeScript is recommended for a smoother developer experience, especially when working with advanced component props, stores, and hooks.

Install and configure Lapikit

Install Lapikit in your project directory

To install Lapikit, run the following command in your project directory:

Once installed, run the setup CLI to automatically configure the required preprocessor:

Note: If you are using SvelteKit, the CLI will detect your setup automatically and apply the recommended configuration. For other setups, follow the manual configuration steps below.

If your project goes beyond the standard SvelteKit setup (routes, lib), we recommend using the manual installation process to minimize potential errors and, most importantly, to specify exactly where Lapikit should run. Otherwise, using the CLI will allow you to get Lapikit up and running in less than 5 minutes

Manual installation and configuration

Configure the preprocessor manually in 3 steps:

  1. Install Lapikit:
  1. Update your svelte.config.js to include the Lapikit preprocessor:
svelte.config.js

If you’re using packages like TypeScript and eSLint in your project, we recommend checking out the page on configuring environments with Lapikit.

  1. Restart your development server to apply the changes.

You can now start using Lapikit components in your Svelte project. For example:

+layout.svelte

Explore the Lapikit documentation

Once Lapikit is installed, you can start exploring the documentation to understand how components, stores, hooks, and themes work together.

Each component includes examples, usage guides, and API references to help you integrate it quickly into your Svelte or SvelteKit project.

Integrate Lapikit into your design system

Lapikit is built to adapt to your existing design system rather than replace it.

You can customize components with styling props, CSS variables, or themes to keep a consistent visual language across your application.

The customization guides explain how to configure themes, styles, dropdown, and global components.

Use Lapikit components

Lapikit includes a growing collection of components for common interface patterns such as buttons, dialogs, dropdowns, tooltips, and forms.

Components are designed to stay close to native HTML behavior while providing additional styling and reactive features.

A helpful starting point is the documentation for the kit:app component, which describes the main wrapper component used to initialize the app’s styles, themes, and overall behavior.

Refer to the kit:app component documentation to learn more about how to use it and the features.