sek-consulting/solid-ui

Beautifully designed components. Built with Kobalte & corvu. Styled with Tailwind CSS.

SolidUI

This is an unofficial community-led Solid port of shadcn/ui & tremor.

Accessible and customizable components that you can copy and paste into your apps. Free. Open Source. Use this to build your own component library.

Documentation

Visit https://www.solid-ui.com to view the documentation.

License

Published under the MIT license. Built by @sek-consulting, @michaelessiet & community.

Star History

solid-ui's Issues

Solid signal is not working when Accordion is added.

With latest solidjs template, components are not working with signals when the accordion is added to the Counter

Counts of the button doesn't increase when it is clicked.

And the accordion is still collapsed.

The error like:

Unhandled Promise Rejection: SyntaxError: Importing binding name 'default' cannot be resolved by star export entries.

Reproducible steps

npx create solid@latest

√ Where do you want to create the app? ... my-app
√ Which template do you want to use? » with-tailwindcss
√ Server Side Rendering? ... yes
√ Use TypeScript? ... yes

npx solidui-cli@latest init

Would you like to use TypeScript? (recommended) yes
Where is your global CSS file? src/root.css
Where is your tailwind.config.js located? tailwind.config.cjs
Configure the import alias for src director: ~/*

npx solidui-cli@latest add accordion

src/components/Counter.tsx

import { createSignal } from "solid-js";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger
} from "~/components/ui/accordion"

export default function Counter() {
  const [count, setCount] = createSignal(0);
  return (
    <div>
    <button
      class="w-[200px] rounded-full bg-gray-100 border-2 border-gray-300 focus:border-gray-400 active:border-gray-400 px-[2rem] py-[1rem]"
      onClick={() => setCount(count() + 1)}
    >
      Clicks: {count()}
    </button>
    <Accordion multiple={false} collapsible class="w-full">
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Is it styled?</AccordionTrigger>
        <AccordionContent>
          Yes. It comes with default styles that matches the other components' aesthetic.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>Is it animated?</AccordionTrigger>
        <AccordionContent>
          Yes. It's animated by default, but you can disable it if you prefer.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
    </div>
  );
}

Incorrect types for button

Hi there,

I've been working on a project that uses solid-start and solid-ui and, though I love them both, I keep running into issues with types and things not quite working properly.

I've created a separate public repo that can serve as a place to try out components and prove if issues are real or not:

https://github.com/aellerton/solid-issues/tree/main/solid-sek

The repo is brand new and "off the shelf", adding a Button component. It works, but the types aren't right:

Specifically:

Type '{ children: string; }' has no properties in common with type 'IntrinsicAttributes & ButtonProps'

Clicking on that issue I get to:

'index' has no exported member named 'ButtonRootProps'. Did you mean 'ButtonRootOptions'

As it's a fresh repo with vanilla everything, I'm confident this isn't something I've done in my setup.

To be clear, the demo runs fine, but the types don't seem to be quite right.

Any guidance would be most appreciated!

docs: RadioGroup does not change state then clicking on the label

Why is this an issue? Its very annoying as a user to specifically target the small icon instead of just clicking the label text

• does not work in official docs - https://www.solid-ui.com/docs/components/radio-group
• works in kobalte - https://kobalte.dev/docs/core/components/radio-group

It seems like the issue lies in using a Label instead of RadioGroup.ItemLabel

Button cannot take Lucide Icon as children

I modified the ShadCn Button component to show its children

<ButtonPrimitive.Root>
	{others.children}
</ButtonPrimitive.Root>

But when the children is a Lucide Icon (import { X } from "lucide-solid";), all Tailwind failed

<Button>
       <X size={15} />
</Button>

[CLI] Something went wrong while creating your components.

npx solidui-cli add chart
Need to install the following packages:
[email protected]
Ok to proceed? (y) y
│
◇
│
■  Something went wrong while creating your components. Have you ran solidui-cli init?

Yes, I have.

Missing configuration when trying to use SSR and not using solid-start

Just a heads up if anyone is trying to add this to just a Vite TS app without using Solid-Start and getting this error when trying to use Vite SSR.

Error: Cannot find module '~/lib/utils' imported from '[project path]/src/components/ui/button.tsx'

Had to manually add some changes, here:

/* vite.config.ts */
+ import { resolve } from 'node:path';

