Nuxt UI Radio Group Variants not displaying as shown in docs.
This is my first time using Nuxt UI. I took the sandbox project and replaced the buttons with a URadioGroup. I've tried to use the card and table variants but the radio group looks the same as the list/default variant.
Is there something else I need to do?
https://codesandbox.io/p/devbox/beautiful-euclid-lnm3mm?file=%2Fapp%2Fpages%2Findex.vue%3A7%2C1
A side question is where in the NuxtUI repo is the code for each of the examples shown in the docs? Then I could check that I'm setting up my project as expected.
7 Replies
Hi @steveaschwarz. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
I understand you're having issues with the URadioGroup variants in Nuxt UI. Based on the knowledge sources provided, I don't have specific information about the URadioGroup component's variants or why they might not be displaying correctly in your project.
The knowledge sources contain information about other Nuxt UI components like Card, Button, and theming systems, but don't specifically cover the RadioGroup component's variants or implementation details.
Regarding your side question about where to find the code for examples in the docs, the Nuxt UI components are available in the GitHub repository. The components are located in the
v3/src/runtime/components directory, and their themes are in the v3/src/theme directory as mentioned in the documentation:
You can explore the theme for each component in two ways: * Check theGetting Started: Theme To troubleshoot your issue, I would recommend: 1. Check if you've properly imported and registered the Nuxt UI components 2. Verify that you're using the correct prop names and values for the variants 3. Look at the specific RadioGroup component documentation for any special requirements 4. Check if there are any CSS conflicts in your project If you continue to have issues, examining the source code for the RadioGroup component and its examples in the GitHub repository might provide more insight. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------Themesection in the documentation of each individual component. * Browse the source code directly in the GitHub repository atv3/src/theme.
<@546082606479835159> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@steveaschwarz So the table variants etc... have just been merge and will be available in the next UI version! And for the doc examples, you can find them all here:
https://github.com/nuxt/ui/tree/v3/docs/app/components/content/examples
GitHub
ui/docs/app/components/content/examples at v3 · nuxt/ui
The Intuitive Vue UI Library powered by Reka UI & Tailwind CSS. - nuxt/ui
Ahh, that explains it! Thank you for the speedy reply.
But you can use the
pkg.pr.new in your package.json to try them out!
https://pkg.pr.new/@nuxt/ui@6038c49I think this is the first project I've seen where the docs are ahead of the release!!
@steveaschwarz It's because we're highlighting the "edge" version of the package and you can see "new" or "edge" tags in the sidebar, depending on what's coming, but I think we should also add an indication for the props 🤔