Dashral Pro is hereSee pricing

Dashral

GlideNew

An element that glides to its new place and size when the layout changes, in the Motion edition.

$ pnpm dlx shadcn@latest add @dashral/glide
  • Brand guide.fig18.2 MB
  • Invoices.csv0.3 MB
  • Launch video.mp496.5 MB
  • Q4 report.pdf2.4 MB

Installation

$ pnpm dlx shadcn@latest add @dashral/glide

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Or by its full URL: https://dashral.com/r/glide.json

When to use

  • Things that move when the layout changes: rows as a list is sorted, cards as a view turns from list to grid, a highlight moving between cards (layoutId).

When not to use

  • Rows added or removed: RevealList grows and folds them.
  • A sliding highlight inside one control: Tabs and Segmented Control have their own.

Usage

Each row is a Glide; with the Motion edition, sorting glides them to their new places.

example.tsx
"use client"

import { useState } from "react"
import { Button } from "@/components/dashral/button"
import { Glide } from "@/components/dashral/glide"

const people = [
  { name: "Olivia Martin", deals: 12 },
  { name: "Jackson Lee", deals: 31 },
  { name: "Ayu Lestari", deals: 24 },
]

export default function TopSellers() {
  const [sorted, setSorted] = useState(false)
  const list = sorted ? [...people].sort((a, b) => b.deals - a.deals) : people

  return (
    <div className="grid max-w-xs gap-3">
      <Button variant="outline" onClick={() => setSorted(!sorted)}>
        {sorted ? "Original order" : "Sort by deals"}
      </Button>
      <ul className="grid gap-2">
        {list.map((person) => (
          <Glide as="li" key={person.name} className="flex justify-between rounded-lg border px-3 py-2 text-sm">
            {person.name} <span className="tabular-nums">{person.deals}</span>
          </Glide>
        ))}
      </ul>
    </div>
  )
}

Using the npm package? Import from @dashral/ui/components/glide instead, here and in the examples; the rest is the same.

API reference

Glide

PropTypeDefault
as"div" | "span" | "li"

The element it is.

"div"
layoutboolean | "position" | "size"

What glides when the layout changes: everything, only where it is (position, for text that would stretch), or only its size.

true
layoutIdstring

A name shared by elements in different places, such as a highlight: when it moves to another, it glides there.

—
…HTMLAttributes

Anything an element takes: className, style, aria-*, handlers.

—

Motion

  • Without motion it's simply the element, and it moves at once: the gliding is the Motion edition's.