Svelte Treeview Showcase

🎨 Theme Gallery

Pre-built themes and live styling examples

Live Theme Preview

Theme Selector

Select Theme:

Use Bootstrap Icons

Applied Classes:
Tree: none
Node: none

Theme Details

Default

Standard Bootstrap styling

🎯 Theme Features:

✅ Responsive design
✅ Accessibility compliant
✅ Smooth animations
✅ Bootstrap integration
✅ Custom color schemes

🔧 CSS Classes & Selectors

Available CSS classes and selectors for customization

CSS Class Reference

Class/Selector	Type	Element	Description
`.svelte-tree`	Default	Root container	Main tree wrapper element - always present
`.svelte-tree-node`	Default	Tree node	Individual node wrapper - contains content and children
`.svelte-tree-content`	Default	Node content	Node display content area (text, icons, etc.)
`.svelte-tree-expand`	Default	Expand button	Expand/collapse button element
`treeClass`	Custom	Root container	Custom class applied via component prop
`nodeClass`	Custom	Tree node	Custom class applied to each node
`selectedNodeClass`	Custom	Selected node	Applied to currently selected node
`expandedNodeClass`	Custom	Expanded node	Applied to expanded parent nodes
`[data-level]`	Attribute	Tree node	Node depth level for custom styling
`[data-expanded]`	Attribute	Tree node	Boolean attribute for expanded state
`[data-selected]`	Attribute	Tree node	Boolean attribute for selection state

Blue Default classes Yellow Custom prop classes Green Data attributes

Styling Examples

CSS Customization

CSS Architecture

🏗️ CSS Architecture

The component uses a predictable class hierarchy with default classes, custom prop classes, and data attributes.

🎯 Targeting Strategy

Default classes: Always available for basic styling
Props classes: Component-specific customization
Data attributes: State-based styling

⚡ Performance Notes

Use CSS custom properties (variables) for dynamic theming without JavaScript overhead.

📱 Responsive Design

All classes work with media queries and responsive utilities.

🌈 Custom Themes

Create your own themes with CSS custom properties

Theme Examples

🌙 Dark Theme

🎨 Colorful Theme

Theme Implementation

Custom Themes

Theming Guide

🎨 CSS Custom Properties

Use CSS variables for consistent, maintainable themes that can be changed dynamically.

🔄 Dynamic Theming

Change themes at runtime by updating CSS custom property values with JavaScript.

🌓 Dark Mode Support

Use prefers-color-scheme media query to automatically switch themes based on user preferences.

✨ Animation & Transitions

Add smooth transitions and micro-interactions to enhance user experience.

📐 Layout Customization

Control spacing, indentation, and sizing with custom properties for consistent scaling.

📱 Responsive Design

Mobile-friendly styling and responsive behaviors

Responsive Features

✅ Touch-Friendly Interactions

Minimum 44px touch targets, appropriate spacing for mobile devices

✅ Responsive Typography

Scales appropriately across devices with fluid typography

✅ Flexible Layout

Adapts to container width, works in sidebars and full-width layouts

✅ Keyboard Navigation

Full keyboard support with visible focus indicators

Responsive CSS

Responsive Styling

Mobile Optimization

📱 Mobile-First Approach

Styles start with mobile-optimized defaults and enhance for larger screens.

👆 Touch Optimization

44px minimum touch targets
Appropriate spacing between interactive elements
Clear visual feedback for touches

♿ Accessibility

Respect user motion preferences
High contrast mode support
Keyboard navigation indicators
Screen reader compatibility

⚡ Performance

Efficient CSS that doesn't impact rendering performance on mobile devices.