Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sadmann7/sortable

Sortable built with shadcn/ui, radix ui, and dnd-kit.
https://github.com/sadmann7/sortable

dnd dnd-kit shadcn-ui sortable

Last synced: 4 days ago
JSON representation

Sortable built with shadcn/ui, radix ui, and dnd-kit.

Host: GitHub
URL: https://github.com/sadmann7/sortable
Owner: sadmann7
License: mit
Created: 2024-05-11T05:43:07.000Z (7 months ago)
Default Branch: main
Last Pushed: 2024-11-10T10:03:07.000Z (about 1 month ago)
Last Synced: 2024-12-01T04:04:49.653Z (11 days ago)
Topics: dnd, dnd-kit, shadcn-ui, sortable
Language: TypeScript
Homepage: https://sortable.sadmn.com
Size: 270 KB
Stars: 488
Watchers: 1
Forks: 11
Open Issues: 1
Metadata Files:
- Readme: README.md
- License: LICENSE.md

Awesome Lists containing this project

awesome-shadcn-ui - sortable - A sortable component built with shadcn/ui, radix ui, and dnd-kit. (Libs and Components)
awesome-shadcn-ui - Sortable - A sortable component built with shadcn/ui, radix ui, and dnd-kit. (Components)
awesome-shadcn-ui - Sortable - A sortable component built with shadcn/ui, radix ui, and dnd-kit. (Components)

README

        # [Sortable](https://sortable.sadmn.com)

This is a sortable built with `shadcn/ui`, `radix ui`, and `dnd-kit`. It is bootstrapped with `create-t3-app`.

[![Sortable](./public/images/screenshot.png)](https://sortable.sadmn.com)

## Tech Stack

- **Framework:** [Next.js](https://nextjs.org)

- **Styling:** [Tailwind CSS](https://tailwindcss.com)

- **UI Components:** [shadcn/ui](https://ui.shadcn.com)

- **Drag and Drop:** [dnd-kit](https://dndkit.com)

- **Validation:** [Zod](https://zod.dev)

## Features

- [x] Headless `Sortable` ui primitives built with `shadcn/ui`, `radix ui`, and `dnd-kit`.

- [x] Integration with `useFieldArray` of `react-hook-form`, and `tanstack-table`.

## Running Locally

1. Clone the repository

   ```bash

   git clone https://github.com/sadmann7/uploader

   ```

2. Install dependencies using pnpm

   ```bash

   pnpm install

   ```

3. Start the development server

   ```bash

   pnpm run dev

   ```

## How do I deploy this?

Follow the deployment guides for [Vercel](https://create.t3.gg/en/deployment/vercel), [Netlify](https://create.t3.gg/en/deployment/netlify) and [Docker](https://create.t3.gg/en/deployment/docker) for more information.