export default defineConfig({
  plugins: [solid({ ssr: true })],
  + resolve: {
  +  alias: [{ find: '~', replacement: resolve(__dirname, './src') }],
  + },
});

/* tsconfig.json */
  "paths": {
      "~/*": [
        "./src/*"
      ]
    },
  +  "baseUrl": "./", 

OTP component - can't focus and edit inputs others than the last one

1. See the demo of the OTP field
2. enter 123456
3. try to click/shift-tab the input with "3" to correct it to 0
4. You can't, only backspace is allowed

The OTP field should support fixing mistakes and editing individual inputs

Issue using other tailwind plugins with this library.

I use daisyui as the styling engine for most of my projects. When implementing solid-ui into any of those projects i get this error:

[plugin:vite:css] [postcss] F:/Github/Alamanac/app/src/styles/imports.css:22:1: The `border-border` class does not exist. If `border-border` is a custom class, make sure it is defined within a `@layer` directive.

Re-ordering my imports can remove the error, but it fails to load any css located in the file that the solid-ui cli generates.

Here is a gist.

Is the command available ?

Hello 😄, I see on the doc that the CLI is available but it seems that it's not the case, when trying to use it with npx. I don't see it on npmjs.org. Is that normal ??

Input component is missing

Input component has disappeared in master

Docs missing darkmode example for regular Solid App.

In the docs there is an example of implementing darkmode but that's for SolidStart. Is there an example of using this but with a standard Solid app or could the docs be updated with one?

Checkbox Label has incorrect "for" value

In the checkbox-demo there's a label with a "for" value that points to terms1, however, Kobalte makes the checkbox input box have an id which is terms1-input. Hence the label is not clickable.

This would fix the example:

import { ComponentExample } from "~/components/component-example"
import { Checkbox } from "~/components/ui/checkbox"

export function CheckboxDemo() {
  return (
    <ComponentExample>
      <div class="items-top flex space-x-2">
        <Checkbox id="terms1" />
        <div class="grid gap-1.5 leading-none">
          <label
            for="terms1-input"
            class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
          >
            Accept terms and conditions
          </label>
          <p class="text-muted-foreground text-sm">
            You agree to our Terms of Service and Privacy Policy.
          </p>
        </div>
      </div>
    </ComponentExample>
  )
}

Popover does not work in sidebar component

My Popover3 in my usual component works fine:
https://github.com/AuroraLantean/solidstart-shadcn-demo1/blob/dbc209e40bcfc8bdc1847c7a51de72f1b57b1673/src/components/Output.tsx#L49

But Popover1 and Popover2 in my SidebarDesktop component do not work!?
Popover1
https://github.com/AuroraLantean/solidstart-shadcn-demo1/blob/acb3eb41d6efce7377fd67d22c1df294139360cc/src/components/SidebarDesktop.tsx#L29

Popover2
https://github.com/AuroraLantean/solidstart-shadcn-demo1/blob/acb3eb41d6efce7377fd67d22c1df294139360cc/src/components/SidebarDesktop.tsx#L45

I tried changing the SidebarDesktop returned tag from <aside> to <div>, but that does not work.
What is missing? Is there certain restrictions on where to use Popover ?
Please advise. Thanks

Is there an easy way to use it or cli?

DropdownMenuItem bubbles events on mobile

To reproduce:

1. Go to https://solid-ui-components.vercel.app/docs/components/accordion
2. Click "Dark" in theme selector with some clickable Element unter the Dropdown.

Click propagates to Element below, which should not happen.

How can I prevent this behavior?

Thanks for this library!

Review Create A Project Instructions

The instructions at https://solid-ui-components.vercel.app/docs/installation start a user off with the instruction to run npx create solid@latest which does not work on my system.

Additionally, directing users to initialize a project with solid@latest puts them into a Beta version of Solid Start that works somewhat differently to what is currently available in other project templates and documentation in the ecosystem, which could be confusing for people.

npm registry not found

Cannot init @solid-ui/cli

pnpm dlx @solid-ui/cli@latest init

