Describe the feature in detail (code, mocks, or screenshots encouraged)

I'm using a Dialog with a simple form. I had to change the AlertDialogAction with a simple button to allow the form to be submitted.

How to close the dialog after a successful submission?

What type of pull request would this be?

Enhancement

Provide relevant links or additional information.

No response

Change Type

Addition

Proposed Changes

Apologies if I missed it in the docs, but is there a section on what to do if components are updated? Since it's a CLI orientated system that essentially just imports components into your project -

• What would you do if a bug is fixed or features are added to a particular component? Especially if you have made any custom modifications.
  • Is there some way to diff it?

Typically CLI's should just return the contents of --help (it already does in our case) without any errors

Current state:

Usage: shadcn-svelte [options] [command]

Add shadcn-svelte components to your project

Options:
  -v, --version        display the version number
  -h, --help           display help for command

Commands:
  init [options]       Configure your SvelteKit project.
  add [components...]  add components to your project
  help [command]       display help for command
 ERROR  Command failed with exit code 1: shadcn-svelte

pnpm: Command failed with exit code 1: shadcn-svelte
    at makeError (/home/koala/.volta/tools/image/packages/pnpm/lib/node_modules/pnpm/dist/pnpm.cjs:24242:17)
    at handlePromise (/home/koala/.volta/tools/image/packages/pnpm/lib/node_modules/pnpm/dist/pnpm.cjs:24813:33)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Object.handler [as dlx] (/home/koala/.volta/tools/image/packages/pnpm/lib/node_modules/pnpm/dist/pnpm.cjs:223404:7)
    at async /home/koala/.volta/tools/image/packages/pnpm/lib/node_modules/pnpm/dist/pnpm.cjs:232806:21
    at async main (/home/koala/.volta/tools/image/packages/pnpm/lib/node_modules/pnpm/dist/pnpm.cjs:232773:34)
    at async runPnpm (/home/koala/.volta/tools/image/packages/pnpm/lib/node_modules/pnpm/dist/pnpm.cjs:233028:5)
    at async /home/koala/.volta/tools/image/packages/pnpm/lib/node_modules/pnpm/dist/pnpm.cjs:233020:7

Edit: It seems like this only happens with pnpx

This issue will be used to track the identification and integration of a temporary Calendar component. See #95 for more details.

This component should obviously come before #98 - as it will be used to create that component (I think).

Currently considering:

ubermanu/louisette

Current Behavior

This is not a bug persay but more a discussion around the topic of whether DialogContent should include the DialogPrimitive.Close?

I would rather this be moved to a DialogClose.svelte component and then you can pass the DialogClose along with the content. So something like

...
<DialogContent>
    <DialogClose />
    <div>Test</div>
    <DialogFooter>
        <Button type="submit">Save changes</Button>
    </DialogFooter>
</DialogContent>
...

In addition the DialogClose should allow you to override the content, if, for example, you want to use a different icon

So the DialogClose.svelte could be something like

<script lang="ts">
	import { cn } from '$lib/utils';
	import { X } from 'lucide-svelte';
	import { Dialog as DialogPrimitive } from 'radix-svelte';

	let className: string | undefined | null = undefined;
	export { className as class };
</script>

<DialogPrimitive.Close
	class={cn(
		'absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground',
		className
	)}
	{...$$restProps}
>
	<slot>
		<X className="h-4 w-4" />
	</slot>
	<span class="sr-only">Close</span>
</DialogPrimitive.Close>

Expected Behavior

The freedom to decide if I want to have a close icon in my dialog progmatically on a dialog-per-dialog basis as well as the ability to decide on the close icon to use

Steps To Reproduce

See DialogContent.svelte

Link to Reproduction / Stackblitz

No response

More Information

No response

Current Behavior

When running any command, an error (see "more information") gets thrown.

Expected Behavior

No response

Steps To Reproduce

1. Execute any command using shadcn-svelte CLI. (Windows 11, Node v18.16.0)

Link to Reproduction / Stackblitz

No response

More Information

Error from terminal:

pnpx shadcn-svelte add card
.../Local/pnpm/store/v3/tmp/dlx-22404    |  +67 +++++++
.../Local/pnpm/store/v3/tmp/dlx-22404    | Progress: resolved 67, reused 67, downloaded 0, added 67, done
Running the following command will overwrite existing files.
Make sure you have committed your changes before proceeding.

