Melt UI

Melt UI is a next-generation library of headless components designed for Svelte. Its core value propositions include:

• Headless Components: Components are fully customizable with zero styling opinions, giving you complete control over the UI.
• Type Safety: Built with TypeScript to provide a high-quality developer experience.
• Accessibility: Components follow WAI-ARIA guidelines and include built-in keyboard navigation.
• Svelte 5 Ready: Fully compatible with Svelte 5, including support for runes and other modern Svelte features.

The Tree component provides the following capabilities:

• Keyboard navigation: Full support for navigating the hierarchy via keyboard.
• Multi-selection mode: Ability to select multiple items within the tree.
• Smart focus management: Automatic handling of focus as users navigate.
• Optional expand on click: Configurable behavior for expanding nodes.
• Typeahead: Highlight items by typing their names.

The FileUpload functionality includes the following capabilities:

• Drag and drop support: Users can drop files directly onto the designated dropzone.
• Multiple file support: Ability to handle more than one file at a time.
• File type validation: Restrict uploads to specific file formats.
• File size limits: Enforce maximum file size constraints.

The PinInput component provides the following capabilities:

• Keyboard navigation: Optimized for sequence entry.
• Multiple entry validation types: Supports various validation logic for the PIN sequence.
• Paste support: Allows users to paste a full sequence into the input.
• Mobile optimization: Automatically triggers the appropriate keyboard type on mobile devices.

The Avatar implementation includes the following capabilities:

• Automatic & manual control: Manage image rendering states programmatically.
• Flexible Fallback: The fallback mechanism supports any children elements.
• Anti-flicker: Option to delay fallback rendering to prevent visual flashes during image loading.

The Radio Group component includes the following built-in capabilities:

• Keyboard navigation: Full support for navigating between options via keyboard.
• Smart focus management: Automatically handles focus states for accessibility.
• Orientation: Supports both horizontal and vertical layouts.
• RTL support: (Incoming feature)

The Slider component includes the following built-in capabilities:

• Keyboard navigation: Full support for controlling the value via keyboard.
• Smart focus management: Handles focus states appropriately.
• Orientation: Supports both horizontal and vertical orientations.
• Data attributes: Provides attributes like data-dragging to help with styling transitions during interaction.

The Tabs component provides the following built-in capabilities:

• Keyboard navigation: Full support for navigating between tabs using keyboard inputs.
• Smart focus management: Automatically handles focus transitions when switching tabs.
• Orientation: Supports both horizontal and vertical layouts.
• RTL support: (Incoming feature)

Some Melt builders use MaybeMultiple props, where the expected type changes based on an accompanying boolean prop (e.g., multiple).

For example, a FileUpload builder with a selected prop and a multiple prop:

• If multiple is false or undefined: selected accepts a MaybeGetter<File> (standard reactive value).
• If multiple is true: selected accepts an IterableProp<File>, which can be a SvelteSet or a MaybeGetter<Iterable<File>>.

A standard Starlight project follows this directory structure:

• src/content/docs/: The primary location for documentation. Starlight automatically exposes .md or .mdx files in this directory as routes based on their filenames.
• src/assets/: Place images here to embed them in Markdown using relative links.
• public/: Store static assets that do not need processing, such as favicons.
• astro.config.mjs: The main configuration file for Astro and Starlight.
• package.json: Defines project dependencies and scripts.

.
├── public/
├── src/
│   ├── assets/
│   ├── content/
│   │   ├── docs/
│   │   └── config.ts
│   └── env.d.ts
├── astro.config.mjs
├── package.json
└── tsconfig.json