Sandlada

The name Sandlada is inspired by a Swedish word SANDLÅDA.

Sandlada is an open-source team building Material Design 3 UI libraries, TypeScript utilities, and VSCode, Zed and OpenCode themes.

UI Library

Component library, CSS library and design tokens.

@sandlada/mdc

MDC

An open source component library that follows the Material Design 3 design specifications.

@sandlada/material-design-css

Material Design CSS

A CSS package for Material Design tokens: Color, Palette, Motion, Shape, Spacing, Typography and prebuilt themes.

@sandlada/mdk

MDK

A JavaScript library based on Material Design 3, providing data such as color, shape, shadow level, etc.

TS / JS Library

Framework-agnostic utilities written in TypeScript.

@sandlada/result

Result

A TypeScript library implementing the Result pattern, type-safe and exception-free error handling.

@sandlada/breakpoint

Breakpoint

Responsive viewport and element breakpoint observer, MD3 defaults, RxJS, zero-framework.

@sandlada/document-context

Document Context

A function-first, DOM-anchored IoC container and reactive state management library for browsers.

@sandlada/mcu-helper

MCU Helper

High-performance functional engine for Material Design 3 color tokens, dynamic schemes and OLED dark themes.

@sandlada/material-theme-cli

Material Theme CLI

Material Design CLI for generating theme tokens and serialized color outputs from a source color.

Extensions

Themes and VSCode plugins only.

vscode-material-design-theme

Material Design 3 Theme

Material Design 3 theme for VSCode.

@sandlada/opencode-material-theme

OpenCode Material Theme

Material Design 3 themes for the OpenCode TUI, 194 static JSON themes across 9 variants.

@sandlada/zed-material-theme

Zed Material Theme

Material Design 3 themes for Zed, Light, Dark and OLED across 9 variants.

material-vscode-extensions

Material VSCode Extensions

VSCode snippets: Material Web Snippets and Material Design CSS Snippets.