I'll create a "Back to top" button that matches the dashboard's clean design style. This component will appear when users scroll down and allow them to quickly return to the top of the page.

How It Works

1. Visibility Control: The button remains hidden until the user scrolls down 300px from the top of the page.

2. Styling:

   • Black background with white border (using ring-2 ring-white)
   • Fixed position at the bottom right corner
   • Smooth transition effects for appearing/disappearing
   • Hover and focus states for better user experience

3. Accessibility:

   • Includes an aria-label for screen readers
   • Focus styles for keyboard navigation

4. Functionality:

   • Uses smooth scrolling behavior for a polished experience
   • Properly cleans up event listeners to prevent memory leaks

Implementation

To add this to your dashboard:

1. Create the back-to-top.tsx component in your components folder
2. Import and add the <BackToTop /> component to your dashboard layout or page
3. The button will automatically handle its own visibility based on scroll position

The component is designed to match the clean, professional look of your dashboard while providing a helpful navigation feature for users viewing longer pages.

I'll create a more complete example that shows how the "Back to top" button would look in your dashboard. This will include a visual representation through code and styling:

Visual Representation of the Back to Top Button

Here's what the "Back to top" button looks like:

• Appearance: A circular black button with a white border (ring) and a white up-arrow icon
• Size: 40px × 40px (h-10 w-10)
• Position: Fixed at the bottom right corner of the screen (24px from bottom and right edges)
• Icon: White ChevronUp icon from Lucide React

• States:

  • Hidden: When at the top of the page
  • Visible: After scrolling down 300px
  • Hover: Slightly darker background
  • Focus: Additional white ring for accessibility

The button has a smooth fade-in animation when it appears and a fade-out animation when it disappears. When clicked, it smoothly scrolls the page back to the top.

Visual Mockup

The button (represented by the circle with an up arrow) appears in the bottom right corner after scrolling down. It has a black background with a white border and a white up-arrow icon.

To see it in action, scroll down on your dashboard page - the button will appear once you've scrolled past the threshold, allowing users to quickly return to the top of the page.