Welcome to Neo Svelte

A neo-morphic ui library for svelte 5

Description

Neo Svelte is a modern UI library for Svelte 5, bringing a sleek, soft, and futuristic feel to web applications through neumorphism and glassmorphism. It ships a collection of pre-styled, accessible, and highly customizable components designed to build polished UIs with minimal effort.

Features

• Svelte 5 native — built on runes and snippets; peer dependency svelte >=5.20.
• Neumorphism + glassmorphism design language out of the box.
• Themable via NeoThemeProvider (light/dark, palette, elevation tokens, transitions).
• Accessible primitives — ARIA wired, keyboard navigation, focus traversal.
• Tree-shakeable subpath exports per category — import only what you need.

Prerequisites

Neo Svelte is a Svelte 5 native library and will not work with prior versions of Svelte.

• svelte >= 5.20

Install

pnpm add @dvcol/neo-svelte

Getting Started

Wrap your app in the theme provider:

<script lang="ts">
  import { NeoThemeProvider } from '@dvcol/neo-svelte';
</script>

<NeoThemeProvider>
  <!-- your app -->
</NeoThemeProvider>

Subpath imports

Every category is exposed as a subpath export so bundlers can tree-shake aggressively:

import { NeoButton } from '@dvcol/neo-svelte/buttons';
import { NeoTooltip } from '@dvcol/neo-svelte/floating/tooltips';
import { NeoInput } from '@dvcol/neo-svelte/inputs';

See the full surface in the exports map of package.json.

Theming

NeoThemeProvider accepts theme and mode props, and exposes context for nested components. For runtime switching, drop in one of the bundled selectors:

<script lang="ts">
  import { NeoThemePicker, NeoThemeProvider } from '@dvcol/neo-svelte';
</script>

<NeoThemeProvider>
  <NeoThemePicker />
  <!-- your app -->
</NeoThemeProvider>

Source: src/lib/providers — NeoThemeProvider, NeoThemePicker, NeoThemeSelector, NeoTransitionSelector.

Demo

• Live demo: https://dvcol.github.io/neo-svelte/
• Demo source: demo/components

Components

Neo Svelte covers: badge, buttons, cards, collapse, containers, cursor, divider, floating (dialog, drawer, menu, notification, portal, tooltips), form, icons, inputs, list, loading, media, nav, pill, progress, providers, skeletons, stepper, text. See ROADMAP.md for what's implemented and what's planned.

Contributing

Contribution and testing conventions live in AGENTS.md. Bugs and feature requests go to the issue tracker.

Author

• Github: @dvcol

Show your support

Give a ⭐️ if this project helped you!

📝 License

This project is MIT licensed.