Radix UI で遊ぶ

薄田達哉 / tatsuyasusukida 4ヶ月前

このスクラップについて

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

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

薄田達哉 / tatsuyasusukida 4ヶ月前に更新

プロジェクト作成

コマンド

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

薄田達哉 / tatsuyasusukida 4ヶ月前

インストール

コマンド

npm install @radix-ui/themes

薄田達哉 / tatsuyasusukida 4ヶ月前

サーバー起動

コマンド

npm run dev

薄田達哉 / tatsuyasusukida 4ヶ月前

CSS ファイルのインポート

src/pages/_app.tsx（追記）

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

薄田達哉 / tatsuyasusukida 4ヶ月前に更新

globals.css の書き換え

src/styles/globals.css

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

薄田達哉 / tatsuyasusukida 4ヶ月前

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 4ヶ月前

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 4ヶ月前に更新

現在の状態

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

薄田達哉 / tatsuyasusukida 4ヶ月前

はじめてのコーディング

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 4ヶ月前

実行結果

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

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

薄田達哉 / tatsuyasusukida 4ヶ月前

次にやること

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

薄田達哉 / tatsuyasusukida 4ヶ月前

テーマのカスタマイズ

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 4ヶ月前

実行結果

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

薄田達哉 / tatsuyasusukida 4ヶ月前

テーマパネルを使う

src/pages/_app.tsx

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

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

薄田達哉 / tatsuyasusukida 4ヶ月前

テーマパネルの様子

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

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

薄田達哉 / tatsuyasusukida 4ヶ月前

Tailwind Preset

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

薄田達哉 / tatsuyasusukida 4ヶ月前

次にやること

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

薄田達哉 / tatsuyasusukida 4ヶ月前

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

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 4ヶ月前に更新

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 4ヶ月前

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 3ヶ月前に更新

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 3ヶ月前

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 3ヶ月前

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 3ヶ月前

このスクラップについて

プロジェクト作成

インストール

サーバー起動

CSS ファイルのインポート

globals.css の書き換え

index.tsx の書き換え

Theme で囲む

現在の状態

はじめてのコーディング

実行結果

次にやること

テーマのカスタマイズ

実行結果

テーマパネルを使う

テーマパネルの様子

Tailwind Preset

次にやること

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

Box

Flex

Grid

Container

Section

次は Text