node:internal/errors:490
    ErrorCaptureStackTrace(err);
    ^

Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only URLs with a scheme in: file and data are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'
    at new NodeError (node:internal/errors:399:5)
    at throwIfUnsupportedURLScheme (node:internal/modules/esm/resolve:1059:11)
    at defaultResolve (node:internal/modules/esm/resolve:1135:3)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:838:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ESMLoader.import (node:internal/modules/esm/loader:525:22)
    at importModuleDynamically (node:internal/modules/esm/translators:110:35)
    at importModuleDynamicallyCallback (node:internal/process/esm_loader:35:14)
    at getConfig (file:///C:/Users/Nils/AppData/Local/pnpm/store/v3/tmp/dlx-22404/node_modules/.pnpm/[email protected][email protected]/node_modules/shadcn-svelte/dist/index.js:582:37) {
  code: 'ERR_UNSUPPORTED_ESM_URL_SCHEME'
}

Node.js v18.16.0
 ERROR  Command failed with exit code 1: shadcn-svelte add card

pnpm: Command failed with exit code 1: shadcn-svelte add card
    at makeError (C:\Users\Nils\AppData\Local\node\corepack\pnpm\8.6.0\dist\pnpm.cjs:24242:17)
    at handlePromise (C:\Users\Nils\AppData\Local\node\corepack\pnpm\8.6.0\dist\pnpm.cjs:24813:33)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Object.handler [as dlx] (C:\Users\Nils\AppData\Local\node\corepack\pnpm\8.6.0\dist\pnpm.cjs:223506:7)
    at async C:\Users\Nils\AppData\Local\node\corepack\pnpm\8.6.0\dist\pnpm.cjs:232908:21
    at async main (C:\Users\Nils\AppData\Local\node\corepack\pnpm\8.6.0\dist\pnpm.cjs:232875:34)
    at async runPnpm (C:\Users\Nils\AppData\Local\node\corepack\pnpm\8.6.0\dist\pnpm.cjs:233130:5)
    at async C:\Users\Nils\AppData\Local\node\corepack\pnpm\8.6.0\dist\pnpm.cjs:233122:7

This issue will be used to track the identification and integration of a temporary DropdownMenu component. See #95 for more details.

Right now I'm considering the following options:

ubermanu/louisette
Pros: Supports submenus
Cons: Early in development

