Discover the Lapikit components

Components are at the heart of Lapikit. Without them, the library won’t exist. Each component is a reusable block of code that handles an entire user interface element, in perfect alignment with the design system defined by Lapikit.

Root wrapper that initializes the Lapikit theme and global styles.

Collapsible sections to progressively reveal content.

Contextual feedback messages for user actions.

Top navigation bar with slots for branding and actions.

Constrains content to a fixed width-to-height ratio.

User profile picture with fallback initials.

Interactive element with multiple variants and sizes.

Surface container for grouped, related content.

Compact element for tags, filters or selections.

Accessible modal dialog for confirmations and forms.

Floating menu triggered by a reference element.

SVG icon wrapper with size and color control.

Vertical list of items with optional leading and trailing slots.

Full-screen overlay for focused tasks or content.

Lightweight floating panel anchored to a trigger.

Visual divider between sections or list items.

Text input with label, helper text and validation states.

Horizontal bar grouping actions and controls.

Short contextual hint shown on hover or focus.

Every component receives props (parameters) that allow you to customize its appearance and behavior.

A concrete example: the Button component. It displays an interactive button that can receive text, an icon, a link, or combinations of these. It automatically inherits Lapikit styles while remaining fully customizable (size, color, variant, states, and more).

Components can also be nested. For instance, a Card can contain a Button, images, text, or any other components. This nesting respects the Lapikit global configuration, ensuring visual consistency and accessibility across your app.

Lapikit provides a complete library of Svelte components built for speed, clarity, and maintainability. Buttons, cards, dialogs, toolbars, and more are ready to use, so you spend less time reinventing UI elements and more time focusing on user experience.

All components follow the same design logic and naming conventions, keeping your code clean, readable, and scalable. The principle is simple: write less boilerplate, build faster, and maintain full control over your interface. Lapikit empowers you to prototype smarter, implement consistently, and ship reliable, polished Svelte applications.