Skip to main content

Getting Started with Temper

Temper (published as @ughur/temper or temper) is an unstyled, accessible, and high-performance React drawer component. It gives you fluid physics-based gestures, snap points, background scaling, multi-directional sliding, and ARIA dialog compliance.

Installation​

Install @ughur/temper using your preferred package manager:

pnpm add @ughur/temper

Required Stylesheets​

Temper comes with minimal baseline CSS rules required for touch gesture handling, positional transitions, and pointer event management. Import the style file in your root component or app layout:

import '@ughur/temper/style.css';

Basic Usage​

Live Demo: Basic Bottom Drawer

Here is the code for the example above:

import React from 'react';
import { Drawer } from '@ughur/temper';
import '@ughur/temper/style.css';

export function SimpleDrawerExample() {
  return (
    <Drawer.Root>
      <Drawer.Trigger className="px-4 py-2 bg-indigo-600 text-white rounded-lg font-medium">
        Open Drawer
      </Drawer.Trigger>

      <Drawer.Portal>
        <Drawer.Overlay className="fixed inset-0 bg-black/40 z-50" />
        <Drawer.Content className="bg-white fixed bottom-0 left-0 right-0 z-50 rounded-t-2xl p-6 shadow-xl max-h-[90vh] flex flex-col">
          <Drawer.Handle className="w-12 h-1.5 bg-gray-300 rounded-full mx-auto mb-6 cursor-grab active:cursor-grabbing" />

          <Drawer.Title className="text-xl font-bold text-gray-900 mb-2">
            Welcome to Temper
          </Drawer.Title>

          <Drawer.Description className="text-gray-600 mb-6">
            This drawer component is fully accessible, responsive, and customizable.
          </Drawer.Description>

          <div className="mt-auto flex justify-end gap-3">
            <Drawer.Close className="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg">
              Close
            </Drawer.Close>
          </div>
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  );
}

Interactive Playground​

Try changing the props live — the drawer and code snippet update in real time.

Interactive Playground
Props
0.25
Code
<Drawer.Root
  direction="bottom"
  modal
  dismissible
  repositionInputs
>
  <Drawer.Trigger>Open</Drawer.Trigger>
  <Drawer.Portal>
    <Drawer.Overlay />
    <Drawer.Content>
      {/* your content */}
    </Drawer.Content>
  </Drawer.Portal>
</Drawer.Root>

Key Features at a Glance​

  • ⚡ Physics & Drag: Smooth drag mechanics built for mobile touch and desktop cursor drag.
  • ♿ Accessibility: Powered by Radix UI's Dialog primitives with screen reader titles, descriptions, and focus locks.
  • 📐 Snap Points: Define partial height stops (e.g. [0.3, 0.6, 1.0]).
  • 📱 Directional Flexibility: Supports sliding from bottom, top, left, or right.
  • 🎨 100% Unstyled: Style with Tailwind CSS, CSS Modules, or styled-components.