grail-ui/grail-ui
Pros: Close to a 1.0 RC?
Cons: Submenu not currently supported (in touch with maintainers about it so we'll see)

The hex to color channel tool is pretty tight on mobile and needs some breathing room to align with the rest of the UI.

This issue will be used to track the identification and integration of a temporary Popover component. See #95 for more details.

Currently considering:

grail-ui/grail-ui

The issue with this is that if someone already has the button installed and has customized it, this would override that customization. I think checking first to see if the button exists and if not, installing it, otherwise, just install the alert dialog.

Maybe I'm doing it wrong? But the space that it occupies remains empty, not showing the fallback's content.

<script lang="ts">
  import { Avatar, AvatarFallback, AvatarImage } from "$components/ui/avatar";
</script>
<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn">
    <AvatarFallback>CN</AvatarFallback>
  </AvatarImage>
</Avatar>

Current Behavior

I tried to add component by following command but error occured.
npx shadcn-svelte add (component)

Error

file:///Users/xxx/.npm/_npx/6326117962061f1d/node_modules/shadcn-svelte/dist/index.js:1001
      (component) => components.includes(component.component)
                                ^

TypeError: components.includes is not a function
    at file:///Users/xxx/.npm/_npx/6326117962061f1d/node_modules/shadcn-svelte/dist/index.js:1001:33
    at Array.filter (<anonymous>)
    at Command.<anonymous> (file:///Users/xxx/.npm/_npx/6326117962061f1d/node_modules/shadcn-svelte/dist/index.js:1000:50)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

I checked the program, and found that this command was broken because of following commit.
ae47aa6

Expected Behavior

Add component files by that command.

Steps To Reproduce

1. Executing npx shadcn-svelte add accordion.
2. Error occured.

Link to Reproduction / Stackblitz

No response

More Information

No response

Describe the feature in detail (code, mocks, or screenshots encouraged)

The original project have Select, i think that a list of options its something basic to build forms.

What type of pull request would this be?

New Feature

Provide relevant links or additional information.

No response

-v is reading the version number from the package.json in the user's CWD, not the CLI's package.json.

Describe the feature in detail (code, mocks, or screenshots encouraged)

I see that you're doing this

export { className as class };

To get classes you can use $$restProps.class, like so:

class={cn("", $$restProps.class)}

What type of pull request would this be?

Enhancement

Provide relevant links or additional information.

No response

Current Behavior

Setting rows attribute on Textarea does nothing because its height is overwritten by h-20 class.

https://github.com/huntabyte/shadcn-svelte/blob/0dd34440e2c61b40b6073ea5f35ce08d6834decd/apps/www/src/lib/components/ui/textarea/Textarea.svelte#LL13C13-L13C13

Sure, I can set a different h-* but there are a few utilities that auto-increase textarea height based on its content and they use rows for that.

Input

Input throws an error on page load. Only occurs when the input is alone on the page.

<script lang="ts">
  import { Input } from "$components/ui/input";
</script>
<Input type="email" placeholder="email" />

Input error:

Slider

Slider throws 2 errors. The first one is the same error as Input on page load. The second error is thrown on mouse release after dragging the slider's knob.

<script lang="ts">
  import { Slider } from "$components/ui/slider";
</script>
<Slider value={50} max={100} step={1} class="max-w-[70%]" />

Slider error:

Current Behavior

I have this layout shift when using the AlertDialog component:

Expected Behavior

No layout shift

Steps To Reproduce

1. Clone the repo and install deps
2. Reload the page the button shifts after reload

Link to Reproduction / Stackblitz

https://github.com/omar2205/l-s-rep

More Information

No response

When running pnpx shadcn-svelte init, the following message is logged:

No parser and no filepath given, using 'babel' the parser now but this will throw an error in the future. Please specify a parser or a filepath so one can be inferred.

Need to specify a parser in the prettier config so that this doesn't throw when it updates in the future.

I really like this components, but for the general components like buttons this works. With something like Alert, I don't have access to any events or the ability to close it.

I have this code

<script>
// ...
  const dispatch = createEventDispatcher()
  const toggle_is_open = () => is_open = false
  const handle_ok = () => {
    dispatch('ok')
    is_open = false
  }
</script>

<AlertDialog bind:open={is_open}>

I've been trying to get if the user actually pressed yes with no luck. The current way is it just closes the dialog without firing any events.
So I had to use a custom button to get on:click to work but I have this bug where I can't seem to close the AlertDialog.

Current Behavior

When opening an alert dialog and a scrollbar exists, the scrollbar will disappear and cause all existing page content to shift the size of the scrollbar.

I've tested this on Microsoft Edge and the issue occurs.
It doesn't appear to occur using Chrome.

Expected Behavior

Existing background content shouldn't move when launching the alert dialog.

Steps To Reproduce

Using Microsoft Edge Browser (Version 114.0.1823.41)
You can compare the original shadcdn to the svelte version, in the original, this doesn't occur:
Original Alert Dialog: https://ui.shadcn.com/docs/components/alert-dialog
Svelte Alert Dialog: https://www.shadcn-svelte.com/docs/components/alert-dialog

Watch the background content when you click the 'Show Dialog' button.

The same is also occurring for the Dialog and Sheet components.
Dialog: https://www.shadcn-svelte.com/docs/components/dialog
Sheet: https://www.shadcn-svelte.com/docs/components/sheet

Link to Reproduction / Stackblitz

No response

More Information

No response

Current Behavior

Today it's not possible to set "data-sveltekit-preload-data" kind of attributes on a Button.

Expected Behavior

How could it support it?

Steps To Reproduce

No response

Link to Reproduction / Stackblitz

No response

More Information

No response

• #10
• #11
• #14

This issue will be used to track the identification and integration of a temporary Toast component. See #95 for more details.

Current Behavior

The example in the docs has this

<DialogTrigger>
    <Button variant="outline">Edit Profile</Button>
</DialogTrigger>
...

This results in a button element with a button element, as dialogTrigger creates a button. This results in a confusing tabbing behavious.

The actual code should be something like

<DialogTrigger class={buttonVariants({ variant: 'default' })}>
    <Icons.plus class="mr-2 h-4 w-4" />
    Click me
</DialogTrigger>

The docs should be updated to reflec this

Expected Behavior

Only one button element should exist to launch the dialog

Steps To Reproduce

1. Create a dialog using the example in the docs
2. View the code to see a button within a button
3. Attempt to tab over elements

Link to Reproduction / Stackblitz

No response

More Information

No response

Current Behavior

I have this component inside a form:

<Checkbox id="terms" name="terms" bind:checked required />.

I get the following error when trying to submit the form while checked = false:
An invalid form control with name='terms' is not focusable.

Expected Behavior

The browser should focus the checkbox and tell the user, that it is required to be checked.

Steps To Reproduce

Use this component inside a form.

Link to Reproduction / Stackblitz

No response

More Information

No response

This issue will be used to track the identification and integration of a temporary ScrollArea component. See #95 for more details.

This issue will be used to track the identification and integration of a temporary Combobox component. See #95 for more details.

I'm sure most of you have realized that we're lacking some of the "cooler" components from the original project, which also happen to be some of the more difficult components to build (the right way). This is because there isn't a battle-tested, actively maintained, and feature-complete headless UI library for Svelte at the moment (at least from my extensive searches).

The ideal state of this project would be to use the same headless UI library for >90% of the components. This keeps the component APIs familiar and enables us to easily track breaking changes, updates, and issues.

However, I don't want to hold this project back while our primary headless UI library is being developed and refined. Not only does that apply additional unnecessary pressure to the maintainers of that project, but also keeps us from building complete projects while that development is underway.

So what we've decided to do is work on some "temp" components, which will eventually be replaced by the single headless library's implementation once it's ready. The goal is to do our best to make the APIs as similar as possible to their final state, so that migrating to the newer ones is as simple as changing a few imports/replacing a dependency, but of course no 100% guarantee on that. Since you own the code/components, you can ride out the temps for as long as you'd like, and upgrade to the final version when it works for you.

If you're thinking, why "temp" and not "beta" or "experimental"? Well I couldn't make a decision on what to label these, so I asked ChatGPT and here's what it came up with:

"Experimental" suggests that the component is in the early stages of development and may undergo significant changes or may even be removed altogether. It indicates that the feature is not yet stable or fully tested and is primarily meant for evaluation purposes.

While this somewhat aligns with what we're going for, experimental would be a better label if we were to release a partially-working, untested component, which is not what we'll be doing.

"Beta" is typically considered to be in a more advanced stage of development compared to experimental versions. It implies that the feature is mostly functional but may still have some known issues or require further refinement based on user feedback. Beta versions are often released to a wider audience for testing and gathering user input.

Also partially true, but since the entire API may change and we aren't continously iterating over these components, it doesn't really fit.

"Temp" is an abbreviation for "temporary" and is commonly used to indicate that a component or feature is intended for short-term use. It implies that the element is not final and may be replaced or removed in the future. This term is often used when a placeholder or temporary solution is implemented pending the development of a more robust feature.

Right on the money.

Temp Component Roadmap

The issues below are to be used for discussion around these temporary components. If you know of a solid headless component that would fit in one of these places, first check the issue to ensure it isn't already being developed, and then provide your feedback via a comment.

I've also created a project which makes it a bit easier to visualize the status of each of these components, you can check that out via the "Projects" tab, or this link here.

Don't forget that the goal of this project is to align with shadcn/ui as closely as possible, so ensure to consider/compare before making any suggestions.

• #96
• #97
• #99
• #98
• #100
• #101
• #102
• #103
• #104
• #105
• #106

This issue will be used to track the identification and integration of a temporary ContextMenu component. See #95 for more details.

Current Behavior

Background should not be scrollable, independent of where I am on the screen when the dialog is opened. This is hard to get right on every device, especially iOS Safari.

Expected Behavior

This works as expected on the original shadcn.

Steps To Reproduce

1. Using the demo on shadcn-svelte.com
2. Navigate to altert-dialog

Link to Reproduction / Stackblitz

No response

More Information

No response

Current Behavior

line: const { fontFamily } = require("tailwindcss/defaultTheme")
get error: Require statement not part of import statement.eslint@typescript-eslint/no-var-requires

Expected Behavior

No ESLint error

Steps To Reproduce

CLI Instalation

Link to Reproduction / Stackblitz

No response

More Information

No response

This issue will be used to track the identification and integration of a temporary NavigationMenu component. See #95 for more details.

Current Behavior

The example in the docs:

...
  <HoverCardTrigger>
    <Button variant="link">@sveltejs</Button>
  </HoverCardTrigger>
...

This results in a <button> tag with a <a> tag, as HoverCardTrigger creates a <a> tag. This results in incorrect behavior.
A hover card will not appear if you switch to the trigger using the Tab key.

Similar to this issue.

Expected Behavior

As for now asChild prop is not implemented in radix-svelte I think Button component must be replaced with plain text or <span> tag with the necessary tailwind classes.

Steps To Reproduce

1. Add a hover card using the example in the docs (code tab in the docs).
2. View the code to see a <button> tag within a <a> tag
3. Attempt to Tab over elements

Link to Reproduction / Stackblitz

No response

More Information

No response

Describe the feature in detail (code, mocks, or screenshots encouraged)

The original project uses Tanstack Table, which also has a Svelte version, so the intent is to integrate that with the existing Table component to create a DataTable.

After looking into the TanStack table docs and really putting thought into this, I don't want to build on a project where Svelte is not a top priority, but rather an afterthought.

There are a few solid data table libraries out there right now, and I'll list them here once I confirm whether they are a true candidate or not.

If you have any that come to mind, we're completely open at the moment, so let's discuss.

Describe the feature in detail (code, mocks, or screenshots encouraged)

Just found this through YouTube. I'm fairly new to Svelte, but I love what I'm seeing on your channel and your work here. Will you implement the "Navigation Menu" component from the original set of components?

It happens to match something I'm looking for and I'd be willing to throw in a bit of cash to sponsor it/you.

What type of pull request would this be?

New Feature

Provide relevant links or additional information.

https://ui.shadcn.com/docs/components/navigation-menu

Current Behavior

I have added the tabs component inside a form which really cleaned up my form and looks awesome. Unfortunately, when I change tabs it automatically submits the form.

Expected Behavior

Is there a way to override this behaviour so it waits for the submit button to be hit? Thanks.

Steps To Reproduce

1. Add the tabs component inside a form with multiple tabs
2. click on various tabs and see if form submits without Submit button being used

Link to Reproduction / Stackblitz

No response

More Information

No response

Update (2023/08/19) - The superforms integration is in a preview state at this time, meaning you can't install the components via the CLI, but they are in the repository for you to reference. Expect there will be bugs and they aren't perfect just yet. We'll be working through the final implementation details along with a guide to publish once we get everything worked out!

Describe the feature in detail (code, mocks, or screenshots encouraged)

The original project has an awesome integration with React Hook Form. I want the same with sveltekit-superforms. This issue will be used to track the progress/discussion around this implementation.

What type of pull request would this be?

New Feature

Provide relevant links or additional information.

No response

This issue will be used to track the identification and integration of a temporary Datepicker component. See #95 for more details.

This issue will be used to track the identification and integration of a temporary Menubar component. See #95 for more details.

Since it's overwriting the entire file, all of the comments (as well as the JSDoc import for the config object) are being deleted

Current Behavior

<TableRow key={question.id} on:click={()=>{
console.log("it works");
}}>
Console when element is clickt is emty

Expected Behavior

<TableRow key={question.id} on:click={()=>{
console.log("it works");
}}>
Console when element is clickt is logs it works

Steps To Reproduce

use element Table create a tableRow
add element on:click={() => {}}
click the table row

Link to Reproduction / Stackblitz

No response

More Information

fix ?
https://stackoverflow.com/questions/70043203/how-i-can-pass-my-event-handler-as-restprops-to-child-component
I put on:click in the component and it worked

Link Svelte when on:click in the component is removed it don't work.

Current Behavior

In DialogContent.svelte, the DialogPrimitive.Portal from radix does not take in a class attribute and leads to the following warning in the browser

was created with unknown prop 'class'

Expected Behavior

There should be no warning.

Remove the class attribute from DialogPrimitive.Portal from DialogContent.svelte

Steps To Reproduce

Use the DialogContent.svelte component from Dialog and check the browser console

Link to Reproduction / Stackblitz

No response

More Information

No response

This issue will be used to track the identification and integration of a temporary select component. See #95 for more details.

Currently considering:

CaptainCodeman/svelte-headlessui

Open to others as well, so if you know of any, please let me know!