Currently, it's not possible to use radix-ui/themes with an immutable yarn.lock file due to the radix-ui/themes package's dependencies on the latest versions of radix-ui packages. Reproducible builds across various environments are highly desirable, and there's a need to run yarn install --immutable to ensure the yarn.lock file remains unmodified on the server.

How to fix: use dependencies with specific version in "frontend\radix-ui\themes\packages\radix-ui-themes\package.json" instead of latest.

When I use <Theme> inside _app.tsx (from import { Theme } from '@radix-ui/themes')

I got this error:

Hydration failed because the initial UI does not match what was rendered on the server.

Removing Theme gets rid of Hydration failure completely.

Hey Everyone, is there any way to change breakpoints on Radix/themes? I want to use different sizes on it. If there is no easy way, what if I use custom-media with PostCSS, will I have a chance to change the current ones and affect all theme structure?

https://github.com/radix-ui/themes/blob/main/packages/radix-ui-themes/src/styles/breakpoints.css

Hi, guys

I'm trying to install and configure @radix-ui/themes and I get this error message:

I followed the steps in the official documentation. Getting started

1. npm install @radix-ui/themes
2. import '@radix-ui/themes/styles.css';
3. And I tried to import and use in my PageLayout component:

import { PageHeader } from '~/templates/PageHeader/PageHeader';
import { PageFooter } from '~/templates/PageFooter/PageFooter';
import { Theme } from '@radix-ui/themes';

export const PageLayout = ({ children }) => {
  return (
    <Theme>
      <PageHeader />
      <main>{children}</main>
      <PageFooter />
    </Theme>
  );
};

Could someone help me with this problem?

Hi, i was experimenting with the components and i tried to do a select theme switcher with next-themes but the select value flashes and i have an hydration error.

"use client";
import { Select } from "@radix-ui/themes";
import { useTheme } from "next-themes";

export default function ThemeSwitcher() {
  const { theme, setTheme } = useTheme();

  return (
    <Select.Root
      value={theme}
      onValueChange={(value) => setTheme(value)}
      size="2"
    >
      <Select.Trigger variant="soft" />
      <Select.Content>
        <Select.Item value="dark">Dark</Select.Item>
        <Select.Item value="light">Light</Select.Item>
      </Select.Content>
    </Select.Root>
  );
}

hi folks! lovely library. I was just wondering if passing the incoming props before inbuilt class names is intentional?

What I'm trying to do -

<Button className="fancy-gradient-button" />

<Button className="disabled-btn" />

But in this the background of the button doesn't take precedence, as the classnames from the library come later. This behaviour in general is common for all components. Am I missing something obvious or is this expected(which also makes sense for consistency)?

On Android Firefox, I can't seem to scroll. Or whole sections of the homepage go black. Generally unusable - maybe the hug of death?

Just the landing page

I'll attach a video when I can (too large for Github)

Hey there, I'm just getting started with Radix-UI and after reading through the documentation, I have a few questions

1. Is there a way to lazily render tabs? Sometimes, a tab view is expensive to render or has to make network requests to load, so its nice to be able to render them lazily.
2. Same question with context menus. In Notion, for example, if you right click on a block, there's a decent amount of computation that goes on in order to figure out what kinds of actions can be taken on that block. So it would be nice to be able to lazily populate context menus as well.
3. If I just want some text with an icon next to it, what's the best way of doing that? For example, the a tab heading or a badge with an icon.

I hope this is an appropriate place to put this.

Thanks!

This is my Astro layout:

---
import '@radix-ui/themes/styles.css';
import { Theme } from '@radix-ui/themes';

interface Props {
  title: string;
}

const { title } = Astro.props;
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="Astro description" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
    <title>{title}</title>
  </head>
  <body>
		<Theme>
			<slot />
		</Theme>
  </body>
</html>

However, I can't import Theme from @radix-ui/themes because of this error:

 error   Unexpected token 'export'
/home/.../node_modules/@radix-ui/themes/dist/esm/index.js:1
export { Theme, useThemeContext, updateThemeAppearanceClass } from './theme';
^^^^^^

SyntaxError: Unexpected token 'export'
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1176:20)
    at Module._compile (node:internal/modules/cjs/loader:1218:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25) (x2)

