` tag is auto-generated by Shiki; target utility classes with: `[&>pre]:myClassHere`.

## Programmatic Usage


	
This use case falls outside the scope of Skeleton. The following is provided merely as guidance.


In some cases you may not have direct access to the source code, such as content from a blog posts or CMS pages. In fact the code may even come pre-baked with surrounding `
` or `` elements. For this, you'll need to follow the general steps below. Specific implementation may differ based on your app and meta-framework.

1. Query all `
` or `` blocks using Javascript tools like `document.querySelectorAll()`. Be as specific as possible.
2. Ensure you have a clean instance of the source code itself, with no extra markup injected within.
3. Use Shiki's [codeToHtml](https://shiki.style/guide/install#shorthands) feature to parse the code as styled HTML markup.
4. Then append each instance of the code blocks in your DOM.

## Custom Themes

Shiki provides support for generating a custom highlighter theme:

- [Loading Custom Themes](https://shiki.style/guide/load-theme)
- [List of Bundled Themes](https://shiki.style/themes)

Shiki theme values can be defined using Skeleton custom theme properties, such as `rgba(--color-primary-500)`.

## Accessibility

See [Salma Alam-Naylor's](https://whitep4nth3r.com/about/) guidelines for [creating accessible code blocks](https://whitep4nth3r.com/blog/how-to-make-your-code-blocks-accessible-on-your-website/) that meet WGAC standards.

---

# Iconography
Learn how to integrate Lucide for iconography in Skeleton.


	Skeleton takes an agnostic approach to icons, meaning you can use any combination of SVGs, emoji, unicode, or dedicated icon libraries.
	Mix and match to fulfill your project's unique requirements.


## Lucide


	

		
		
		
	


If you're looking for an opinionated solution, Skeleton recommends [Lucide](https://lucide.dev/). This provides a huge selection of icons that are available to all popular frameworks and feature a clean and modern style. All code examples in this documentation site implement Lucide, but feel free to replace with any alternative.

## Installation

Follow the official instructions to install [Lucide for React](https://lucide.dev/guide/packages/lucide-react).

## Usage

```tsx

const App = () => {
	return ;
};

