【Radix UI】Radix UIとは？

Radix UI というライブラリのバージョン 1.0.0 がでたらしく、調べてみた

https://www.radix-ui.com/docs/primitives/overview/releases

Redix UI は Headless UI コンポーネントで Tailwind のHeadless UI と同様の位置付け

ただ、完成度がTailwindより高く人気があるみたい

使い方

// Popover.tsx
import { styled } from '@stitches/react';
import * as PopoverPrimitive from '@radix-ui/react-popover';

export const Popover = PopoverPrimitive.Root;
export const PopoverTrigger = PopoverPrimitive.Trigger;
export const PopoverContent = styled(PopoverPrimitive.Content, {
  // your styles
});

// App.tsx
import {
  Popover,
  PopoverTrigger,
  PopoverContent,
} from 'your-components/Popover';

function App() {
  return (
    <Popover>
      <PopoverTrigger>トリガー</PopoverTrigger>
      <PopoverContent>コンテンツ</PopoverContent>
    </Popover>
  );
}

これだけで、ボタンをクリックしたらコンテンツが表示されるUIが作れた

ここで使っているStichesというのは同社のライブラリでStyled-Componentsに並ぶ CSS-in-JS ライブラリみたい（これは別にStyled-Componentsでもよい）

https://stitches.dev/

コンポーネントが豊富にあるので、すぐにプロジェクトを立ち上げたいときなどは便利そう