Any help would be appreciated.

Issue

After entering for the first time in the Playgound and switching the theme to dark, I unlock the disco mode.

Steps to reproduce it

• Open Chrome/Firefox/Brave and open incognito
• Go to the Playground
• Click Dark

I tried the ThemePanel at play ground and wanted to add it to my React application.

I use <Theme appearance="dark" accentColor="tomato" grayColor="sage">, so I set the appearance to dark as default. When I start the app, the Light radio input is selected, while the Panel is in dark theme. After clicking on Light radio input, it turns to Light theme but the dark theme radio input can't be selected.

I guess it is because of class of the ThemePanel can't find a way to change from light to dark

I think this is a bug:

Shouldn't it be:

type PropsWithoutRefOrColor<T extends React.ElementType> = Omit<
  React.ComponentPropsWithoutRef<T>,
  'color'
>;

Note the change to React.ComponentPropsWithoutRef<T>

When the theme panel, e.g. in playground is opened from a non-Apple device (Windows, Linux), the ⌘C and ⌘D hotkeys to toggle the theme panel and dark mode should be automatically remapped to Ctrl-C and Ctrl-D respectively.
As of now they are mapped strictly for Apple devices and don't work elsewhere.

This requires modifying these handleKeydown functions to include ctrlKey:

and automatically showing the correct key (⌘ or ctrl) here:

This can be a good example.

Fixing this issue will make the theme panel work the same for everyone, regardless of the OS used.

Trying to import styles.css via @import url(@radix-ui/themes/styles.css); in a CSS file results in the following error:

ERROR in ./src/app/index.css (./node_modules/css-loader/dist/cjs.js!./src/app/index.css)

Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Package path ./styles.css is not exported from package [...]\node_modules\@radix-ui\themes
(see exports field in [...]\node_modules\@radix-ui\themes\package.json)

However, when I go check the exports field in the package's package.json, I can clearly see the ./styles.css being exported.

Similarly, importing styles.css in a TypeScript (or a JavaScript) file via import '@radix-ui/themes/styles.css' results in a no-op. It simply does not inject the CSS into the generated chunks and has no effect whatsoever on the HTML output. Importing any other CSS file works as expected.

I am using Webpack 5.88.2.
Any idea what's going on? Could this be a bug in Webpack?

Hi!

I was so excited by the release of the themes package that I thought I'd rewrite a small internal app in Next 13 with it and have some fun.

Here's the rub - this works:

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <Theme appearance="dark" accentColor="red">
          <p>This will render dark</p>
        </Theme>
      </body>
    </html>
  )
}

This doesn't work (renders light theme):

'use client'

import React from 'react'

const TestContext = React.createContext(null)

export const ClientOnly = () => (
  <TestContext.Provider value={null}>
    <p>This is client only and renders light</p>
  </TestContext.Provider>
)

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <Theme appearance="dark" accentColor="red">
          <ClientOnly />
        </Theme>
      </body>
    </html>
  )
}

Seems like a bug right?

I know next to nothing about radix-ui, but the new UI library looks very nice! I was wondering if Svelte support will be added since I prefer to use it over React.

What are people's thoughts around making breakpoint variables?

If amenable, I think the solution would be fairly straight forward. The breakpoints.css file could be updated to something like:

.radix-themes {
  --breakpoint-xs: 520px;
  --breakpoint-sm: 768px;
  --breakpoint-md: 1024px;
  --breakpoint-lg: 1280px;
  --breakpoint-xl: 1640px;
}

@custom-media --xs (min-width: var(--breakpoint-xs));
@custom-media --sm (min-width: var(--breakpoint-sm));
@custom-media --md (min-width: var(--breakpoint-md));
@custom-media --lg (min-width: var(--breakpoint-lg));
@custom-media --xl (min-width: var(--breakpoint-xl));

Long term, my hope is that Container could move from the following sizes:

.radix-themes {
  --container-1: 448px;
  --container-2: 688px;
  --container-3: 880px;
  --container-4: 1136px;
}

To something like:

.radix-themes {
  --container-xs: var(--breakpoint-xs);
  --container-sm: var(--breakpoint-sm);
  --container-md: var(--breakpoint-md);
  --container-lg: var(--breakpoint-lg);
  --container-xl: var(--breakpoint-xl);
}