~/.pnpm-store/v3/tmp/dlx-30893:
 ERR_PNPM_FETCH_404  GET https://registry.npmjs.org/@solid-ui%2Fcli: Not Found - 404

This error happened while installing a direct dependency of ~/.pnpm-store/v3/tmp/dlx-30893

@solid-ui/cli is not in the npm registry, or you have no permission to fetch it.

No authorization header was set for the request.

 pnpm @solid-ui/cli@latest init

 WARN  Unsupported engine: wanted: {"node":"18"} (current: {"node":"v20.9.0","pnpm":"8.10.2"})
 WARN  Unsupported engine: wanted: {"node":"18"} (current: {"node":"v20.9.0","pnpm":"8.10.2"})
 ERR_PNPM_RECURSIVE_EXEC_FIRST_FAIL  Command "@solid-ui/cli@latest" not found

⌘K port for SolidJS

I've published a port of ⌘K, which shadcn/ui uses for it's "Command" component, to SolidJS at https://github.com/create-signal/cmdk-solid

The notable difference between this and the combobox approach is the composable API, which may be more familiar to users switching to SolidJS + SolidUI from React + shacn/ui

e.g.

<Command.Dialog open={open()} onOpenChange={setOpen}>
  <Command.Input />
  <Command.List>
    <Show when={loading()}>
      <Command.Loading>Hang on…</Command.Loading>
    </Show>
    <Command.Empty>No results found.</Command.Empty>
    <Command.Group heading="Fruits">
      <Command.Item>Apple</Command.Item>
      <Command.Item>Orange</Command.Item>
      <Command.Separator />
      <Command.Item>Pear</Command.Item>
      <Command.Item>Blueberry</Command.Item>
    </Command.Group>
    <Command.Item>Fish</Command.Item>
  </Command.List>
</Command.Dialog>

I'm happy to prepare a pull request if you're interested in implementing cmdk-solid into solid-ui

CLI seems to be missing `/dist/index.mjs`

Hello!! Great work!! I'm excited to try it out, but when running the init command:

pnpm dlx solidui-cli init

It fails with:

 WARN  Failed to create bin at .../pnpm/store/v3/tmp/dlx-75575/node_modules/.pnpm/[email protected]/node_modules/solidui-cli/node_modules/.bin/suc. ENOENT: no such file or directory, open '.../pnpm/store/v3/tmp/dlx-75575/node_modules/.pnpm/[email protected]/node_modules/solidui-cli/dist/index.mjs'
 WARN  Failed to create bin at .../pnpm/store/v3/tmp/dlx-75575/node_modules/.bin/suc. ENOENT: no such file or directory, open '...pnpm/store/v3/tmp/dlx-75575/node_modules/solidui-cli/dist/index.mjs'
 ENOENT  Command failed with ENOENT: suc init

And looking at npm, latest release seems to really not have the whole /dist directory.

[Bug]: Tapping the carousel previous/next buttons multiple times on iOS devices triggers page zoom

Describe the bug

Hello from the Embla side, I hope you're all doing well 👋!

When tapping the carousel previous and next buttons multiple times on an iOS device, it sometimes triggers an unwanted page zoom.

Suggested solution

I believe adding touch-action: manipulation; to the previous and next buttons solves the problem. As MDN describes it:

Enable panning and pinch zoom gestures, but disable additional non-standard gestures such as double-tap to zoom. Disabling double-tap to zoom removes the need for browsers to delay the generation of click events when the user taps the screen.

• See this PR from shadcn-svelte that solves the problem: huntabyte/shadcn-svelte#654.

Reproduction

• Browse to the carousel page on an iOS device like an iPhone.
• Tap on the next button twice or more to scroll through the carousel slides.
• See the page gets zoomed which probably isn't what you wanted to do.

System Info

Device: iPhone 8
Browser: Safari iOS 16.7.4

Severity

annoyance

cannot configure tsconfig.json

when I initialize a project with npx solidui-cli@latest init, then got error like:

Something went wrong while configuring your tsconfig.json
file:///.npm/_npx/ee21f74023e4584f/node_modules/solidui-cli/dist/index.js:823
    if (!tsconfigData.compilerOptions.paths) {
                      ^

TypeError: Cannot read properties of null (reading 'compilerOptions')
    at file:///.npm/_npx/ee21f74023e4584f/node_modules/solidui-cli/dist/index.js:823:23
    at file:///.npm/_npx/ee21f74023e4584f/node_modules/solidui-cli/dist/index.js:591:7
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read/context:68:3)

