Getting Started with L

L is a next-generation design system that empowers you to create stunning web experiences with modern tooling and intuitive patterns. This documentation will help you understand core concepts, integration patterns and best practices.

Quick Tip

All code blocks on this page can be copied by clicking the copy button. Press Ctrl+Enter to expand the playground environment.

Installation

npm npm install @l/framework

CDN https://cdn.l/framework.min.js

Getting Started

Create your first component with the L framework. The following example shows how to use the Button component with full type support and responsive design.

{/* Sample code for Button component */}

Note: The framework supports TypeScript out-of-the-box with comprehensive type declarations. Just add type: module to your project settings.

Core Components

Navigation

Responsive layout system with customizable breakpoints and spacing tokens

<l-layout>

UI Themes

Create and manage multiple themes with our theme manager API

useTheme('dark')

Analytics

Built-in analytics system with performance monitoring and metrics

trackEvent('component', 'card')

Design Systems

Customizable design tokens and utility classes based on your brand identity

$brand-primary: #14b8a6

Theming System

Primary Color

Secondary Color

Text Color