I'm trying to style the TextField.Input and it's a bit impossible to do right now because there is an extra <div class="rt-TextFieldChrome"> rendered in markup that contains real styling, and the className from Input component is not applied to it.
Not really sure why this div exists, but it would be nice to be able to customize the component by adding classes to Input's className.

If a parent component has a color set, it is inherited by the children. This is useful in most cases, but I've found a few times I wanted to reset the component's color back to the theme accent. The way I've been accomplishing this is to override the color again on the child, but then it doesn't change with the theme accent

It would be nice to have a way to set a components color to match the theme color no matter what.

With no color specified on the link, it will be gray, inherited from parent callout

<Callout.Root color="gray">
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>
    <Callout.Text>
      You will need <Link href="#">admin privileges</Link> to install and access
      this application.
    </Callout.Text>
  </Callout.Root>

We can override the link's color to violet, but it won't change with the theme

<Callout.Root color="gray">
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>
    <Callout.Text>
      You will need <Link color="violet" href="#">admin privileges</Link> to install and access
      this application.
    </Callout.Text>
  </Callout.Root>

Proposed idea to be able to 'reset' the link's color back to the theme accent

<Callout.Root color="gray">
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>
    <Callout.Text>
      You will need <Link color="accent" href="#">admin privileges</Link> to install and access
      this application.
    </Callout.Text>
  </Callout.Root>

Warning: validateDOMNesting(...):

Description:

I am working with a hover card component that is displayed when hovering over the trigger element. However, when I click the trigger element while the cursor is still hovering over it, the hover card disappears, which is not the desired behavior. I want the hover card to remain visible even after clicking the trigger.

Here's the code snippet:

<Flex gap="1" align="center">
  <HoverCard.Root>
    <HoverCard.Trigger>
      <Flex
        gap="1"
        align="center"
        onClick={preventClickEvent}
      >
        <CubeIcon width="12" height="12" color="gray" />
        <RText
          color="gray"
          size="1"
          className="md:block hidden"
          style={{ cursor: "pointer" }}
        >
          file list
        </RText>
      </Flex>
    </HoverCard.Trigger>
    <HoverCard.Content>
      {/* content */}
    </HoverCard.Content>
  </HoverCard.Root>
  {/* other components */}
</Flex>

const preventClickEvent = (event: any) => {
  console.log("preventClickEvent");
  event.preventDefault();
  event.stopPropagation();
};

I tried to prevent the hover card from disappearing by adding a click event prevention function to the trigger element, but it had no effect.

Does anyone have a solution to keep the hover card visible after clicking the trigger element? Any assistance would be greatly appreciated.

It seems that the issue arises after setting appearance="dark" without properly setting the HTML attributes class="light-theme" and style="color-scheme: light;".

First of all thanks for this amazing library, I can't stop using it its so good!
I was just wondering if there's any plan to support RTL.
I tried the DirectionProvider and it doesn't work.

'use client'

import { DirectionProvider } from '@radix-ui/react-direction'

type Props = {
  children: React.ReactNode
}

const Direction = (props: Props) => {
  return <DirectionProvider dir='rtl'>{props.children}</DirectionProvider>
}

export default Direction

Thanks!

I'm attempting to create a dropdown component that not only behaves like a combobox but also supports multilevel dropdown menus. My current approach involves changing the trigger inside the DropDown component from a Button to TextField.Input. However, this is not working as expected, since Input cannot be focused like a Button and only allows for a click-like interaction.

I'd like the dropdown to behave like a typical dropdown, but the trigger component should be an input field, allowing for text entry, and then a click on this input field should open the dropdown with multilevel menu items.

