Theming & Modes

Customize themes, density modes, and text directions through data attributes.

Theme Switching

Switch between themes using the data-theme attribute:

1
2
3

Using ThemeProvider

For React applications, persist theme choice (e.g. localStorage) and set data-theme on the root element. This portal includes a simple implementation:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Density Modes

Control the spacing and sizing of components:

1
2
3

Density Effects

• Compact: 75% spacing, smaller fonts - perfect for data tables and dashboards
• Normal: Standard spacing - default for most interfaces
• Comfortable: 125% spacing, larger fonts - ideal for touch devices and accessibility

RTL (Right-to-Left) Support

Enable RTL mode for languages like Arabic, Hebrew, and Urdu:

1
2
3

Using Logical Properties

Components automatically adapt to RTL when using logical properties:

1
2
3
4
5

Combined Usage

You can combine multiple attributes:

1
2
3
4
5
6
7
8
9

Motion Modes

Disable motion with data-motion="reduced" (tokens also respect prefers-reduced-motion by default):

1
2
3

Best Practices

• Theme: Set at the root level for consistent theming across the app
• Density: Can be set per-page or per-section for different contexts
• Direction: Should match the primary language of your content
• Logical Properties: Always use logical properties (start/end) instead of left/right