radix-ui / website

Website and documentation for Radix.

Radix UI website and documentation

Everything you need to build a design system, website or web app.

Components, colors, icons, templates, and an extensive design system. Free and open-source.

---

Documentation

For full documentation, visit radix-ui.com.

Contributing

This is a Next.js project bootstrapped with create-next-app.

Getting Started

Run the development server:

yarn dev

Open http://localhost:3000 with your browser to see the result.

Authors

• Pedro Duarte (@peduarte)
• Benoit Grelard (@benoitgrelard) - WorkOS
• Jenna Smith (@jjenzz)
• Colm Tuite (@colmtuite) - WorkOS
• Chance Strickland (@chancethedev)

---

Copyright © 2022-present WorkOS.

website's Issues

Hover card example replaces current tab location

Documentation

Relevant Radix Component(s)

https://www.radix-ui.com/docs/primitives/components/hover-card

Clicking the avatar in the hover card example takes you to Radix's Twitter page.
The anchor tag in the example should, perhaps, have an attribute of target="_blank" (rel="noreferrer noopener").
The avatar could also, perhaps, have cursor: pointer.

Blurred font in dialog

Bug report

Current Behavior

In the Dialog component when has a box-shadow the content stay with blurred font

Expected behavior

The content font shoud be sharp!

Reproducible example

CodeSandbox Template
https://codesandbox.io/s/dialog-demo-blurred-ohgoxt?file=/App.js

Color issues

Bug report

Color issues in Alert Dialog and Dialog components

[Dialog] Add async example

As suggested here: radix-ui/primitives#1328 (reply in thread)

We do get this question fairly often so probably a good idea to add to the docs.

Component documentation should map more easily to vanilla CSS

Documentation

Radix component documentation is excellent but has one major drawback IMO, which is that it uses Stitches in a way which encourages abstractions which make the documentation harder to understand. Developers who want to use Radix have to understand Stitches to see how to use the component. Stitches is great but ideally these two technologies should be separated, we don't want to confine Radix to Stitches users, when the library is excellent and has the potential to be used by everyone.

One suggestion from the Discord is to use the core Stitches API which maps more closely to CSS: https://discord.com/channels/752614004387610674/803656831704629298/917373575953018880

My own experience was that it was difficult to figure out how to get it to work, what the options are, etc.

