Getting StartedInstallation and setup guides 5
LayoutWorkflow and structural layout components 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 5
FormInput and selection components 17
UtilityGeneral-purpose interface utilities 7
NavigationMenu surfaces and hierarchical actions 7
Overview API Styling Examples

Drawer overview

Drawer provides a slide-in panel from the start or end side. Use the headless primitives for full control over layout and animation, or the styled component for quick integration.

Imports

Select the layer that matches your ownership model.

Primitive import

ts
import { TngDrawerContainer, TngDrawer, TngDrawerContent } from '@tailng-ui/primitives';

Component import

ts
import { TngDrawerComponent } from '@tailng-ui/components';

Drawer variants

Same drawer semantics rendered through headless markup, plain CSS wrappers, and Tailwind utility shells.

Headless drawer

Main content area

Keyboard interaction

  • Escape closes the drawer when closeOnEscape is enabled.
  • Tab cycles focus within the drawer when focus trap is active.
  • Focus is restored to the trigger element on close.

Accessibility baseline

  • Drawer panel supports role "dialog", "navigation", "complementary", or "region".
  • Focus trap keeps Tab navigation within the open drawer.
  • Main content can be marked inert when the overlay drawer is open.
  • RTL layout resolves "start"/"end" positions correctly.