mytsconfig.json is like:

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "jsxImportSource": "solid-js",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }

  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

Environment

package manager: pnpm
Node.js: v20.9.0

A helper function you might find useful: `withProps`

This is not a PR because I don't know how I would integrate this into your project. But you might find this useful (I put it into my utils.tsx file):

import { Polymorphic } from '@kobalte/core/polymorphic';
import {
  Component,
  ComponentProps,
  ValidComponent,
  mergeProps,
} from 'solid-js';

export function withProps<T extends ValidComponent, ExtraProps extends {} = {}>(
  Comp: T,
  extra_props: ExtraProps,
) {
  return <U extends ValidComponent>(
    props: Omit<ComponentProps<T>, keyof ExtraProps> &
      Partial<ComponentProps<T>> & {
        as?: Component<ComponentProps<T> & ComponentProps<U>>;
      } & ComponentProps<U>,
  ) => {
    if (
      props.class &&
      'class' in extra_props &&
      typeof extra_props.class === 'string'
    ) {
      props.class = cn(props.class, extra_props.class);
    }
    const totalProps = mergeProps(props, extra_props);
    return <Polymorphic as={props.as ?? Comp} {...totalProps} />;
  };
}

Usage:

export const Root = withProps('div', {
  class: 'flex items-stretch text-left border rounded-md',
});

When using the CLI to copy in new components, it's definitely more important for the components to be extensible rather than succinct. But your users might appreciate a utility like this when trying to define their own components.

Edit: this might go better in @kobalte/utils, but the cn function is useful here.

Feat: configure / cli option for component path

I'm working on a component library for one of my projects, and since this library is only for components (and the actual library files are in ./lib), the ./src/component/ui directory doesn't make sense.

As far as I can tell, there is no way to configure the output directory.

Obviously I can just move the file so it's not a huge issue, but it would nice if the solidui cli had an option to configure the component output directory. Or perhaps a config file could be used.

[Feature request]: configurable cn path

Hi guys and thanks for ALL your hard work.

Can you please make path to cn configurable in the CLI?
The ~/lib/utils value could stay default but I don't think having 2 folders lib and libs is a good idea in the long term process to maintain.

Thank you!

Components missing typed exports, causing vite errors (strict requires explicit type imports, namespace imports)

Following the installation guide for astro, I tried adding a <Button> component, but the errors started showing up as soon as I opened the editor.

First of all, this popped up in the VSCode:

'ValidComponent' is a type and must be imported using a type-only import when 'verbatimModuleSyntax' is enabled.ts(1484)

Which I guess stems from some kind of high strictness setting in the ts project.

So I edited the generated button component and changed (same for PolymorphicProps):

- import { JSX, splitProps, ValidComponent } from "solid-js"
+ import { JSX, splitProps, type ValidComponent } from "solid-js"
// and 
- import { PolymorphicProps } from "@kobalte/core/polymorphic"
+ import { type PolymorphicProps } from "@kobalte/core/polymorphic"

Then, when I tried launching dev server, it complained, that

[ERROR] [vite] The requested module 'solid-js' does not provide an export named 'JSX'

After navigating to the JSX symbol I discovered it is a namespace export, which also needs to be imported with type.

Right off the bat, this is the first issue that pops up when trying to create a new astro project (TS, strict) with the run off the mill component, so I imagine other components may have similar issues.

The steps taken to reproduce the issue basically follow the installation guide on the solid-ui docs website.

Feature that updates toast

Kobalte can update toast with simple function.
https://kobalte.dev/docs/core/components/toast#toaster

Install

Hi im new in the solidjs world and i found this repo here that i really like it, how i can use it?

Website (solid-ui.com) is down

Attempting to access the docs at https://solid-ui.com or https://solid-ui-components.vercel.app/ results in a 404 error.

Is JS support is missing

I have existing solidjs app in JS not in TS. I want to configure solid-ui library to it. need help