The way I work with documentation: I like to copy an example into my codebase, change it to fit (eg I'm working on a Tailwind project and a Sass project at the moment) and play around with it to see how it works and what I'll need for my project. The current Radix documentation makes that a bit difficult to do.

Low contrast text on Tab example in dark mode

Bug report

Link

Your environment

Chrome 91 on MacOS 11.4

Accessibility overview broken link

Bug report

Current Behavior

https://www.radix-ui.com/docs/primitives/overview/introduction#accessible

Click accessibility and it takes you here https://www.radix-ui.com/docs/primitives/overview/docs/primitives/overview/accessibility

Page is a 404

Expected behavior

I assume the link should be to https://www.radix-ui.com/docs/primitives/overview/accessibility ?

Reproducible example

n/a

Suggested solution

Additional context

Your environment

Software	Name(s)	Version
Radix Package(s)
React	n/a
Browser
Assistive tech
Node	n/a
npm/yarn
Operating System

Clicking on a single color in the palette should copy the hsl value

Feature request

Overview

1st of all amazing color system

Would be really great if I am able to copy HSL values of color palettes.

On the index page

Copy function is there in this page

But it copies the entire object which is cool in that use case.

Examples in other libraries or sites

Vercel Design System has this taping on var(--color-code) copies it.

Who does this impact? Who is this for?

Developers/Designers who want to quickly copy and try it out.

too long tooltip content breaks the layout on safari

Bug report

Current Behavior

Screen.Recording.2021-04-14.at.13.43.29.mov

Your environment

Software	Name(s)	Version
Browser	safari	14.0.2

[Checkbox] Check icon is not visible in dark mode

Broken link on Accessible Icon page

Documentation

On the Accessible Icon page (scroll to the bottom), the link in the sentence "This is built with Visually Hidden." works when viewed on GitHub but 404s on the website.

Pages sometimes load without styles for a split second

I know we've been aware of this for some time but wanted to get it written down.

It seems we're depending on @modulz/design-system here so we're on a really old version of stitches. I'm guessing that might have something to do with it.

It would be good to upgrade to @radix-ui/design-system if possible.

Document adding `z-index: 0` to the app wrapper, to facilitate portalled content.

Document HTML attribute and React Synthetic Event support

Stemmed from here #312

It's not obvious that all of our components support these. I was thinking a small blurb above the props table that said something along the lines of:

Inherits content attributes and React Synthetic Events.

Thoughts?

Version numbers in release docs don't match versions in package.json

I'm not sure if this is the right place to file the issue, but the version numbers in package.json for each component is 0.0.1 higher than what's in the release notes on the docs page. E.g. the dropdown is listed as 0.1.5 on the website but it's 0.1.6 in the Feb 28 commit.

The theme toggle button dances around when scroll is locked

Similar to #64

anchor scroll not offsetting correctly

Bug report

Current Behavior

The anchor scroll hash is getting cut off.

Expected behavior

It shouldn't overlap on the navbar

Reproducible example

Visit https://www.radix-ui.com/docs/primitives/components/hover-card#anatomy

Suggested solution

I tried git clone and fixing this because of some module errors not able to run it.

A fix can be making scrollMargin to be 40.

website/lib/scrollToUrlHash.ts

Line 8 in 0da76e6

const scrollMargin = 20;

[Dialog][DropdownMenu] Add Dialog/DropdownMenu composition examples

See radix-ui/primitives#634

Toggle Group and Tooltip are missing the package size

Add search functionality in documentation

Documentation

Relevant Radix Component(s)

Examples from other doc sites

https://chakra-ui.com/

Scroll locking elements make the layout shift

This is most likely due to the right aside being position fixed

Recorded on Firefox Windows, confirmed same behavior on chrome Windows as well, testing on the linux ones later today

Update checkbox/radiogroup docs to remove enter key activation

See radix-ui/primitives#1104 (comment)

Scroll position in mininav is reset in some situation

This was reported on Discord, but I can't seem to be able to reproduce it myself so not sure if it's specific to some browser or something else.

Migrate width transition to scale transition in Progress example

Feature request

Overview

Better transition performance in https://www.radix-ui.com/docs/primitives/components/progress example

Examples in other libraries

https://developers.google.com/web/updates/2017/03/performant-expand-and-collapse#bad_animating_width_and_height_on_a_container_element

Who does this impact? Who is this for?

Help all radix users maintain good performance in their projects

CSS resize for aspect ratio example

Documentation

Relevant Radix Component(s)

https://www.radix-ui.com/docs/primitives/components/aspect-ratio

Suggestion

Add a resize: both CSS property to a parent of the image in aspect ratio example:

(In these illustrative screenshots, I'm using resize: horizontal because image parent has box-shadow currently)

Website: Horizontal scrolling on home page does not work with Chrome

Bug report

Current Behavior

On the home page, I am not able to show the next primitive components by clicking on the arrow right button (also the button "arrow left" does not work).
However: I can scroll with my trackpad.

Expected behavior

Clicking on the arrow should scroll right / left.

Your environment

• Windows 10
• Chrome Version 96.0.4664.45 (Official Build) (64-bit)

Blurry Alert Dialog in documentation

Documentation

Relevant Radix Component(s)

Alert Dialog

Recommendation

Hello awesome radix team!

I noticed that in Chrome 94 the Alert Dialog doc example looks blurry when opened. I've noticed that sometimes css transform can cause elements to lose their sharpness, but in particular I noticed it's the will-change: 'transform' that causes the blurriness in this example.

Here's the original CodeSandbox, shown on the docs page: https://codesandbox.io/s/nmk9d?module=App.js
Here's my fork of the CodeSandbox: https://codesandbox.io/s/divine-fog-lznb2?module=App.js

It might be wise to remove the will-change so that the demo component looks awesome in all browsers. It would be a shame if somebody thought it was the primitive's fault.

Cheers!

Menu disappears after selecting some pages on mobile

Documentation

Sometimes when you hit the hamburger menu on mobile, it disappears and you have to refresh to get it back. I think it depends on which page you choose, happens mostly (entirely?) on "Utilities" pages.

Reproduced in Chrome and Safari on iPhone.

Video link: https://www.dropbox.com/s/z3khp8wnj7n68zb/radix%20docs.MP4?dl=0

Very excited by primitives, thanks for everything you all are doing!

Relevant Radix Component(s)

Accessible Icon, Announce, Id Provider etc

Examples from other doc sites

n/a

Tooltip arrow issue with rounded corners

Bug report

Noticed that if the tooltip arrow in on the sides, it gets disconnected from the frame when the frame has rounded corners

Expected behavior

Tooltip should look seamless when the arrow is on the sides. Would expect to be able to offset the position too a little so that the arrow is a little indented and not flush with the frame sides

Reproducible example

The issue can be observed in your own docs:

Suggested solution

Provide an offset for tooltip arrow when placed on the sides.

Cannot `yarn dev` repo

Discussed in #274

^{Originally posted by zenfonseka November 12, 2021}
hey ,

i was very enjoyed your UI website and i loved it! but when i get it to Visual Code and run the command of "yarn dev" it's not running tho? can you help me to how to use it please?

thank you!.

I can't run it locally either. I just pulled a fresh copy of the repo, did a yarn && yarn dev and tried navigating to http://localhost:3000/docs/primitives/overview/getting-started but get the following screen:

Dropdown Demo bug

Bug report

Current Behavior

Expected behavior

The little arrow indicating the relationship to the trigger looks broken.

[Toolbar] broken link to aria-practice "roving tabindex"

Documentation

Relevant Radix Component(s)

In the Accessibility section of Toolbar component:

Uses roving tabindex to manage focus movement among items.

This link points to a 404 page on w3c:

Correct link: https://www.w3.org/TR/wai-aria-practices-1.2/examples/radio/radio.html

Migrate width transition to scale transition in Progress example

Documentation

Relevant Radix Component(s)

Better transition performance with scale:

website/components/demos/Progress.jsx

Line 18 in 06487e7

transition: 'width 660ms cubic-bezier(0.65, 0, 0.35, 1)',

Examples from other doc sites

https://developers.google.com/web/updates/2017/03/performant-expand-and-collapse#bad_animating_width_and_height_on_a_container_element

Mention somewhere that this is a react library

We have received a few comments (here, or on twitter) that we don't mention anywhere that Primitives is a React library. We should probably add this somewhere in the docs.

Dark theme alert dialog is white on white background

Bug report

Current Behavior

Dark theme alert dialog is white on white background.
You can also select the text behind gray area by holding down the text(selecting it) and dragging your finger up or down.

Expected behavior

Text in alert dialog being visible

Reproducible example

Alert docs click open on basic example.

Suggested solution

Change color on dark mode.
Change z-index of alert background.

Additional context

Your environment

Android chrome

Software	Name(s)	Version
Radix Package(s)
React	n/a
Browser
Assistive tech
Node	n/a
npm/yarn
Operating System

Dedicated automated testing page

It would be helpful to provide some type of documentation regarding automated testing and primitives, especially with suites running testing-library and user-event. There are quite a few gotchas, especially common are pointer event firing problems and mocking layout specific browser apis as jsdom struggles with these.

Examples of common questions:

radix-ui/primitives#1382
radix-ui/primitives#1220
radix-ui/primitives#1207
radix-ui/primitives#1036
radix-ui/primitives#856
radix-ui/primitives#765
radix-ui/primitives#420

Document null during testing
radix-ui/primitives#1707

Document the available `data-*` attrs as part of the API reference for primitives

Documentation

I recently ran into some breakage when upgrading radix dropdown, which would've been more obvious had I seen &[data-state="open"] as being a new data attr that I needed to handle in order to setup the animations in stitches. See context in discord here: https://discord.com/channels/752614004387610674/803656831704629298/874377300806893578

Relevant Radix Component(s)

All radix components should document that data attrs that are part of their public API.

Add a "When to use" section

There is sometimes visual overlap with our components which makes it a little unclear which pattern is the correct one to choose for a particular use-case. Most recently, we've had a request to make Tooltip appear on click on mobile with a reference to our info icon in the props tables as an example (which actually uses Popover).

It might be nice to provide some sort of tree diagram with questions and yes/no answers that direct folks down the right path.

Dedicated `asChild` page

We have had a few reports that have been assumed to be an issue with the new asChild API but also will have been an issue with the as prop. It seems the explicitness of the asChild API has made some of these issues more apparent for people so it might be useful to provide some documentation on these pitfalls and the solutions to them.

The most recent report we had was here radix-ui/primitives#953

It's not clear what props the child should accept (or that props need to be forwarded). For now we're saying it should always accept DOM props. Ideally we would improve the DX with TS but TS doesn't currently support the ability to type the props of the child React Element.

Content copy: GitHub is misspelled

Summary

On https://www.radix-ui.com/colors, GitHub is misspelled -- the h should be capitalized:

website/pages/colors/index.tsx

Line 126 in fc6bee2

Github

Color scale copy buttons not functional

Bug report

Current Behavior

On the scales page clicking the copy icon button has no effect, and logs nothing to the console.
https://user-images.githubusercontent.com/6993424/136093198-3b3a51c8-2726-4d4b-a3ed-0c0a51fbba85.mp4

Expected behavior

a context menu appears with various options to copy the scale (svg, css, react import, etc)

Reproducible example

n/a, live on the docs site.

Your environment

Can reproduce on latest Chrome, FF, and Safari

Toast docs: outline stays on screen after toast dismissed

Bug report

Happens on iPhone

Current Behavior

Add styles to "indeterminate" checkbox example

Documentation

The example shown below doesn't have any visual change when toggling the indeterminate state.

My suggestion would be to show an indeterminate state, similar to this:

Relevant Radix Component(s)

Checkbox

Examples from other doc sites

n/a

Tooltip doesn't work on iOS (14.4)

Bug report

The Tooltip component isn't working on iOS.

Current Behavior

Tapping on a tooltip component doesn't show the content

Expected behavior

Content shows when tapping a Tooltip component

Reproducible example

1. Load up this page on iOS (14.4 is what I used):

https://www.radix-ui.com/docs/primitives/components/tooltip

2. Tap the + in the example.

Suggested solution

Content should show on tap events

Your environment

Below is my env, but it's also not working on whatever your website env is.

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-tooltip	0.1.1
React	n/a	17.0.2
Browser	Safari iOS	14.4
Assistive tech	n/a
Node	n/a	v14.17.3
npm/yarn	npm	6.14.13
Operating System	iOS	14.4

Please bring back working components for each code example

I like the new fully styled examples in the hero for each component. But it would be nice to still have a working component demonstrating each code example in the Examples section, e.g. https://www.radix-ui.com/docs/primitives/components/dropdown-menu#examples

As a possible alternative, is the storybook for each radix component available somewhere to try out?

Id functionality and documentation for DropdownMenu.Root

Bug report

Using id is not working as expected(as detailed in the documentation) and types do not contain id.

Current Behavior

Using id is not working as expected(as detailed in the documentation) and types do not contain id.

Expected behavior

Types to include id and to pass id attr to ref element, and cases asChild also to be contemplated.

Reproducible example

Reproduced with the latest version "@radix-ui/react-dropdown-menu": "^0.1.6",

Additional context

Docs:

Types:

Repro: Not passing the right id (using asChild true)

Your environment

Software	Name(s)	Version
Radix Package(s)		0.1.6
React	n/a	18
Browser	Chrome
Assistive tech
Node	n/a
npm/yarn
Operating System

Document `collapsible` prop in `Accordion.Root`

Missing docs

Tweak Dialog example on homepage

I thought the Dialog example on the radix-ui.com homepage was an AlertDialog because it has an OK button… Thoughts on updating the example to avoid confusion between the two component types?

Suggestion: mention Radix-UI is not compatible with Preact

👋

I run into this issue, and it took me a while to realize preact wasn't supported. I dev locally with React and only use Preact to bundle for production purposes. That made it harder to find out what was happening.

I would probably mention it somewhere in the docs as it seems to be a recurrent topic for others.

Polymorphic example has a type error with v0.0.13

Bug report

Reproducible example

https://codesandbox.io/s/rough-morning-n75t0?file=/src/App.tsx