npm create vite@latest gui -- --template react-ts

Would you like to use TypeScript (recommended)? no / yes -> yes
Which style would you like to use? › Default -> Default
Which color would you like to use as base color? › Slate -> Slate
Where is your global CSS file? › › src/index.css -> src/index.css.  (以前間違えた!)
Do you want to use CSS variables for colors? › no / yes -> yes
Are you using a custom tailwind prefix eg. tw-? (Leave blank if not) -> blank
Where is your tailwind.config.js located? › tailwind.config.js  -> tailwind.config.js
Configure the import alias for components: › @/components -> @/components
Configure the import alias for utils: › @/lib/utils -> @/lib/utils
Are you using React Server Components? › no / yes (no) -> no
Write configuration to components.json. Proceed? > yes

npx shadcn-ui@latest add button input label table textarea tabs dropdown-menu

npm install react-router-dom

mkdir src/components/pages
touch src/components/pages/component.tsx

export default function Component() {
  return (
      <>
        <div>hoge</div>
      </>
  )
}

import './App.css'
import Component from "@/components/pages/component.tsx";
import {
    BrowserRouter as Router,
    Routes,
    Route,
} from 'react-router-dom';

function App() {

  return (
        <Router>
            <Routes>
                <Route path="/" element={<Component />}/>
            </Routes>
        </Router>
  )
}

export default App

✔ Which style would you like to use? › Default
✔ Which color would you like to use as base color? › Zinc
✔ Would you like to use CSS variables for colors? … no / yes -> yes