[CLI] Something went wrong while configuring your tsconfig.json.

npx solidui-cli@latest init
Need to install the following packages:
[email protected]
Ok to proceed? (y) y
│
◇  Would you like to use TypeScript? (recommended)
│  No
│
◇  Where is your global CSS file?
│  src/styles/root.css
│
◇  Where is your tailwind.config.js located?
│  tailwind.config.js
│
◇  Configure the import alias for the src directory:
│  ~/*
│                                                                                                                                                                                                                                    
◇  ui.config.json successfully created!                                                                                                                                                                                              
│                                                                                                                                                                                                                                    
◇  Done configuring your tsconfig.json                                                                                                                                                                                               
│                                                                                                                                                                                                                                    
◇  Done creating utils.ts file!                                                                                                                                                                                                      
│
◇  ui.preset.js successfully created!
│
◇  Done done configuring your tailwind.config.cjs
│
◇  Done Writing CSS styles!
│
◆  Project configuration completed.
│
◆  Would you like to install the required dependencies? (recommended)
│  ● Yes / ○ No
└
│
■  Something went wrong while configuring your tsconfig.json. Please make sure it is formatted correctly and doesn't contain any comments.

Note: There is no tsconfig.json as I chose not to use TypeScript.

SheetTrigger does not trigger in entry-server.tsx in SolidStart

Sheet won't be triggered if it is placed in entry-server.tsx in a SolidStart project:

<html>
<head>... </head>
<body>
         <MobileMenu />
	<SidebarDesktop sidebarItems={sidebarItems} />
	<main id="app" class="sm:ml-[170px] mt-5 sm:mt-0 h-screen">
		{children}
	</main>
	{scripts}
</body>
</html>

But I want the MobileMenu to appear in every page.
I cannot put it inside SidebarDesktop because it is hidden in mobile view.

and my MobileMenu:

const MobileMenu: Component<MobileMenuProps> = (props: MobileMenuProps) => {
	return (
		<div class="block sm:hidden fixed top-3 right-3">
			<Sheet>
				<SheetTrigger> Open </SheetTrigger>
                                <SheetContent>  </SheetContent >
                        </Sheet>
              </div>)

Please advise

[BUG] css issue on checkbox when focus-visible

peer should be on CheckboxPrimitive.Input instead of CheckboxPrimitive.Control

Combobox inside of Dialog component renders list box behind the modal.

When putting a combobox inside of a dialog component the listbox element is rendered outside of the modal div and behind the modal even when adjusting for z-index. i have tried everything i can think of, yet i can not get the combobox to render correctly inside of a dialog component.

Tailwind `size` classes not being applied correctly.

Hi,

Firstly awesome package - really appreciate your work on this!

I've been using this recently and ran into issues with a number of components not showing correctly in my solid-start app. I narrowed the issue down to components which use the tailwind size class. Not sure if it's something to do with my setup and hoping you might be able to shed some light on it for me - but it seems like the tailwind class isn't being applied despite being present.

<RadioGroupPrimitive.ItemControl class="aspect-square size-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50">
  <RadioGroupPrimitive.ItemIndicator class="flex h-full items-center justify-center ">
    <TbCircle class="size-2.5 fill-current text-current" />
  </RadioGroupPrimitive.ItemIndicator>
</RadioGroupPrimitive.ItemControl>

If I use the original component code from above it looks like this,

But if I modify the classes with explicit width and height classes,

<RadioGroupPrimitive.ItemControl class="aspect-square size-4 w-4 h-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50">
  <RadioGroupPrimitive.ItemIndicator class="flex h-full items-center justify-center ">
    <TbCircle class="size-2.5 w-2.5 h-2.5 fill-current text-current" />
  </RadioGroupPrimitive.ItemIndicator>
</RadioGroupPrimitive.ItemControl>

Then it renders correctly as intended,

Have you encountered this before or have any idea how to fix it?

Here's my packages.json dependencies if that's helpful.

  "dependencies": {
    "@kobalte/core": "^0.12.3",
    "@libsql/client": "^0.5.3",
    "@solid-primitives/scheduled": "^1.4.3",
    "@solidjs/router": "^0.13.0",
    "@solidjs/start": "^0.6.1",
    "@tanstack/solid-table": "^8.13.2",
    "autoprefixer": "^10.4.14",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "drizzle-orm": "^0.30.1",
    "postcss": "^8.4.26",
    "solid-icons": "^1.1.0",
    "solid-js": "^1.8.15",
    "tailwind-merge": "^2.2.1",
    "tailwindcss": "^3.3.3",
    "tailwindcss-animate": "^1.0.7",
    "vinxi": "^0.3.10"
  },

adding OTP field doesn't add `@corvu/otp-field` package

When adding the OTP-field component, the @corvu/otp-field is not added to the project and requires manual install.

Card component manual installation docs

card component manual installation instruction contain accordion component instead of card component

Sheet component's height is not fixed in document demo examples

In the documentation example, the component heights of the top and bottom of the sheet component are not fixed.

This caused the pading to fail. Then open devtools and the height will change automatically when the window height changes

Provide SelectHiddenSelect out of the box

I think SelectHiddenSelect deserves to be included in the registry for select.tsx since it's needed when one wants to take advantage of FormData on form submission. Happy to provide the PR if you agree.

Unclear how to use the libary.

Hello,

Thanks a lot for writing this library. One think that was unclear to me from the documentation is how to use it? Should I just copy the component, lib folder into my project? Thanks a lot for your help!

Maybe use `tailwind-variants` instead of `clsx` & `cva` combo

I recently discover tailwind-variants which is a pretty nice library. It replaces clsx, cva & twMerge and add more tools for building Design System with tailwind.
"Why Tailwind Variants"
Worth noting that kobalte/pigment is already using it :)
What about switching to it ?

[Feature Request]: Breadcrumb component

Couldn't find a Breadcrumb component:
https://ui.shadcn.com/docs/components/breadcrumb

Wrong section highlighted in side navigation in the docs

No matter which page I open the "Alert Dialog" section is always highlighted. Moreover, the side navigation doesn't scroll down to the currently opened page's section

Support breaking changes of @kobalte/[email protected]

@kobalte/[email protected] has removed Removed asChild and <As/>.
The version of @kobalte/core will be update to the latest every time if I add a new component.

Navigation menu animation pop-in after the second hover

1. Open navigation menu demo
2. Hover over "Getting Started" dropdown to show the menu for the first time, works as expected
3. take mouse off the "Getting Started"
4. Hover once again over "Getting Started"
5. The menu slides in from the left or something
6. now Take mouse entirely off the menu
7. Hover over the second element, "Overview"
8. The previous "Getting started" menu is opened for a split second and the "Overview" pops in immediately, causing visual flash and jump

The popup slide-in animations should behave to avoid the visual "pop" effect.

[discussions]Why do each of you maintain a Solid.js version of shadcn/ui?

Why do each of you maintain a Solid.js version of shadcn/ui?
https://www.solid-ui.com/
https://github.com/sek-consulting/solid-ui

and
https://shadcn-solid.com/
https://github.com/hngngn/shadcn-solid

Sheet component's closing animation is missing

I realized that the closing animation of the Sheet component is missing. The sheet component in shadcn/ui has a collapsing effect when it is closed.

CLI package manager

The CLI to add components doesn't seem to allow you to change the package manager user and defaults to yarn.
pnpx solidui-cli@latest add # Tries to use yarn add

Would be great to save the package manager to config used during initialization.

[Question] Missing elements from shadcn

A few components are missing from shadcn, some are recent (drawer, carousel) but some are already a bit older, like the navigation menu. Is it by design or is it plan to port all components ?

Thanks

[Feature Request] Update all installed components with `solid-cli update`

Hello :)

Everything is in the title, I think it would be great if we could update all installed components through the CLI 😄

Thx again for this amazing lib, really nice to work with.

Best regards,

Vanilla SolidJS project needs vite-tsconfig-paths to resolve ~/*

The approach of setting "paths": { "~/*": [ "./src/*" ] } in tsconfig.json does not work in a vanilla SolidJS + Vite project. Installing vite-tsconfig-paths and using it as a Vite plugin resolves the issue.

Perhaps the docs could cover this, the code snippets could be set up in such a way that this paths resolution approach is not needed, or the init CLI command could install and configure this Vite dependency?