Welcome to Neo Svelte

A neo-morphic ui library for svelte 5

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
• [x] Buttons
• [x] toggle
• [x] groups
• [ ] floating (speed dial)
• [ ] split
• [x] tags/pills
• [x] badge
• [x] Tabs
• [x] Card
• [x] Inputs
• [x] Password
• [x] Pin
• [x] Color picker
• [x] checkbox
• [x] radio
• [x] Text Area
• [ ] @ / # tags
• [x] file picker
• [x] drag & drop
• [x] multiple
• [x] numbers
• [x] digits
• [ ] phone
• [ ] credit card
• [x] pin
• [x] time/date/week
• [ ] range
• [x] switch
• [x] slider
• [x] range
• [x] inset
• [x] custom before-after
• [x] steps
• [x] ticks
• [ ] vertical
• [ ] circular
• [ ] rating (stars)
• [x] select
• [x] native
• [x] custom

• [x] form

• [x] validation

• [x] fieldset

• [x] list

• [x] select

  • [x] multiple
  • [x] disabled
  • [x] readonly
  • [x] sections
  • [x] keyboard navigation
• [x] scroll shadow
• [x] virtualized
• [x] infinite scroll
• [ ] pagination
• [ ] drag & drop
• [ ] timeline
• [ ] pull/scroll to refresh
• [x] filter
• [x] sort

• [ ] tree

• [x] progress

• [x] vertical

• [ ] circular
• [ ] meter (progress group)
• [x] ticks
• [x] min/max
• [x] indeterminate
• [x] color/background
• [x] duration/timeout

• [x] start/stop/cancel/finish/reset

• [x] collapse

• [x] description

• [x] vertical
• [x] accordion

• [x] controlled (min, max, toggle)

• [x] stepper

• [x] vertical

• [ ] collapse
• [x] progress/dots
• [x] controls (cancel, next, prev, finish)

• [x] touch swipe

• [x] tooltip

• [x] popconfirm

• [x] popselect

• [x] popstepper

• [x] Modal/dialog

• [x] HTML Dialog

  • [x] animation (slide/fade)
  • [x] stepper
  • [x] confirm
  • [x] backdrop
  • [x] position (center, top, bottom, left, right)
  • [x] custom tag (not dialog)
  • [x] draggable
• [ ] HTML Popover

• [x] Drawer

  • [x] size (width, height)
  • [x] scrollable
  • [x] close button
  • [ ] persistant

• [ ] Command Palette

• [ ] list

• [ ] header
• [ ] footer
• [ ] panel
• [ ] shortcuts

• [ ] expanded buttons

• [x] menu

• [x] nested menus

• [ ] collapsable (expand below)
• [ ] menu pane (multi column, expand right/left)
• [ ] menu list
• [x] Dropdown
• [x] Sections

• [x] 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

• [x] badge

• [x] PointerTracker (Pointer Events)

• [x] track cursor

• [x] grow to tabindex targets

• [x] twist, tilt & pressure support (for supported pencils)

• [ ] loader

• [ ] spinner
• [X] matrix
• [ ] pull to refresh (top, bottom, left, right)
• [x] skeleton
• [x] lazy load

• [X] suspense

• [ ] text

• [ ] elevation
• [ ] code block (shiki ?)
• [x] ellipsis
• [x] mark
• [x] scroll & shadow

• [x] typing animation

  • [x] fake cursor
  • [x] fake typos
  • [x] random pauses

• [x] Alerts

• [x] toast
• [x] rich notification
• [ ] container
• [x] transition
• [ ] split/resizable
• [ ] flex
• [ ] grid
• [ ] masonry ?

Author

• Github: @dvcol

Show your support

Give a ⭐️ if this project helped you!

📝 License

This project is MIT licensed.

This README was generated with ❤️ by readme-md-generator