```

## Alternatives

- [Radix Icons](https://www.radix-ui.com/icons) - features modern styles and a large selection, supports React only.
- [Iconify](https://iconify.design/) - provides a vast array of icon sets supported by popular icon libraries.
- [Font Awesome](https://fontawesome.com/) - provides a huge variety of icons in their free tier.
- [HeroIcons](https://heroicons.com/) - from the makers of Tailwind CSS, supports React and Vue.
- [SimpleIcons](https://simpleicons.org/) - provides an excellent selection of brand icons.

---

# Popover
Learn how to integrate dynamic and interactive popover interfaces.

## Floating UI React


	
		Floating UI →
	
	
		Floating UI React →
	



	[Floating UI](https://floating-ui.com/) provides primitives for creating tooltips, popovers, dropdown menus, hover cards, modal dialogs,
	select menus, comboboxes, and more. Instead of providing pre-built components, this guide will introduce the fundamentals of [Floating UI
	React](https://floating-ui.com/docs/react). This provides an open-ended solution for creating your own popover features and components for
	any form factor - while pairing with Skeleton's design system and components.


---

## Learn the Basics

If this is your first time using Floating UI, start here:

- [Floating UI Tutorial](https://floating-ui.com/docs/tutorial) - covers the basics of using native Javascript.
- [Floating UI React Tutorial](https://floating-ui.com/docs/react) - covers the basics of using the React wrapper.

### Imports

Floating UI React exposes all required Floating UI middleware, types, etc.

```ts
```

### Making Elements Float

You'll need a dedicated [CSS class](https://floating-ui.com/docs/tutorial#making-the-tooltip-float) to apply common styles to all floating elements. Apply the following in your global stylesheet. We'll use the following class convention for all Skeleton examples.

```css
.floating {
	width: max-content;
	position: absolute;
	top: 0;
	left: 0;
}
```

### Z-Index Stacking

Please be aware that Floating UI does not take an opinionated stance on [z-index stacking](https://floating-ui.com/docs/misc#z-index-stacking). This means that if a floating element is occluded by another element in the z-axis, you must handle this directly.

### Middleware

Make sure you're familiar all available [Floating UI Middleware](https://floating-ui.com/docs/middleware), which provides modules for customizing the look and feel of popovers.

---

## Examples

Floating UI React provides an extensive set of headless [React examples](https://floating-ui.com/docs/react-examples). We'll use these as the foundation for at the following set of examples that fully integrate Skeleton. See the official Floating UI React documentation for a complete [API Reference](https://floating-ui.com/docs/usefloating).

### Popover

Triggers an anchored popover when you click the trigger element.

```react
// Based On: https://floating-ui.com/docs/popover

	useFloating,
	autoUpdate,
	offset,
	flip,
	shift,
	arrow,
	useClick,
	useDismiss,
	useRole,
	useInteractions,
	FloatingFocusManager,
	FloatingArrow
} from '@floating-ui/react';

	const [isOpen, setIsOpen] = useState(false);

	const arrowRef = useRef(null);
	const { refs, floatingStyles, context } = useFloating({
		open: isOpen,
		onOpenChange: setIsOpen,
		middleware: [
			offset(10),
			flip(),
			shift(),
			arrow({
				element: arrowRef
			})
		],
		placement: 'top',
		whileElementsMounted: autoUpdate
	});

	const click = useClick(context);
	const dismiss = useDismiss(context);
	const role = useRole(context);

	const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]);

	return (
		<>
			
			
				Click Me
			
			{isOpen && (
				
					
					
					

						

							

								
Popover Example
								 setIsOpen(false)}>
									
								
							
							

								

									This will display a basic popover with a header and body. This also includes a title, description, and close button.
								
							
						
						
						
					
				
			)}
		
	);
};

```

### Tooltip

Triggers an anchored popover when you hover the trigger element.

```react
// Based On: https://floating-ui.com/docs/tooltip

	const [isOpen, setIsOpen] = useState(false);

	const { refs, floatingStyles, context } = useFloating({
		open: isOpen,
		onOpenChange: setIsOpen,
		middleware: [offset(10), flip(), shift()],
		placement: 'top',
		whileElementsMounted: autoUpdate
	});

	const hover = useHover(context, { move: false });
	const focus = useFocus(context);
	const dismiss = useDismiss(context);
	const role = useRole(context, { role: 'tooltip' });

	const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, role]);

	return (
		<>
			
			
				Hover Me
			
			
			{isOpen && (
				

					This is a tooltip.
				
			)}
		
	);
};

```

### Combobox

Triggers an anchored popover list on search. Includes autocomplete with automatic selection.

```react
// Based On: https://codesandbox.io/p/sandbox/fragrant-water-bsuirj?file=%2Fsrc%2FApp.tsx%3A1%2C1-168%2C2

	autoUpdate,
	size,
	offset,
	flip,
	useId,
	useDismiss,
	useFloating,
	useInteractions,
	useListNavigation,
	useRole,
	FloatingFocusManager,
	FloatingPortal
} from '@floating-ui/react';

