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
```sh
pnpm add @dvcol/neo-svelte
```
## Getting Started
Wrap any component inside the style provider
```svelte
...
```
Then import any of the components you want to use.
See examples in the demo (code [here](https://github.com/dvcol/neo-svelte/tree/fed1b3f42e863e18968c77256527a837957b3304/demo/components), live demo [here](https://dvcol.github.io/neo-svelte/#/inputs)).
## 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](https://github.com/dvcol)
## Show your support
Give a ⭐️ if this project helped you!
## 📝 License
This project is [MIT](https://github.com/dvcol/neo-svelte/blob/master/LICENSE) licensed.
---
_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_