Simple, optimized
components library for Svelte

Lapikit is an open-source Svelte component library for building accessible, high-performance, and fully customizable interfaces with Svelte and SvelteKit.

Get started Install Guide

File

Edit

Select

...

lapikit-svelte-project

N

Explorer

lapikit-svelte-project

.github

.svelte-kit

.vscode

node_modules

src

lib

routes

app.d.ts

app.html

static

tests

package.json

tsconfig.json

+layout.svelte

src routes +layout.svelte

import 'layout.css';

let {children} = $props ();

</script>

<kit:app>

{@render children()}

</kit:app>

Current

v0.6.12

Build your interface with less code

The power of Lapikit

Lapikit is an open-source Svelte component library built by front-end developer, for front-end developers. The goal of Lapikit is to free you from repetitive tasks such as managing component imports, duplicate CSS classes, and global components that have to be reinvented for every project.

The main challenge for projects is time. Lapikit is here to free up your time so you can focus on what really matters: building accessible, high-performance, and consistent interfaces, without ever sacrificing the flexibility of your code.

Lili preprocessor: it’s at the core of Lapikit

Lili is the Svelte preprocessor used by Lapikit to transform its custom component syntax at compile time.

It ensures that Lapikit components are properly structured and allows you to use features such as the `class` and `style` directives on Lapikit components; it works as an extension of the Svelte preprocessor.

Coming soon: compatibility with Webpack and Rollup

Look over the syntax
of the templates

Svelte

Preprocessor Lili

Class and Style Binding with s-class and s-style

Svelte offers a directive-based approach for the `style` and `class` properties through its new directives dedicated to these properties. You can now define your dynamic classes directly within your elements, which makes the code much more fluid and readable by eliminating the need for complex ternary operators or tedious manipulations.

But what role does the Lili preprocessor play in all of this?

To top it all off, the Lapikit Lili preprocessor further enhances this experience by extending this handy feature to all components in the Lapikit library, giving you optimal flexibility for your projects!

Two directives `s-style` and `s-class` are available to provide the same convenience as native HTML elements.

1 <kit:btn s-class_padding="8px">

2 Button s-class

3 </kit:btn>

4 <kit:btn s-style_background="purple">

5 Button s-style

6 </kit:btn>

1 <button class="kit-btn padding-8px">

2 Button s-class

3 </button>

4 <button

5 class="kit-btn"

6 style="background: purple;"

7 >

8 Button s-style

9 </button>

Use Lapikit components with the <kit:*> syntax

1 <script lang='ts'>

2 ...

3 </script>

4

5 <kit:list density="compact">

6 {#each data as item (item)}

7 <kit:list-item>

8 {item}

9 </kit:list-item>

10 {/each}

11 </kit:list>

1 <script lang='ts'>

2 import KitList from lapikit/components/list/list.svelte

3 import KitListItem from lapikit/components/list/modules/list-item.svelte

4

5 ...

6 </script>

7

8 <KitList density="compact">

9 {#each data as item (item)}

10 <KitListItem>

11 {item}

12 </KitListItem>

13 {/each}

14 </KitList>

With Lapikit and the Lili preprocessor, you can focus on writing your code and calling components using the `<kit:*>` directives the preprocessor will handle the rest, including imports, proper naming conventions for using Svelte components, snippet adaptations, and more.

Here's a quick example of how Lapikit components work. Use `<kit:list>` and `<kit:list-item>` directly in your Svelte template, and Lili transforms the syntax at compile time while handling the corresponding component imports.

The example below shows the same List component using the `<kit:*>` syntax and standard Svelte imports.

Learn more about the Lapikit
template syntax

It's not magic, It's Lapikit

Lapikit includes reusable Svelte components for interface patterns such as buttons, text fields, cards, dialog boxes, drop-down menus, accordions, lists, tooltips, navigation elements, and more. These components work in tandem with Lapikit themes, stylesheets, hooks, and the Lili preprocessor.

Explore all Svelte components

Why choose Lapikit over other Svelte component libraries?

Here's how Lapikit compares to other popular Svelte libraries:

Lapikit

Skeleton

Shadcn Svelte

Melt UI

Features

Svelte Components

19

42

62

18

Theming supports

Hooks and actions

2

Environnements

Runes support

No Tailwind dependances

Tailwind support

UnoCss support

CSS standard support

Dependencies dev/build

27 / 1

0 / 32

25 / 4

10 / 5

Eslint support

Integration and support

CLI integrated

Full open and free

Release cadence

Bi-Monthly

Monthly

**Last updated: September 2026

Common questions about Lapikit

Can't find the answer to your question here? Contact us we're here to help.

contact@lapikit.dev

Priority replies for Sponsor customers

@discord/lapikit

Share, support and news with Lapikit Team

See the roadmap

What the plan for 2026 ?

What is included in Lapikit?

You'll start with 19 Lapikit components, 2 utility functions, and a full-featured preprocessor that will allow you to harness the full power of Lapikit directly within your project.

The goal is to offer you new components with each release to ensure support for new needs. All of this is open-source and free.