Right now there's no such wrapper code available in the docs for close functionality in Dialog component. I have tried to implement the same and it's working all fine.
<Dialog><DialogTrigger>Open</DialogTrigger><DialogContent><DialogHeader><DialogTitle>Are you sure absolutely sure?</DialogTitle><DialogDescription>
This action cannot be undone. This will permanently delete your account
and remove your data from our servers.
</DialogDescription></DialogHeader><DialogFooter>{/* this is how it can be used */}<DialogClose/></DialogFooter></DialogContent></Dialog>
Hope this helps! Happy to have a chat around this issue/feature-request.
I've been using this component library for a couple of days now, LOVING IT!
The only part that's missing is the exit animations, especially for the dialogs and menu components. They animate-in nicely but they disappear instantly on unmount. I'm somewhat new to radixUI, but I read this from radix which basically uses the data-[state=open/close] attributes to animate the state transitions (and this is what accordions seem to use on this library with animations declared on tw config)
So, is not having exit animations on certain components an intentional design choice?
I would like to ask how does tooltip work on mobile devices? Because when i tried to use it there it does not work. Is there some solution for this to trigger tooltip when user clicks on trigger?
This project is really great, I love it! Thank you for your efforts!!
To be frankly, it lacks some useful components, like datepicker, breadcrumb, form...so on
May be BaseWeb from Uber can give you some ideas :)
const TooltipProvider: FC<TooltipPrimitive.TooltipProviderProps>
Unsafe assignment of an `any` value.eslint[@typescript-eslint/no-unsafe-assignment](https://typescript-eslint.io/rules/no-unsafe-assignment)
Just a little feedback, navigating between components in the docs seems surprisingly sluggish. Not sure how easy a fix this is but it would great if it checking out the components was a snappier experience!
In the navigation-menu component, the 'origin-top-center' class is used in `NavigationMenuPrimitive.Viewport'. I have installed everything required in the installation instructions but my editor is still claiming it's not a valid class. I am not sure if this could have to do with the navbar dropdown not being centered or not, but it seems to be an error regardless. (if this is not responsible, how do I make the dropdown go underneath the button instead of stuck to the left?)
This may not be a big deal or even worth adjusting, as devices may not fall into this specific pixel range. However, I saw this while working on another issue and thought I'd file it in case.
At the md breakpoint, the content in the <MainNav> component overflows the screen at the lower end of the breakpoint range.
When dark mode is on, the text of the active Tabs Trigger is not readable. It is set to text-slate-700 and in dark mode the bg is set to dark:data-[state=active]:bg-slate-900.
When using the select component, opening the select content completely breaks the entire page, and I don't know if the problem is actually the component itself or if I forgot something when implementing it.
The NavigationMenu does stay open on a first click and closes again. It works after a second click.
Can be reproduced by clickinng on a example on the docs page: https://ui.shadcn.com/docs/primitives/navigation-menu.
It's a very important component for portfolio/photo/social websites but existing solutions are way too heavy with complex gallery/navigation functionality. Right now I'm using a hacky solution on top of modified Dialog component and while it works, it's not very elegant.
When using the register method of react hook form, the component does not change the state of the provided form.
exportdefaultfunctionSurvey(){const{
register,
handleSubmit,formState: { errors },
reset,}=useForm<{isDesktop: boolean}>();// ....return(<form><LabelhtmlFor="isDesktop">Are you using a desktop version of our app?</Label><Checkbox{...register("isDesktop")}/><button>Submit</button></form>)}
After adding the library to 2 different projects I stumbled upon the problem in both on how I add the font variable to my application for the default tw config to work.
I always had to check out the template in order to copy the next config and the _app.tsx from there.
The following content should be added to the install instructions.
Fonts
To add a font to your project you have to install @nextjs/font and add the following to your next.config.js:
Using tailwind, there are a lot of mentions of different colors (i.e. bg-slate-900, bg-red-500 etc.).
With 'slate' being the 'primary' color.
Let's say my primary colors is a blue, how would I go about changing that?
From my current understanding, I would have to go through every single file and change every single occurrence of slate,
which is difficult, as slate may in some cases refer to a 'border' and not a primary color.
What would be the suggested way to deal with this issue?
Any plans on adding a 'position' prop that could be passed when using the useToast hook?
Something similar to react-hot-toast โฌ๏ธ toast('Hello World', { position: 'top-center', });
When we need a more extensive Navigation Menu, Viewport with Content does not follow the position of the Trigger. Instead, all menus are in the center of the screen.
You can see behavior on this test page: https://chakras-edtsr25u2-miljenko-storydeckio.vercel.app/
I don't know why my form submission doesn't pass the validation check using react hook form and radix select primitive.
After selecting a value, this one still undefined and the resolvers do it's job telling me the field is required.
When you move your cursor over the menu bar component, it stops displaying the dropdown once you start moving the cursor too fast. It doesn't show the dropdown again until you click a menu element.
I am using the Popover.tsx component, and while the behavior and Tailwind styling are functioning correctly, I am experiencing difficulties applying local fonts to the component. Despite adding the font-sans class to all classNames within the Popover component and its child components, the utility class does not seem to affect any content inside PopoverContent. PopoverTrigger applies the custom font-family without any issues.
In Firefox Developer edition, on my vertical monitor with a resolution of 1080x1920, previewing the component requires a long horizontal scroll. This problem is not visible at higher resolutions. The issue is occurs in the md and lg breakpoints for much of the range in my testing. The cause appears to be the addition of the aside element messing up the width: 100% calculations used elsewhere.
Because the tooltip utilizes divs, but divs aren't valid descendants of paragraphs (view this stackoverflow discussion), if someone where to use tooltip in a paragraph tag, they would get the error
Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.
Thanks to the radix discord, I suggest wrapping the content in the tooltip portal like so:
This allows the content to be rendered in a different scope, avoiding the invalid descendants issue and retaining the styling and semantics as far as I can tell.
My proposition is to develop semantic colors for light and dark theme, write them into CSS variables and set them in TailwindCSS config https://tailwindcss.com/docs/customizing-colors#using-css-variables. This will almost completely automate the creation of a dark theme, since the colors will automatically change from the given variables for the dark and light theme, and another advantage is that it will be possible to add new different themes.
Hi! in the <DropdownMenu /> component, CSS classes aren't load in the final <div> element.
As you can see I am using <DropdownMenuSeparator /> withour classes and the final div is empty, but if I add classes by my own, its loads only my custom classes.
I added in lib folder the utils.ts file, but I dont undertand the why it is not working. This is happeding with all childs of <DropdownMenu />
Hi, awesome Job ! I see you used 'next-themes' for the support for the dark-mode. I have the following question, do you came across this problem in development. I use tailwindCSS
With related to "Hydration failed because of the initial UI"
Date pickers are notoriously difficult to implement, leave alone make them fully accessible and so I think it will take a while for radix-ui to catch up in this aspect. What do you think?
Some important notes:
react-aria provides hooks instead of componentes as building block, and so the primitives to build will have a source code that will look different from those built with radix-ui.
there are some extra dependencies to install to use some hooks (i.e. react-stately, @internationalized/date)
I have experience using react-aria (I've built some calendar inputs at work) and I could contribute maybe starting with simpler cases like DateField and TimeField. For the others, a good set of defaults should be discussed.
When transitioning from light to dark mode the associated icon stays fixed as sun, instead of switching to moon icon (to reflect the current theme setting).