https://github.com/Cheveniko/simple-image-uploader
shadcn inspired image uploader
https://github.com/Cheveniko/simple-image-uploader
nextjs shadcn-ui
Last synced: 7 months ago
JSON representation
shadcn inspired image uploader
- Host: GitHub
- URL: https://github.com/Cheveniko/simple-image-uploader
- Owner: Cheveniko
- Created: 2024-03-22T23:42:12.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-06-02T05:43:31.000Z (10 months ago)
- Last Synced: 2025-06-02T15:58:59.289Z (10 months ago)
- Topics: nextjs, shadcn-ui
- Language: TypeScript
- Homepage: https://simple-image-uploader-bice.vercel.app
- Size: 87.9 KB
- Stars: 34
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-shadcnui - Github - image-uploader-bice.vercel.app) | ★34 | (Components & Libraries)
README
## Simple Image Uploader
[shadcn/ui](https://ui.shadcn.com/) is an amazing ui library but doesn't have an image uploader component. So I created one!
It has image validation built in and customizable styles with [tailwindcss](https://tailwindcss.com/)
The image is validated inside a shadcn Form using zod, react-drop-zone and react-hook-form.
### Caveats
- This component only works on client components and should not be used directly from a Nextjs page or layout component
- You need to be on NodeJs 20.x to use the File Interface which zod uses to verify the user uploads an image. If you can't update to Node 20.x you can skip that validation and use the native browser validation using required on the Input component.
### Demo
https://simple-image-uploader-bice.vercel.app/
### Svelte version
https://svelte-image-uploader.vercel.app/