@dvcol/neo-svelte NPM

Description

Neo Svelte is a modern UI library for Svelte 5, designed to bring a sleek, soft, and futuristic look to web applications with neumorphism and glassmorphism design elements.

It provides a collection of pre-styled, accessible, and highly customizable components that make it easy to build visually appealing UIs with minimal effort.

Prerequisites

Note: Svelte Simple Router is a svelte 5 native library, and will not work with prior versions of svelte.

svelte >= 5.0.0

Install

pnpm add @dvcol/neo-svelte

Getting Started

Wrap any component inside the style provider

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

<NeoThemeProvider>
  ...
</NeoThemeProvider>

Then import any of the components you want to use.

See examples in the demo (code here, live demo here).

TODO

@media any-pointer:coarse any-hover:none
move to inline/bloc to support writing-mode
Buttons
- toggle
- groups
- floating (speed dial)
- split
tags/pills
- badge
Tabs
Card
Inputs
- Password
- Pin
- Color picker
- checkbox
- radio
Text Area
- @ / # tags
file picker
- drag & drop
- multiple
numbers
- digits
- phone
- credit card
- pin
time/date/week
- range
switch
slider
- range
- inset
- custom before-after
- steps
- ticks
- vertical
- circular
- rating (stars)
select
- native
- custom
form
- validation
- fieldset
list
- select
  - multiple
  - disabled
  - readonly
  - sections
  - keyboard navigation
- scroll shadow
- virtualized
- infinite scroll
- drag & drop
- pagination
- drag & drop
- timeline
- pull/scroll to refresh
- filter
- sort
- tree
progress
- vertical
- circular
- meter (progress group)
- ticks
- min/max
- indeterminate
- color/background
- duration/timeout
- start/stop/cancel/finish/reset
collapse
- description
- vertical
- accordion
- controlled (min, max, toggle)
stepper
- vertical
- collapse
- progress/dots
- controls (cancel, next, prev, finish)
- touch swipe
tooltip
- popconfirm
- popselect
- popstepper
Modal/dialog
- HTML Dialog
  - animation (slide/fade)
  - stepper
  - confirm
  - backdrop
  - position (center, top, bottom, left, right)
  - custom tag (not dialog)
  - draggable
- HTML Popover
- Drawer
  - size (width, height)
  - scrollable
  - close button
  - persistant
menu
- nested menus
- collapsable (expand below)
- menu pane (multi column, expand right/left)
- menu list
- Dropdown
- Sections
- Dividers
Chat
- infinite scroll
- virtual scroll
- async
- stream
- generative text animation
- scroll to bottom
- typing indicator
- read indicator
- reactions
- threads
- @ / # tags
- mentions
- attachments
- gifs/images
- videos
- audio
- custom cards (contact, etc.)
- custom bubbles
- custom input
table
pagination
auto-complete
- @ / # tags
- select
- multiple
- auto-complete
  - @ / # tags
image
- videos
- carousel
- parallax
avatar
- badge
PointerTracker (Pointer Events)
- track cursor
- grow to tabindex targets
- twist, tilt & pressure support (for supported pencils)
loader
- spinner
- matrix
- pull to refresh (top, bottom, left, right)
- skeleton
- lazy load
- suspense
text
- elevation
- code block (shiki ?)
- ellipsis
- mark
- scroll & shadow
- typing animation
  - fake cursor
  - fake typos
  - random pauses
Alerts
- toast
- rich notification
container
- transition
- split/resizable
- flex
- grid
- masonry ?