#navbar img[src*="logo"] {
  height: 45px;
}

#sidebar svg:is([style*="sitemap.svg"], [style*="layer-group.svg"], [style*="arrows-from-line.svg"], [style*="signal-stream.svg"]) {
  width: 1.1rem;
}

.hero-image {
  margin-top: -3vw;

  @media (min-width: 1280px) and (max-width: 1420px) {
    margin-top: -2vw;
  }

  @media (max-width: 540px) {
    margin-top: -40px;
  }
}

#navbar a:is([href="/react/quickstart"],[href="/javascript/quickstart"]) {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;

  &::before {
    content: '';
    display: block;
    mask-repeat: no-repeat;
    mask-position: center center;
    width: 18px;
    height: 18px;
    background-color: #596dff;
  }
}

#navbar a[href="/react/quickstart"]::before  {
  mask-image: url("https://mintlify.b-cdn.net/v6.4.0/brands/react.svg");
}

#navbar a[href="/javascript/quickstart"]::before {
  mask-image: url("https://mintlify.b-cdn.net/v6.4.0/brands/js.svg");
}

.font-extrabold, .prose :where(h2):not(:where([class~=not-prose] *)) {
  font-weight: 600;
}

.info ol {
  list-style-type: decimal;
  padding: 1.25rem;
  text-indent: 0.25rem;
}

kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 400;
  vertical-align: text-top;
  white-space: nowrap;
  font-size: .75em;
  min-width: 1.75em;
  line-height: 1.7em;
  box-sizing: border-box;
  padding-left: .5em;
  padding-right: .5em;
  padding-bottom: .05em;
  word-spacing: -.1em;
  border-radius: 0.25em;
  height: fit-content;
  background-color: rgba(255,255,255);
  box-shadow: color(display-p3 0.024 0.024 0.349 / 0.024) 0px -0.6px 6px 0px inset, color(display-p3 1 1 1 / 0.95) 0px 0.6px 0px 0px inset, color(display-p3 0.024 0.024 0.349 / 0.024) 0px 3px 6px 0px inset, color(display-p3 0.008 0.008 0.165 / 0.15) 0px -0.6px 0px 0px inset, color(display-p3 0.004 0.039 0.2 / 0.122) 0px 0px 0px 0.6px, color(display-p3 0.008 0.027 0.184 / 0.197) 0px 0.96px 2.04px 0px;
}

.dark kbd {
  background-color: rgba(0,0,0);
  box-shadow: color(display-p3 0.882 0.933 0.992 / 0.077) 0px -0.6px 6px 0px inset, color(display-p3 0.949 0.969 0.996 / 0.708) 0px 0.6px 0px 0px inset, color(display-p3 0.875 0.992 1 / 0.034) 0px 3px 6px 0px inset, color(display-p3 0 0 0 / 0.9) 0px -1.2px 0px 0px inset, color(display-p3 0.882 0.929 1 / 0.246) 0px 0px 0px 0.9px, color(display-p3 0 0 0 / 0.95) 0px 0.96px 2.04px 0px;
}

.sponsors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.sponsors .rounded-2xl:hover {
  outline: 1px solid rgb(var(--primary-light));
}

.inline-logo {
  display: inline-block;
}

.inline-logo::before {
  content: '';
  position: relative;
  top: 0.15em;
  margin-right: 0.3em;
  margin-left: 0.2em;
  display: inline-block;
  width: 17px;
  height: 17px;
  mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzIiIGhlaWdodD0iNzIiIHZpZXdCb3g9IjAgMCA3MiA3MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcxLjc2MDggMC43NzgzMlYyMC45ODc1SDY1LjkwOTZWMTAuNjM0OEw2MS43NzI3IDYuNTUyMzFINTEuMjgxN1YwLjc3ODMySDcxLjc2MDhaTTIwLjU5NzUgMC43NzgzMlY2LjU1MjMxSDEwLjEwNjVMMjguNTE3MiAyNC43MjA0TDI0LjM4MDIgMjguODAyOEw1Ljk2OTU2IDEwLjYzNDhWMjAuOTg3NUgwLjExODM3VjAuNzc4MzJIMjAuNTk3NVpNNDcuNDk5IDQzLjQ1Mkw2NS45MDk2IDYxLjYyVjUxLjI2NzNINzEuNzYwOFY3MS40NzY2SDUxLjI4MTdWNjUuNzAyNUg2MS43NzI3TDQzLjM2MiA0Ny41MzQ1TDQ3LjQ5OSA0My40NTJaTTYxLjc3MjcgNi41NTIzMUw2NS45MDk2IDEwLjYzNDhMMTAuMTg3NSA2NS42MzkySDIwLjc2MzZWNzEuNDc2NkgwLjExODM3VjUxLjA0NTdINi4wMTcwMVY2MS41MTE5TDYxLjc3MjcgNi41NTIzMVoiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=);
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: contain;
  background-color: currentColor;
}

