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

• Buttons

  • toggle
  • groups

• 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

• tooltip

  • popconfirm
  • popselect
  • menu
  • nested menus
  • menu pane (multi column)

• list

  • select
    • multiple
    • disabled
    • readonly
    • sections
    • keyboard navigation
  • scroll shadow
  • virtualized
  • infinite scroll
  • drag & drop
  • pagination
  • pull/scroll to refresh
  • filter
  • sort
  • tree

• progress

  • vertical
  • circular
  • ticks
  • min/max
  • indeterminate
  • color/background
  • duration/timeout
  • start/stop/cancel/finish/reset

• collapse

  • summary
  • details (html semantic tags)

• stepper

  • vertical
  • animation (slider, fade or collapse)
  • progress/dots

• Modal/dialog

  • HTML Dialog
  • HTML Popover
  • Drawer
    • animation
    • buffer
    • placement (top, bottom, left, right)
    • size (width, height)
    • scrollable
    • close button
    • dismissible
    • resizable (drag, handle, min/max)
    • backdrop
    • inert
    • click outside
    • focus trap

• 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

• Progress/Loading

  • bar
  • circle
  • border
  • background

• PointerTracker (Pointer Events)

  • track cursor
  • grow to tabindex targets
  • height, twist, tilt & pressure support

• text

  • elevation
  • ellipsis
  • mark
  • scroll & shadow
  • typing animation

• Alerts

  • toast
  • rich notification

• container

  • 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