Presets

Blocks

Get PRO

Need premium blocks and templates? Upgrade to PRO and get access.

Upgrade
JoinLogin
Presets
Monochrome
Overview
  • Introduction
  • Components
  • Installation
Components
  • Accordion
  • Alert
  • Alert Dialog
  • Aspect Ratio
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Button Group
  • CalendarNEW
  • Card
  • CarouselNEW
  • Checkbox
  • Collapsible
  • Dialog
  • Dropdown Menu
  • Empty
  • Field
  • Input
  • Input Group
  • Item
  • Kbd
  • Label
  • Native Select
  • Scroll Area
  • SelectNEW
  • Separator
  • SwitchNEW
  • Table
  • Tabs
  • Textarea
  • TooltipNEW

Introduction

Welcome to Monochrome UI for Svelte! This library is a collection of UI components based on primitives that works across all your favourite frameworks.

What is Monochrome UI for Svelte?

Monochrome UI for Svelte is a collection of Svelte components built with Tailwind CSS. Just copy, paste, and build.

It's the perfect starting point for any project—everything you need to design and build modern, beautiful interfaces and websites.

Tech stack

Svelte

Svelte

v5.53

Tailwind CSS

Tailwind CSS

v4.1

TypeScript

TypeScript

v5.9

Accessibility

Accessibility isn't optional—it's the baseline for any modern build.

Monochrome UI for Svelte is built with accessibility in mind, following best practices and guidelines to ensure that everyone can use and enjoy the components.

How is this different from a library?

Unlike traditional component libraries that are installed as a dependency, Monochrome UI for Svelte gives you the source code.

When you select a component, its code is added directly to your project. This means no package dependencies to manage and no framework lock-in! You have full control to modify, extend, or adapt the components to your specific needs—because you own the code.

Get PRO

Need premium blocks and templates? Upgrade to PRO and get access.