Radix UI で遊ぶ

薄田達哉 / tatsuyasusukida

このスクラップについて

このスクラップでは前々から気になっていた Radix UI のドキュメントを読んで色々試していく過程を記録する。

https://www.radix-ui.com/

薄田達哉 / tatsuyasusukida

プロジェクト作成

コマンド

cd ~/workspace
npx create-next-app@latest \
  --typescript \
  --tailwind \
  --eslint \
  --src-dir \
  --import-alias "@/*" \
  --use-npm \
  hello-radix-ui
cd hello-radix-ui

薄田達哉 / tatsuyasusukida

インストール

コマンド

npm install @radix-ui/themes

薄田達哉 / tatsuyasusukida

サーバー起動

コマンド

npm run dev

薄田達哉 / tatsuyasusukida

CSS ファイルのインポート

src/pages/_app.tsx（追記）

import '@radix-ui/themes/styles.css';

薄田達哉 / tatsuyasusukida

globals.css の書き換え

src/styles/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

薄田達哉 / tatsuyasusukida

index.tsx の書き換え

src/pages/index.tsx

export default function Home() {
  return (
    <main className="container mx-auto px-4">
      <h1 className="mt-4 mb-4 text-2xl">Hello Radix UI</h1>
    </main>
  );
}

薄田達哉 / tatsuyasusukida

Theme で囲む

src/pages/_app.tsx

import "@/styles/globals.css";
import { Theme } from "@radix-ui/themes";
import "@radix-ui/themes/styles.css";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <Theme>
      <Component {...pageProps} />
    </Theme>
  );
}

薄田達哉 / tatsuyasusukida

現在の状態

今の所は見出しがあるだけ。

薄田達哉 / tatsuyasusukida

はじめてのコーディング

src/pages/index.tsx

import { Button, Flex, Text } from "@radix-ui/themes";

export default function Home() {
  return (
    <main className="container mx-auto px-4">
      <h1 className="mt-4 mb-4 text-2xl">Hello Radix UI</h1>
      <Flex direction="column" gap="2">
        <Text>Hello from Radix Themes :)</Text>
        <Button>Let&apos;s go</Button>
      </Flex>
    </main>
  );
}

薄田達哉 / tatsuyasusukida

実行結果

良い感じのボタンが表示された。

ホバー時にカーソルがポインタにならないのが少し気になる。

薄田達哉 / tatsuyasusukida

次にやること

テーマのカスタマイズをやってみよう。

薄田達哉 / tatsuyasusukida

テーマのカスタマイズ

src/pages/_app.tsx

import "@/styles/globals.css";
import { Theme } from "@radix-ui/themes";
import "@radix-ui/themes/styles.css";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <Theme accentColor="crimson" grayColor="sand" radius="large" scaling="95%">
      <Component {...pageProps} />
    </Theme>
  );
}

薄田達哉 / tatsuyasusukida

実行結果

ボタンがピンク色・角丸・小さめになった。

薄田達哉 / tatsuyasusukida

テーマパネルを使う

src/pages/_app.tsx

import { Theme, ThemePanel } from '@radix-ui/themes';

export default function () {
  return (
    <Theme>
      <MyApp />
      <ThemePanel />
    </Theme>
  );
}

薄田達哉 / tatsuyasusukida

テーマパネルの様子

カラーをクリックするとボタンの色などが変わる。

Mac の場合は Command + C で出したりしまったりできる。

薄田達哉 / tatsuyasusukida

Tailwind Preset

何ができるのかはよくわからないけど上のソースコードと Tailwind の設定ファイルの書き方を見比べたら理解できるのかも知れない。

薄田達哉 / tatsuyasusukida

次にやること

Primitives も面白そうだけどまずは Box とか Text とかで遊んでみよう。

薄田達哉 / tatsuyasusukida

テーマパネルを無効にする。

src/pages/_app.tsx から ThemePanel をコメントアウトする。

ついでにインポートも削除しておこう。

src/pages/_app.tsx

import "@/styles/globals.css";
import { Theme } from "@radix-ui/themes";
import "@radix-ui/themes/styles.css";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <Theme accentColor="crimson" grayColor="sand" radius="large" scaling="95%">
      <Component {...pageProps} />
      {/* <ThemePanel></ThemePanel> */}
    </Theme>
  );
}

薄田達哉 / tatsuyasusukida

Box

コマンド

touch src/pages/box.tsx

src/pages/box.tsx

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

export default function BoxPage() {
  return (
    <main className="container mx-auto px-4">
      <h1 className="mt-4 mb-4 text-2xl">Box</h1>
      <Box>Box</Box>
      <Box>Box</Box>
      <Box>Box</Box>
    </main>
  );
}

3 つの Box が改行して表示される。

薄田達哉 / tatsuyasusukida

Flex

コマンド

touch src/pages/flex.tsx

src/pages/flex.tsx

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

export default function FlexPage() {
  return (
    <main className="container mx-auto px-4">
      <h1 className="mt-4 mb-4 text-2xl">Flex</h1>
      <Flex gap="3">
        <Box>Flex</Box>
        <Box>Flex</Box>
        <Box>Flex</Box>
      </Flex>
    </main>
  );
}

3 つの Flex が横並びで表示される。

薄田達哉 / tatsuyasusukida

Grid

コマンド

touch src/pages/grid.tsx

src/pages/grid.tsx

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

export default function GridPage() {
  return (
    <main className="container mx-auto px-4">
      <h1 className="mt-4 mb-4 text-2xl">Grid</h1>
      <Grid columns="3" gap="3" width="">
        <Box>Grid</Box>
        <Box>Grid</Box>
        <Box>Grid</Box>
        <Box>Grid</Box>
        <Box>Grid</Box>
        <Box>Grid</Box>
      </Grid>
    </main>
  );
}

6 つの Grid が 2 行 3 列で表示される。

薄田達哉 / tatsuyasusukida

Container

コマンド

touch src/pages/container.tsx

src/pages/container.tsx

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

export default function ContainerPage() {
  return (
    <main className="container mx-auto px-4">
      <h1 className="mt-4 mb-4 text-2xl">Container</h1>
      <Container size="1">
        <Box>Container</Box>
      </Container>
    </main>
  );
}

Container が幅狭めで表示される。

薄田達哉 / tatsuyasusukida

Section

コマンド

touch src/pages/section.tsx

src/pages/section.tsx

import { Box, Container, Grid, Section } from "@radix-ui/themes";

export default function SectionPage() {
  return (
    <main className="container mx-auto px-4">
      <h1 className="mt-4 mb-4 text-2xl">Section</h1>
      <Section size="3">Section</Section>
    </main>
  );
}

Section に大きく上下のパディングがついて表示される。

勝手にパディングがついてしまうのは少し使いにくい気がする。

薄田達哉 / tatsuyasusukida

このスクラップについて

プロジェクト作成

インストール

サーバー起動

CSS ファイルのインポート

globals.css の書き換え

index.tsx の書き換え

Theme で囲む

現在の状態

はじめてのコーディング

実行結果

次にやること

テーマのカスタマイズ

実行結果

テーマパネルを使う

テーマパネルの様子

Tailwind Preset

次にやること

テーマパネルを無効にする。

Box

Flex

Grid

Container

Section

次は Text