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でもよい)
コンポーネントが豊富にあるので、すぐにプロジェクトを立ち上げたいときなどは便利そう