// prettier-ignore
const data = [
	"Alfalfa Sprouts", "Apple", "Apricot", "Artichoke", "Asian Pear", "Asparagus", "Atemoya", "Avocado", "Bamboo Shoots", "Banana", "Bean Sprouts", "Beans", "Beets", "Belgian Endive", "Bell Peppers", "Bitter Melon", "Blackberries", "Blueberries", "Bok Choy", "Boniato", "Boysenberries", "Broccoflower", "Broccoli", "Brussels Sprouts", "Cabbage", "Cactus Pear", "Cantaloupe", "Carambola", "Carrots", "Casaba Melon", "Cauliflower", "Celery", "Chayote", "Cherimoya", "Cherries", "Coconuts", "Collard Greens", "Corn", "Cranberries", "Cucumber", "Dates", "Dried Plums", "Eggplant", "Endive", "Escarole", "Feijoa", "Fennel", "Figs", "Garlic", "Gooseberries", "Grapefruit", "Grapes", "Green Beans", "Green Onions", "Greens", "Guava", "Hominy", "Honeydew Melon", "Horned Melon", "Iceberg Lettuce", "Jerusalem Artichoke", "Jicama", "Kale", "Kiwifruit", "Kohlrabi", "Kumquat", "Leeks", "Lemons", "Lettuce", "Lima Beans", "Limes", "Longan", "Loquat", "Lychee", "Madarins", "Malanga", "Mandarin Oranges", "Mangos", "Mulberries", "Mushrooms", "Napa", "Nectarines", "Okra", "Onion", "Oranges", "Papayas", "Parsnip", "Passion Fruit", "Peaches", "Pears", "Peas", "Peppers", "Persimmons", "Pineapple", "Plantains", "Plums", "Pomegranate", "Potatoes", "Prickly Pear", "Prunes", "Pummelo", "Pumpkin", "Quince", "Radicchio", "Radishes", "Raisins", "Raspberries", "Red Cabbage", "Rhubarb", "Romaine Lettuce", "Rutabaga", "Shallots", "Snow Peas", "Spinach", "Sprouts", "Squash", "Strawberries", "String Beans", "Sweet Potato", "Tangelo", "Tangerines", "Tomatillo", "Tomato", "Turnip", "Ugli Fruit", "Water Chestnuts", "Watercress", "Watermelon", "Waxed Beans", "Yams", "Yellow Squash", "Yuca/Cassava", "Zucchini Squash"
];

interface ItemProps {
	children: React.ReactNode;
	active: boolean;
}

/** Component: Option */
const Item = forwardRef>(function Item({ children, active, ...rest }, ref) {
	const id = useId();
	return (
		

			{children}
		
	);
});

/** Component: Autocomplete */
function AutoComplete() {
	const [open, setOpen] = useState(false);
	const [inputValue, setInputValue] = useState('');
	const [activeIndex, setActiveIndex] = useState(null);

	const listRef = useRef>([]);

	const { refs, floatingStyles, context } = useFloating({
		whileElementsMounted: autoUpdate,
		open,
		onOpenChange: setOpen,
		middleware: [
			offset(10),
			flip({ padding: 10 }),
			size({
				apply({ rects, availableHeight, elements }) {
					Object.assign(elements.floating.style, {
						width: `${rects.reference.width}px`,
						maxHeight: `${availableHeight}px`
					});
				},
				padding: 10
			})
		]
	});

	const role = useRole(context, { role: 'listbox' });
	const dismiss = useDismiss(context);
	const listNav = useListNavigation(context, {
		listRef,
		activeIndex,
		onNavigate: setActiveIndex,
		virtual: true,
		loop: true
	});

	const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([role, dismiss, listNav]);

	function onChange(event: React.ChangeEvent) {
		const value = event.target.value;
		setInputValue(value);

		if (value) {
			setOpen(true);
			setActiveIndex(0);
		} else {
			setOpen(false);
		}
	}

	const items = data.filter((item) => item.toLowerCase().startsWith(inputValue.toLowerCase()));

	return (
		<>
			
			
				{open && (
					
						

							{items.length === 0 && 
No Results Found.
}
							{items.map((item, index) => (
								
									{item}
								
							))}
						
					
				)}
			
		
	);
}

// Page Interface
	return ;
};

