Svelte Treeview Showcase

ST01 🎨 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

ST02 🔧 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.

ST03 🌈 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.

ST04 📱 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.

ST05 🎯 Drag & Drop Styling (v4.5.0+)

CSS classes for drag-drop visual feedback, drop zones, and touch support

Class Reference

Class	Category	Description
`.ltree-dragover-highlight`	Drag Over	Simple border highlight on drag-over target
`.ltree-dragover-glow`	Drag Over	Glow effect with arrow indicators for drop positions
`.ltree-glow-above`	Glow Position	Green glow on top edge (insert above)
`.ltree-glow-below`	Glow Position	Orange glow on bottom edge (insert below)
`.ltree-glow-child`	Glow Position	Purple glow on right edge (insert as child)
`.ltree-drop-placeholder`	Empty Tree	Container for empty tree drop zone
`.ltree-drop-placeholder-content`	Empty Tree	Content inside empty tree placeholder
`.ltree-root-drop-zone`	Root Drop	Drop zone at bottom of non-empty trees
`.ltree-touch-ghost`	Touch	Ghost element that follows finger during touch drag
`.ltree-loading-overlay`	Loading	Semi-transparent overlay during isLoading=true

Tip: Use dragOverNodeClass="ltree-dragover-glow" to enable the glow mode with arrow indicators.

Styling Examples

Drag & Drop Customization

Implementation Guide

🎯 Glow Mode

Use dragOverNodeClass="ltree-dragover-glow" for position-aware visual feedback with directional arrows.

📱 Touch Ghost

Customize the ghost element that follows the user's finger during touch drag operations using CSS variables.

📦 Empty Tree Drop

Use the dropPlaceholder snippet to create custom drop targets for empty trees.

⏳ Loading State

The isLoading prop shows an overlay - customize it with CSS.

🎨 SCSS Customization

Override SCSS variables before importing styles for deep customization of drop indicators and arrows.