shadcn-svelte-extras

Not a port

Unlike many component libraries, shadcn-svelte-extras is not a port of another project. While it maintains compatibility with shadcn-svelte, it is not limited by an upstream project's constraints and can implement new features independently.

Composability

Every component is designed to be composable. If a component's default behavior doesn't fit your project, the architecture allows you to customize and compose it to meet your specific needs without being forced into a rigid structure.

Quality

Components are built to match the standard of the original shadcn/ui, focusing on being beautiful, performant, and highly composable.

A TreeView is constructed using the following component hierarchy:

• TreeView.Root: The top-level container.
• TreeView.Folder: A container for nested items (files or other folders).
• TreeView.File: A leaf node representing a single file.

The FileDropZone follows a compound component pattern. The structure is as follows:

• FileDropZone.Root: The provider/wrapper for the drop zone state.
• FileDropZone.Trigger: The element that acts as the drop target or trigger.
• FileDropZone.Textarea: A specialized textarea component that allows users to paste or drag and drop files directly into it.

You can customize the trigger text by passing children to FileDropZone.Trigger.

<script lang="ts">
	import { FileDropZone } from '$lib/components/ui/file-drop-zone';
</script>

<FileDropZone.Root>
	<FileDropZone.Trigger>Upload files</FileDropZone.Trigger>
</FileDropZone.Root>

The Password component follows a specific composition pattern. You can mix and match sub-components to achieve different UI requirements:

• Password.Root: The top-level provider that manages the password state.
• Password.Input: The input field container.
• Password.Copy: A button inside Password.Input to copy the secret to the clipboard.
• Password.ToggleVisibility: A button inside Password.Input to show/hide the password text.
• Password.Strength: A meter that displays password strength based on zxcvbn-ts.

You can trigger the edit mode of a Rename component in two ways:

1. Use the <Rename.Edit /> component within a Rename.Provider.
2. Set the mode prop to 'edit' on the Rename.Root component.

The Chat component follows a specific hierarchical structure. To build a standard chat interface, follow this composition pattern:

• Chat.List: The main container for the chat history.
  • Chat.Bubble: A single message container.
    • Chat.BubbleAvatar: The avatar container for the sender.
      • Chat.BubbleAvatarImage: The image element for the avatar.
      • Chat.BubbleAvatarFallback: A fallback element (like initials) shown if the image fails to load.
    • Chat.BubbleMessage: The container for the actual text content of the message.

A Field Set is built using a specific hierarchy of components. You can include a title to label the group. The standard composition structure is:

• FieldSet.Root: The top-level container.
  • FieldSet.Title: The label/heading for the field set.
  • FieldSet.Content: The container for the input fields.
  • FieldSet.Footer: The container for actions (e.g., buttons).

Build the UnderlineTabs component using the following structure. The Root component manages the active value, while List and Trigger handle the navigation, and Content handles the display of the tab panels.

UnderlineTabs.Root
├── UnderlineTabs.List
│   └── UnderlineTabs.Trigger
└── UnderlineTabs.Content

The Star Rating component follows a specific composition structure:

• StarRating.Root: The main container that manages the rating state.
• StarRating.Star: The individual star element rendered within the Root's children snippet.

A standard Number Field is built using the following component hierarchy:

• NumberField.Root: The top-level provider.
  • NumberField.Group: A container for the controls.
    • NumberField.Decrement: The button to decrease the value.
    • NumberField.Input: The text input for the value.
    • NumberField.Increment: The button to increase the value.

The ImageCropper follows a specific component hierarchy. Ensure your implementation follows this structure to function correctly:

• ImageCropper.Root (Main Container)
  • ImageCropper.UploadTrigger (Triggers the file selection)
    • ImageCropper.Preview (The visual trigger/preview)
  • ImageCropper.Dialog (The cropping modal)
    • ImageCropper.Cropper (The cropping UI)
    • ImageCropper.Controls (Action buttons)
      • ImageCropper.Crop (Confirm crop action)
      • ImageCropper.Cancel (Close modal without saving)