```

### Modal

Generates any form of modal or dialog that require a user's immediate attention.

```react
// Based On: https://floating-ui.com/docs/dialog

	useFloating,
	useClick,
	useDismiss,
	useRole,
	useInteractions,
	useId,
	FloatingOverlay,
	FloatingFocusManager,
	useTransitionStyles
} from '@floating-ui/react';

	const [isOpen, setIsOpen] = useState(false);

	const { refs, context } = useFloating({
		open: isOpen,
		onOpenChange: setIsOpen
	});

	// https://floating-ui.com/docs/useTransition#usetransitionstatus
	const { isMounted, styles } = useTransitionStyles(context, {
		duration: 200,
		initial: {
			opacity: 0,
			transform: 'translateY(50px)'
		}
	});

	const click = useClick(context);
	const dismiss = useDismiss(context, {
		outsidePressEvent: 'mousedown'
	});
	const role = useRole(context);

	const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]);

	const labelId = useId();
	const descriptionId = useId();

	return (
		<>
			
			
				Open Modal
			
			{isMounted && (
				// Backdrop
				
					
						
						

							

								
Modal Example
							
							

								

									Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, ab adipisci. Libero cumque sunt quis error veritatis amet,
									expedita voluptatem. Quos repudiandae consequuntur voluptatem et dicta quas, reprehenderit velit excepturi?
								
							
							
						
					
				
			)}
		
	);
};

```

---

## Additional Tips

### Reusable Components

See tips for convert the primitive examples above into reusable components in your local project.

- [Popover Component](https://floating-ui.com/docs/popover#reusable-popover-component)
- [Tooltip Component](https://floating-ui.com/docs/tooltip#reusable-tooltip-component)
- [Combobox Component](https://codesandbox.io/p/sandbox/fragrant-water-bsuirj)
- [Modal Component](https://floating-ui.com/docs/dialog#reusable-dialog-component)
- [More...](https://floating-ui.com/docs/react-examples#other)

### Accessibility

When implementing popovers, make sure to account for accessibility and keyboard interactions. Floating UI React provides a number of hooks and components to help facilitate all requirements.


	
		ARIA APG Patterns →
	


- [Tooltip Guidelines](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/)
- [Combobox Guidelines](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/)
- [Modal Guidelines](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)
- [Alert Dialog Guidelines](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/)
- [Alert Guidelines](https://www.w3.org/WAI/ARIA/apg/patterns/alert/)
- [Listbox Guidelines](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/)

---

## Native Browser APIs

Skeleton will always favor native browser APIs over third-party libraries such as Floating UI React. The following is a list of current and upcoming incoming APIs we will aim to support in the future, but are not quite standardized cross-browser yet.

- [Dialog Cookbook](/docs/guides/cookbook/dialog)
- [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
- [CSS Anchoring Position](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning)

---

# Toasts
Display small notifications pinned to the edge of the screen.


	[React-Hot-Toast](https://react-hot-toast.com/) provides a simple all-in-one solution for Toast notification. Custom toast templates can
	be implemented as using either JSX or React components, making it trivial to implement Skeleton and Tailwind utility classses.



	
		Documentation
	
	
		GitHub
	


## Installation

```console
npm install react-hot-toast
```

## Create a Toast

For most users we recommend the use of custom toast templates, which enable Tailwind styles.

```react

// Components ---

	return (
		

			
Hello World! 👋
		
	);
};

	return (
		

			
Uh oh, something went wrong.
		
	);
};

	return (
		

			
The task was was completed successfully!
			 toast.dismiss(settings?.id)}>
				×
			
		
	);
};

// Example Page ---

	// Use `toast.custom()` to trigger a toast with a custom template.
	// Then supply the template as either JSX or a component.
	function triggerInfo() {
		toast.custom(() => , { duration: 5000 });
	}
	function triggerError() {
		toast.custom(() => , { duration: 5000 });
	}
	function triggerSuccess() {
		toast.custom((t) => , { duration: 2000 });
	}

	return (
		<>
			
			

				
					Toast: Info
				
				
					Toast: Error
				
				
					Toast: Success
				
			

			
			
		
	);
};

```

## API Reference

Refer to the [official documentation](https://react-hot-toast.com/docs) for a complete API reference.

---