I'm not sure how to proceed in order to make this work. Has anyone encountered a similar issue or can provide a solution to this problem?

      <DropdownMenu.Root>
        <DropdownMenu.Trigger>
          <TextField.Root style={{ border: "0px solid red" }}>
            <TextField.Slot
              style={{
                display: "flex",
                flexDirection: "row",
                justifyContent: "flex-end",
                alignItems: "center",
                border: "0px solid red",
              }}
            >
              <MagnifyingGlassIcon height="16" width="16" />
              {/* {!isFocused && inputRef.current?.value === "" && (
                <div className={cssStyle.fakeCursor}></div>
              )} */}
            </TextField.Slot>
            <TextField.Input
              style={{ border: "0px solid blue" }}
              placeholder="Search the docs…"
            />
          </TextField.Root>
        </DropdownMenu.Trigger>
        <DropdownMenu.Content>
          <DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>
          <DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>
          <DropdownMenu.Separator />
          <DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>

          <DropdownMenu.Sub>
            <DropdownMenu.SubTrigger>More</DropdownMenu.SubTrigger>
            <DropdownMenu.SubContent>
              <DropdownMenu.Item>Move to project…</DropdownMenu.Item>
              <DropdownMenu.Item>Move to folder…</DropdownMenu.Item>

              <DropdownMenu.Separator />
              <DropdownMenu.Item>Advanced options…</DropdownMenu.Item>
            </DropdownMenu.SubContent>
          </DropdownMenu.Sub>

          <DropdownMenu.Separator />
          <DropdownMenu.Item>Share</DropdownMenu.Item>
          <DropdownMenu.Item>Add to favorites</DropdownMenu.Item>
          <DropdownMenu.Separator />
          <DropdownMenu.Item shortcut="⌘ ⌫" color="red">
            Delete
          </DropdownMenu.Item>
        </DropdownMenu.Content>
      </DropdownMenu.Root>

Any assistance or pointers on how to make this implementation work would be greatly appreciated. Thank you!

👋 Enjoying the lib, but one thing I haven't been able to easily figure out is how to treat Link as a button, and Button as a link. For example, want to do these while preserving the original styles:

<Button href="...">View</Button>
<Link onClick={doSomething}>View</Link>

There is no card component on radix-ui themes. The card <Card> causes the react app "Cannot find module 'card' on @radix-ui/themes"

The example in the documentation doesn't work on click, but works on keyboard focus.

I tried this in Safari, Chrome, and Firefox on MacOS Ventura 13.5.

As far as I can tell, the recommended css file is 640kb+ unminified.

https://unpkg.com/browse/@radix-ui/[email protected]/styles.css

Is there a way to build only the css we need for the component we import?

How compatible is this with tailwind css

Hi, I am trying to install Radix in a plain React.js project and getting the following warnings when trying to import @radix-ui/themes:

import { Theme } from "@radix-ui/themes";

Warnings:

WARNING in ../../node_modules/@radix-ui/themes/dist/esm/theme-options.js
Module Warning (from ../../node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/arielweinberger/Development/pezzo/pezzo/node_modules/@radix-ui/themes/src/theme-options.tsx' file: Error: ENOENT: no such file or directory, open '/Users/arielweinberger/Development/pezzo/pezzo/node_modules/@radix-ui/themes/src/theme-options.tsx'

WARNING in ../../node_modules/@radix-ui/themes/dist/esm/theme-panel.js
Module Warning (from ../../node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/arielweinberger/Development/pezzo/pezzo/node_modules/@radix-ui/themes/src/theme-panel.tsx' file: Error: ENOENT: no such file or directory, open '/Users/arielweinberger/Development/pezzo/pezzo/node_modules/@radix-ui/themes/src/theme-panel.tsx'

WARNING in ../../node_modules/@radix-ui/themes/dist/esm/theme.js
Module Warning (from ../../node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/arielweinberger/Development/pezzo/pezzo/node_modules/@radix-ui/themes/src/theme.tsx' file: Error: ENOENT: no such file or directory, open '/Users/arielweinberger/Development/pezzo/pezzo/node_modules/@radix-ui/themes/src/theme.tsx'

I see a few other people facing the same issue:

• #8
• radix-ui/primitives#1848
• radix-ui/primitives#1835

I see no response about this from the maintainers. Are you able to provide an update about this? Would love to adopt Radix in some of my projects.

I seem to be able to import some components such as DropdownMenu like so:

import * as DropdownMenu from "@radix-ui/react-dropdown-menu";

But cannot import Theme.

Steps to reproduce

1. Create a new React app with create-react-app
2. Install Radix UI
3. Try to import and use <Theme>

The default letter spacing is:

  --letter-spacing-1: 0.0025em;
  --letter-spacing-2: 0em;
  --letter-spacing-3: 0em;
  --letter-spacing-4: -0.0025em;
  --letter-spacing-5: -0.005em;
  --letter-spacing-6: -0.00625em;
  --letter-spacing-7: -0.0075em;
  --letter-spacing-8: -0.01em;
  --letter-spacing-9: -0.025em;

Isn't that backwards?

Components like Avatar and Heading scale letter spacing with their size. So as the component grows in size, the text becomes closer together.

Could well be intentional, just thought I would check.

Also: Not sure why 2 & 3 share the same value. It seems like the implementation of, for example, Avatar is leaking into the letter spacing constants. Whereas, I think it would be better if Avatar did:

    }
    &.rt-r-size-2 {
      ...
      letter-spacing: var(--letter-spacing-3);
    }
    &.rt-r-size-3 {
      ...
      letter-spacing: var(--letter-spacing-3);
    }
    &

Instead of:

Also, if Heading is supposed to get closer as it grows in size, could simply do something like:

      letter-spacing: calc(-var(--letter-spacing-9) - var(--heading-letter-spacing));

As always, just trying to understand

asChild prop doesn't exist when on the <Table> components, can't seem to find any reference to asChild in the table.d.ts file. Docs mention that it should be available on multiple table components.

Using the latest version of @radix-ui/themes.

Hi

Will Radix Themes support all components from Radix Primitives like accordion, label, form and the rest?

Hi.
Is there any good first issue or starting point for this project ?

Thank you.

Trying to use it with Remix but got the error:

import { Theme } from "@radix-ui/themes";

SyntaxError: Named export 'Theme' not found. The requested module '@radix-ui/themes' is a CommonJS module, which may not support all module.exports as named exports.

It would be great if we could set

<Tabs.Root defaultValue="account" orientation = {{ initial: "vertical", md: "horizontal" }} >...

so that tabs look nice on both desktop and mobile.

When you want to access the colors there is no way to select the primary or secondary color, like this:
<Heading color="text-primary-content background-neutral-200"> Trabajo final de estructuras de datos y algoritmos </Heading>
It would be good if they take Daisyui as a reference for the topic of primary, secondary, neutral colors, etc.

Hi,

I've been using radix-ui for what I'm building and really enjoying it! One issue I ran into is often times I want to have a full width button/input (particularly on mobile). I'd like to be able to do something like

<Button fluid={{initial: true, md: false}}>...</Button>

I can work around this by attaching a css class that sets the width or wrapping the Button in a Flex component but that feels needlessly awkward.

Happy to take a crack at implementing this.

I have just installed remix-run with express server..Now I am trying to install radix-ui/themes but it is showing the following error

file:///Users/xxx/remix-express-radix-themes/build/index.js:134
import { Theme } from "@radix-ui/themes";
         ^^^^^
SyntaxError: Named export 'Theme' not found. The requested module '@radix-ui/themes' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@radix-ui/themes';
const { Theme } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
    at ModuleJob.run (node:internal/modules/esm/module_job:189:5)
    at async Promise.all (index 0)
    at ESMLoader.import (node:internal/modules/esm/loader:530:24)
    at file:///Users/xxx/remix-express-radix-themes/server.js:18:13

Here is the reproduction for the error - https://github.com/iamzee/remix-express-radix-themes
Just clone the repository and start the dev server

node -v 16.20.0

Namely, I wanted to use hover:bg-gray-200 (or any other bg color) class from Tailwind on the Card component to highlight the card mouse hovers over among many other cards, and it absolutely ignores it.

hover:cursor-pointer works just fine. I had to resort to force-injecting style via CSS file, and even then it only worked once I used !important tag:

.card-hover:hover {
background-image: #cacaca !important;
}

It still didn't work without the !important flag.

Hi guys,
I got a problem with TextField

Here is a screenshot of what I got when entered code from template to my component

More detailed info is on this screenshot of browser

To fix this on my side I've tried to pass type to TextField.Input but it didn't help me

I have gone through the components and found a need for calendar component. happy to create one

I get a hydration error when I try to use the tag. I haven't found a good solution for this so far.

layout.tsx

import "./globals.css";
import "@radix-ui/themes/styles.css";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { Theme } from "@radix-ui/themes";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <Theme>
        <body className={inter.className}>{children}</body>
      </Theme>
    </html>
  );
}