#content-container.max-w-6xl {
  max-width: 80rem;
}

.sp-layout {
  border-radius: var(--rounded-xl,.75rem);
  --tw-ring-color: rgba(0,0,0,.05);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

html:not(.dark) .hero .sp-layout {
  box-shadow: none;
}


.sp-tabs-scrollable-container {
  padding-left: 0;
  padding-right: 0;
}

.sp-tab-button {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid transparent;
}

.sp-tab-button[data-active="true"] {
  border-color: rgb(var(--primary-light));
}

.sp-layout {
  gap: 0px;
}

.dark .sp-layout {
  --tw-ring-color: rgb(var(--gray-800) / 0.5);
}

.sp-editor {
  flex-basis: 100% !important;
  order: 1;
}

.sp-preview {
  flex-basis: 100% !important;
}

.sp-preview, .sp-preview-container {
  background-color: transparent;
}

.sp-preview-iframe {
  min-height: 100px;
}

code-sandbox[style*="--preview-height"] .sp-preview {
  height: var(--preview-height) !important;
}

.sp-preview-container, .sp-overlay {
  background-color: #fafafd;
}

.dark .sp-preview-container, .dark .sp-overlay {
  background-color: #11131b;
}

.sp-preview-container iframe {
  background: transparent;
  color-scheme: normal;
}

.hero .sp-preview-container, .hero .sp-overlay {
  --gradient: linear-gradient(65deg, #56fff420, #001AFF20, #5F6AF220, #F25FD020, #56FFF520, #F25FD020, #001AFF20, #56fff420);
  background-image: var(--gradient);
  animation: background 16s linear infinite;
  animation-direction: alternate;
  background-size: 600% 100%;
}

.dark .hero .sp-preview-container, .dark .hero .sp-overlay {
  --gradient: linear-gradient(65deg, #56fff480, #001AFF80, #5F6AF280, #F25FD080, #56FFF580, #F25FD080, #001AFF80, #56fff480);
  animation: gradient 16s linear infinite;
}


@keyframes gradient {
  0% {
    background-color: #ff0000;
  }
  25% {
    background-color: #7f00ff;
  }
  50% {
    background-color: #00affa;
  }
  75% {
    background-color: #00f594;
  }
  100% {
    background-color: #ff0000
  }
}

@keyframes background-position {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}


Key features

Getting started

Core Concepts

Extend and customize

Overview

@dnd-kit

Learn how to build drag and drop interfaces with <span class="inline-logo">**dnd kit**</span>

Start building drag and drop interfaces with React in minutes.

Quickstart

Start building drag and drop interfaces with plain JavaScript in minutes.

The orchestrator of the drag and drop system.

Manager

Make elements draggable to drop them over droppable targets.

Draggable

Create droppable targets for draggable elements.

Droppable

Reorder elements in a list or across multiple lists.

Sortable

Extend beyond the core functionality with plugins.

Plugins

Sensors detect user input and translate it into drag and drop operations.

Detect pointer events to initiate drag and drop operations.

Pointer

Detect keyboard input to initiate drag and drop operations.

Keyboard

Modify or restrict the behavior of draggable elements.

Modifiers

The drag and drop context provider component.

DragDropProvider

Use the `useDraggable` hook to make draggable elements that can dropped over droppable targets.

useDraggable

Use the `useDroppable` hook to create droppable targets for draggable elements.

useDroppable

Use the `useSortable` hook to reorder elements in a list or across multiple lists.

useSortable

Learn how to reorder sortable elements across multiple lists.

Get Started

Concepts

Extensibility

Overview

Key features

Getting started

React

Vanilla

Core Concepts

Manager

Draggable

Droppable

Sortable

Extend and customize

Plugins

Sensors

Modifiers

Sponsors

Get Started

Concepts

Extensibility

​Key features

​Getting started

React

Vanilla

​Core Concepts

Manager

Draggable

Droppable

Sortable

​Extend and customize

Plugins

Sensors

Modifiers

​Sponsors

Key features

Getting started

Core Concepts

Extend and customize

Sponsors