Shadcn Image Uploader
A beautiful image crop & upload tool built with Shadcn UI, React, and Tailwind CSS. Perfect for profile picture uploaders.
Overview
The Shadcn Image Uploader is an innovative and reusable React component designed to streamline the process of uploading and editing images. Building on the sleek and intuitive Shadcn UI framework, this component offers users both a robust image selection tool and an engaging image cropping experience. Whether you're a developer looking to enhance your application or a user wishing to seamlessly manage images, this component provides the essential features to meet those needs.
This uploader supports drag-and-drop functionality, allowing users to easily upload images while also ensuring proper validation of file types and sizes. With interactive cropping options that include zoom and pan, users have complete control over their images. This makes the Shadcn Image Uploader an excellent choice for anyone needing a reliable image uploading solution.
Features
- Drag & Drop or File Selection: Effortlessly upload images using simple drag-and-drop or traditional file selection methods.
- File Type Validation: Ensures that only allowed file types, such as JPEG, PNG, and WEBP, are uploaded, maintaining data integrity.
- File Size Validation: Configurable maximum file size (default is 5MB) to prevent oversized uploads.
- Image Preview: Displays a real-time preview of the selected image for instant feedback before finalizing uploads.
- Interactive Crop with Zoom and Pan: Users can accurately adjust their cropping area, zoom in, and pan around for precise edits.
- Customizable Aspect Ratio: Allows for tailored cropping based on specific width-to-height ratios, fitting the needs of various applications.
- Blob or File Output: Provides cropped images as a Blob through a callback function, making it easy to integrate into other workflows.
- Fully Customizable: Built with Shadcn UI components which allow for extensive customization to match different project styles.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- TanStack
TanStack is a collection of high-quality, framework-agnostic libraries including TanStack Query for data fetching, TanStack Router for routing, TanStack Table for tables, and more. These tools provide powerful, type-safe solutions for common web development challenges.
- Vite
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- cmdk
cmdk is a fast, composable command menu component for React. It provides the foundation for building command palettes, search interfaces, and keyboard-navigable menus similar to those found in applications like VS Code, Linear, and Raycast.
- Shadcn UI
Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
- GitHub Pages
Gridsome is a Vue.js-based static site generator that makes it easy to build fast and flexible websites and applications by leveraging modern web technologies like GraphQL, Webpack, and hot reloading
- React Hook Form
React Hook Form is a performant, flexible, and extensible form library for React with easy validation. It reduces re-renders and improves performance by using uncontrolled components and native HTML validation, making form handling simple and efficient.
- Recharts
Recharts is a powerful and easy-to-use React library for building customizable and interactive charts. Built on D3.js, it offers a wide range of pre-built chart types, such as line, bar, pie, and scatter charts, all of which can be composed with a declarative syntax.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
- Zod
Zod is a TypeScript-first schema declaration and validation library. It allows you to define schemas that can validate data at runtime while providing excellent TypeScript inference, making it perfect for API validation, form validation, and type-safe data handling.