Getting Started with Lapikit library for Svelte Projects

Getting Started

Start simply with Lapikit, the component library designed for Svelte 5.

Every component is designed to work immediately, without complex configuration. Powered by Runes, Lapikit leverages the latest evolutions in Svelte to deliver optimal performance, a fluid development experience and total control over styles.

Ideal for starting up a project or integrating reliable components into an existing base.

Installing Lapikit

With CLI

Install Lapikit on your project quickly with your package manager.

Manually

1. Install the Lapikit package via your favorite package manager
   npm

   yarn
2. In the vite.config.js file, Import Lapikit as a Vite plugin
   Preview

   Code

   ---
3. Create the file lapikit.config.js and add the default code
   Preview

   Code

   ---
4. Import the Lapikit style In your (index/+page/+layout).svelte or main.(css/scss/less) add the style import
   Preview

   Code

   ---

After installation and initialization on your app, you can import Lapikit components into your Svelte files.

Example of use

Take the button component, with Lapikit it’s very easy to use. All you have to do is …

A library that adapts to your projects

Lapikit components offer a complete style that can be customized in a variety of ways. Each class depends on an attribute to avoid possible conflicts with other packages within your app. Each component that renders an HTML element exposes props and classes that you can use to apply styles to the element specifically or globally.

Using standard styles

Components have specific CSS classes and variables. These classes and variables are based on the following nomenclature:

• For classes, they all start with .kit-*
• For variables, they all start with --kit-*

Customization is our priority.

Components support at least the id, class and style attributes, and it is possible to have advanced attributes such as classContent to ensure the application of custom class on child elements internal to the component.

Lapikit styles with TailwindCSS or UnoCSS

Lapikit plays nice with utility-first CSS frameworks.

Using TailwindCSS or UnoCSS? You can pass your classes directly to any Lapikit component. No hacks. No overrides. Just class composition the way it should be.

padding-4 text-sm hover:bg-muted/70 Go for it. It’s all yours.

Minimal friction. Maximum control.

TypeScript support in Lapikit

Lapikit is written entirely in TypeScript, no opt-in, no half-measures. Just types, everywhere. If you’re using a TypeScript setup, you’ll get:

• Autocomplete that actually knows what you’re doing
• Props, slots, and events fully typed out
• Safer refactors, fewer silent breaks
• Better DX out of the box with editors like VS Code

No need to guess if a prop exists. No need to dig through the docs. Just hover, and go.

Next steps

Once installed, explore settings management and breakpoint configuration in your projects.

You can consult all the components available on the Components page to go further in building your interface.