And I tried something. Create a radix-provider.tsx file and moved <Theme> in this file.

radix-provider.tsx

"use client";

import { useState, useEffect } from "react";
import { Theme } from "@radix-ui/themes";

export default function RadixProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return null;
  }

  return <Theme>{children}</Theme>;
}

And when i did this, convert layout.tsx file with:

import "./globals.css";
import "@radix-ui/themes/styles.css";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import RadixProvider from "./radix-provider";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <RadixProvider>
        <body className={inter.className}>{children}</body>
      </RadixProvider>
    </html>
  );
}

But it's didn't worked. Still getting Hydration error.

TextField.Input is losing focus everytime useState set is triggered onChange. This behavior doesn't happend in vanilla inputs using React. Is there any config I am missing or is this a bug?

const [projectBody, setProjectBody] = useState<ProjectForm>({
    name: "",
    description: "",
    category: "",
    budget: "",
  });

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;

    setProjectBody({ ...projectBody, [name]: value });
 };

<form action="" method="POST" className="flex flex-col gap-4">
      <label htmlFor="name">Name *</label>
        <TextField.Input
          size="3"
          name="name"
          id="name"
          placeholder="Cool App..."
          onChange={handleInputChange}
        />
</form>

Project deps:

• Next: 13.4.19
• @radix-ui/themes: 1.1.2
• million: 2.6.0-beta.11

<Tabs
   <Tabs.Trigger

Let's say I want to create a component that gives back <Tabs.Trigger... can I do that? How?

<Tabs
   <AcomponentthatReturnsTabTrigger 

I was trying something similar and I got an error saying unsuitable for render

Feature Request

Having something like indeterminate={true} in the checkbox would be welcome! Actually already have an indeterminate state 😄

I want to render another indicator when state is indeterminate. Can I do this?

I'm using radix-theme in a vite project. Got this type error from the lib itself :

ERROR(TypeScript) Interface 'ScrollAreaScrollbarImplProps' cannot simultaneously extend types 'Pick<Omit<DetailedHTMLProps<HTMLAttributes, HTMLDivElement>, "ref"> & { ref?: ((instance: HTMLDivElement | null) => void) | ... 2 more ... | undefined; } & { ...; }, "key" | ... 1 more ... | "asChild">' and 'ScrollAreaScrollbarImplPrivateProps'.
Named property 'onResize' of types 'Pick<Omit<DetailedHTMLProps<HTMLAttributes, HTMLDivElement>, "ref"> & { ref?: ((instance: HTMLDivElement | null) => void) | ... 2 more ... | undefined; } & { ...; }, "key" | ... 1 more ... | "asChild">' and 'ScrollAreaScrollbarImplPrivateProps' are not identical.
FILE /Users//node_modules/.pnpm/@radix-ui+react-scroll-area@1.0.4_@types+react-dom@18.2.7_@types[email protected][email protected][email protected]/node_modules/@radix-ui/react-scroll-area/dist/index.d.ts:96:11

  94 |     onResize(): void;
  95 | };
> 96 | interface ScrollAreaScrollbarImplProps extends PrimitiveDivProps, ScrollAreaScrollbarImplPrivateProps {
     |           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  97 | }
  98 | type ScrollAreaThumbElement = ScrollAreaThumbImplElement;
  99 | export interface ScrollAreaThumbProps extends ScrollAreaThumbImplProps {

[TypeScript] Found 1 error. Watching for file changes.

https://github.com/radix-ui/themes/blob/39f5a438db0d8496134d4bc35d71899fee1b2562/packages/radix-ui-themes/src/styles/tokens.css#L8C16-L8C16

These tokens should be in :root namespace.

Hello,

Thank you for this library! I really like it and I'm planning to use it on production.

I was wondering if you are planning to include loading indicator components such as spinners, bars and skeletons. On the other hand, the only way to create some sort of list currently is through the Table component, I was also wondering if you are going to incorporate list components (ul and ol)

Thank you!