Material

Material system creates visual depth through translucent surfaces and backdrop blur effects. Control panel transparency with material prop for modern glass-like aesthetics.

Note: Material is related to the deprecated panelBackground prop from Radix Themes, but Kookie UI's material system is much more powerful and unique. It provides universal material control across all components with enhanced backdrop blur effects and better performance.

The goal is to add material support to all components, but not all components fully support it yet.

Installation

npm install @kushagradhawan/kookie-ui

Usage

Set material prop on the Theme component to control panel transparency globally. Use solid for opaque backgrounds or translucent for glass-like effects.

import { Theme } from '@kushagradhawan/kookie-ui';
 
<Theme material="translucent"><YourApp /></Theme>

Solid

Solid material provides opaque backgrounds with no transparency or blur effects. Ideal for high contrast interfaces and accessibility-focused designs.

<Theme material="solid"><YourApp /></Theme>

Use solid material when:

• You need maximum contrast and readability
• Working with low-end devices for better performance
• Building accessibility-focused interfaces
• You want consistent, opaque backgrounds

Translucent

Translucent material creates glass-like effects with semi-transparent backgrounds and backdrop blur. Perfect for modern, elevated interfaces.

<Theme material="translucent"><YourApp /></Theme>

Use translucent material when:

• You want modern, glass-like aesthetics
• Building design-focused applications
• You have backgrounds that benefit from transparency
• Working on high-end devices

Component Overrides

Individual components can override theme material settings using their material prop. This allows you to mix solid and translucent materials within the same interface.

// Override to solid material
<Card material="solid"><Text>Solid card</Text></Card>
 
// Override to translucent material
<Dialog.Content material="translucent">
  <Dialog.Title>Translucent dialog</Dialog.Title>
</Dialog.Content>

Performance

Use solid material for low-end devices and high contrast interfaces. Use translucent material for modern devices and design-focused applications.

For best performance, set the theme to solid and override specific components to translucent as needed. Use translucent material selectively for maximum visual impact and only where backgrounds make it effective.

// Mixed approach - theme solid, specific components translucent
<Theme material="solid">
  <Card material="translucent">Glass effect card</Card>
  <Dialog.Content material="translucent">Glass dialog</Dialog.Content>
</Theme>

Backdrop Blur

Translucent material uses backdrop blur effects to create depth. The blur intensity varies by component type:

• Components: var(--backdrop-blur-components) - Subtle blur for buttons and small elements
• Panels: var(--backdrop-blur-panel) - Medium blur for cards and panels
• Dialogs: var(--backdrop-blur-dialog) - Strong blur for modals and overlays

These blur values are automatically applied when using translucent material.

Accessibility

Solid material provides better contrast and readability, making it ideal for accessibility-focused designs. Translucent material can reduce contrast, especially on complex backgrounds. Use highContrast prop on components when using translucent material to maintain accessibility.

<Button material="translucent" highContrast>Accessible button</Button>