[Proposal]: add html5 semantic elements to Box eg: header, nav, article etc

[oluijks]

To keep the markup simple and for people who really care about semantics it would be nice to expand the box props with some of the html5 elements.

<Box as={"div" | "span"} />

<Box as={"div" | "span" | "article" | "header" | "nav" } />

[stevesims]

seconded.

I'm currently in the process of adopting Radix themes as the basis for a component library, and this was literally my first stumbling block. I want to have a "Header" component that uses a semantic HTML header element.

My workaround is as follows:

import { Box, BoxProps } from "@radix-ui/themes";

export function Header({ children, ...props }: BoxProps) {
  return (
    <Box asChild {...props}>
      <header>{children}</header>
    </Box>
  );
}

being able to directly use as to pick an appropriate semantic element would be much nicer DX