https://github.com/olliethedev/dnd-dashboard
A beautiful, performant dashboard with drop-to-swap layouts built using Next.js, shadcn/ui, and swapy
https://github.com/olliethedev/dnd-dashboard
Last synced: about 2 months ago
JSON representation
A beautiful, performant dashboard with drop-to-swap layouts built using Next.js, shadcn/ui, and swapy
- Host: GitHub
- URL: https://github.com/olliethedev/dnd-dashboard
- Owner: olliethedev
- Created: 2024-09-03T16:20:51.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-09-03T17:07:01.000Z (9 months ago)
- Last Synced: 2025-04-05T05:53:48.964Z (about 2 months ago)
- Language: TypeScript
- Size: 14.1 MB
- Stars: 278
- Watchers: 4
- Forks: 30
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-shadcn-ui - Link - 10-17 | (Libs and Components)
- awesome-shadcn-ui - dnd-dashboard - A beautiful, performant dashboard with drop-to-swap layouts built using Next.js, shadcn/ui, and swapy. (Libs and Components)
- awesome-shadcn-ui - dnd-dashboard - A beautiful, performant dashboard with drop-to-swap layouts built using Next.js, shadcn/ui, and swapy. (Libs and Components)
README
# Next.js Drag-and-Drop Dashboard Demo
This is a beautiful, performant dashboard with drop-to-swap layouts built using Next.js, shadcn/ui, and swapy.
## Features
- Drag-and-drop layout customization
- Real-time layout updates
- Responsive design
- Beautiful UI components from shadcn/ui
- Server-side rendering with Next.js
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
## Learn More
To learn more about the technologies used in this project, check out the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
- [shadcn/ui](https://ui.shadcn.com/) - beautifully designed components built with Radix UI and Tailwind CSS.
- [swapy](https://swapy.tahazsh.com/) - a lightweight JavaScript library for creating drag and drop interfaces.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!