Skip to main content

Styling Guide

Temper components are completely unstyled by default. You have full freedom to style them using Tailwind CSS, CSS Modules, styled-components, or plain CSS.

Styling with Tailwind CSS​

Tailwind CSS makes styling Temper straightforward:

import { Drawer } from '@ughur/temper';

export function TailwindDrawer() {
  return (
    <Drawer.Root>
      <Drawer.Trigger className="px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-xl shadow-md transition-all">
        Open Drawer
      </Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Overlay className="fixed inset-0 bg-black/40 backdrop-blur-sm z-50 transition-opacity" />
        <Drawer.Content className="fixed bottom-0 left-0 right-0 z-50 bg-white dark:bg-gray-900 rounded-t-[24px] p-6 shadow-2xl max-h-[92vh] flex flex-col">
          <Drawer.Handle className="w-12 h-1.5 bg-gray-300 dark:bg-gray-700 rounded-full mx-auto mb-6" />
          
          <Drawer.Title className="text-xl font-bold text-gray-900 dark:text-white mb-2">
            Tailwind Styled Drawer
          </Drawer.Title>
          
          <Drawer.Description className="text-gray-500 dark:text-gray-400 mb-6">
            Seamlessly styled using Tailwind CSS utility classes.
          </Drawer.Description>
          
          <Drawer.Close className="w-full py-3 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 font-semibold rounded-xl hover:bg-gray-200 transition">
            Close Sheet
          </Drawer.Close>
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  );
}

Data Attribute Selectors​

Temper exposes dynamic HTML data attributes on elements for custom CSS state selectors:

/* Styling content based on open state */
[data-temper-drawer-visible="true"] {
  box-shadow: 0 -20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Direction-specific styling */
[data-temper-drawer-direction="right"] {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

/* Drag handle hover state */
[data-temper-handle]:hover {
  background-color: #94a3b8;
}

Smooth Backdrop Blur​

You can apply CSS glassmorphism effects to <Drawer.Overlay>:

<Drawer.Overlay className="fixed inset-0 bg-slate-900/30 backdrop-blur-md z-50" />