Skip to content

Commit 6e17169

Browse files
pedro757balazsorban44
pedro757
and
balazsorban44
authored
chore(examples): add Radix UI example (vercel#41169)
fixes vercel#40072 ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm lint` - [x] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md) Co-authored-by: Balázs Orbán <[email protected]>
1 parent d5837e0 commit 6e17169

9 files changed

+301
-0
lines changed

‎examples/radix-ui/.gitignore

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# Dependencies
2+
/node_modules
3+
/.pnp
4+
.pnp.js
5+
6+
# Testing
7+
/coverage
8+
9+
# Next.js
10+
/.next/
11+
/out/
12+
13+
# Production
14+
/build
15+
16+
# Misc
17+
.DS_Store
18+
*.pem
19+
20+
# Debug
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*
24+
.pnpm-debug.log*
25+
26+
# Local env files
27+
.env*.local
28+
29+
# Vercel
30+
.vercel
31+
32+
# typescript
33+
*.tsbuildinfo
34+
next-env.d.ts

‎examples/radix-ui/README.md

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# Radix UI Example
2+
3+
This example showcases a few basic Radix UI components
4+
5+
## Deploy your own
6+
7+
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
8+
9+
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/radix-ui&project-name=radix-ui&repository-name=radix-ui)
10+
11+
## How to use
12+
13+
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
14+
15+
```bash
16+
npx create-next-app --example radix-ui radix-ui-app
17+
```
18+
19+
```bash
20+
yarn create next-app --example radix-ui radix-ui-app
21+
```
22+
23+
```bash
24+
pnpm create next-app --example radix-ui radix-ui-app
25+
```
26+
27+
Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

‎examples/radix-ui/package.json

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"private": true,
3+
"scripts": {
4+
"dev": "next dev",
5+
"build": "next build",
6+
"start": "next start"
7+
},
8+
"dependencies": {
9+
"@radix-ui/react-dropdown-menu": "1.0.0",
10+
"@radix-ui/react-icons": "1.1.1",
11+
"next": "latest",
12+
"react": "latest",
13+
"react-dom": "latest"
14+
},
15+
"devDependencies": {
16+
"@types/node": "18.8.0",
17+
"@types/react": "18.0.21",
18+
"autoprefixer": "10.4.12",
19+
"postcss": "8.4.17",
20+
"tailwindcss": "3.1.8",
21+
"typescript": "4.8.4"
22+
}
23+
}

‎examples/radix-ui/pages/_app.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import '../styles/globals.css'
2+
3+
export default function MyApp({ Component, pageProps }) {
4+
return <Component {...pageProps} />
5+
}

‎examples/radix-ui/pages/index.tsx

+175
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
import { useState } from 'react'
2+
import {
3+
HamburgerMenuIcon,
4+
DotFilledIcon,
5+
CheckIcon,
6+
ChevronRightIcon,
7+
} from '@radix-ui/react-icons'
8+
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
9+
10+
function RightSlot({ children }) {
11+
return (
12+
<div className="ml-auto pl-4 text-gray-500 group-hover:text-gray-200">
13+
{children}
14+
</div>
15+
)
16+
}
17+
18+
function DropdownMenuItem({ children, ...props }) {
19+
return (
20+
<DropdownMenu.Item
21+
{...props}
22+
className={
23+
'group bg-white hover:bg-gray-700 hover:text-gray-200 text-xs rounded flex items-center h-6 px-1 pl-6 relative select-none' +
24+
(props.disabled ? ' text-gray-500' : '')
25+
}
26+
>
27+
{children}
28+
</DropdownMenu.Item>
29+
)
30+
}
31+
32+
function DropdownMenuCheckboxItem({ children, ...props }) {
33+
return (
34+
<DropdownMenu.CheckboxItem
35+
{...props}
36+
className="group bg-white hover:bg-gray-700 hover:text-gray-200 text-xs rounded flex items-center h-6 px-1 pl-6 relative select-none"
37+
>
38+
{children}
39+
</DropdownMenu.CheckboxItem>
40+
)
41+
}
42+
43+
function DropdownMenuItemIndicator({ children, ...props }) {
44+
return (
45+
<DropdownMenu.ItemIndicator
46+
{...props}
47+
className="absolute left-0 w-6 inline-flex items-center justify-center"
48+
>
49+
{children}
50+
</DropdownMenu.ItemIndicator>
51+
)
52+
}
53+
54+
function Separator() {
55+
return <DropdownMenu.Separator className="h-[1px] bg-gray-300 m-1" />
56+
}
57+
58+
function DropdownMenuRadioItem({
59+
children,
60+
...props
61+
}: {
62+
children: React.ReactNode
63+
value: string
64+
}) {
65+
return (
66+
<DropdownMenu.RadioItem
67+
{...props}
68+
className="bg-white hover:bg-gray-700 hover:text-gray-200 text-xs rounded flex items-center h-6 px-1 pl-6 relative select-none"
69+
>
70+
{children}
71+
</DropdownMenu.RadioItem>
72+
)
73+
}
74+
75+
export default function Home() {
76+
const [bookmarksChecked, setBookmarksChecked] = useState(true)
77+
const [urlsChecked, setUrlsChecked] = useState(false)
78+
const [person, setPerson] = useState('pedro')
79+
return (
80+
<div className="h-screen w-full flex flex-col space-y-4 items-center justify-center bg-gradient-to-r from-cyan-500 to-blue-500">
81+
<h1 className="text-6xl text-white font-semibold">
82+
Radix UI + Tailwind CSS
83+
</h1>
84+
<h1 className="text-4xl text-white font-semibold">Click me!</h1>
85+
86+
<DropdownMenu.Root>
87+
<DropdownMenu.Trigger
88+
asChild
89+
className="bg-white text-xs rounded-3xl flex items-center h-8 px-2 relative select-none"
90+
>
91+
<button
92+
aria-label="Customise options"
93+
className="h-8 w-8 inline-flex items-center justify-center shadow-lg"
94+
>
95+
<HamburgerMenuIcon />
96+
</button>
97+
</DropdownMenu.Trigger>
98+
99+
<DropdownMenu.Content
100+
sideOffset={5}
101+
className="bg-white rounded p-1 shadow-lg"
102+
>
103+
<DropdownMenuItem>
104+
New Tab <RightSlot>⌘+T</RightSlot>
105+
</DropdownMenuItem>
106+
<DropdownMenuItem>
107+
New Window <RightSlot>⌘+N</RightSlot>
108+
</DropdownMenuItem>
109+
<DropdownMenuItem disabled>
110+
New Private Window <RightSlot>⇧+⌘+N</RightSlot>
111+
</DropdownMenuItem>
112+
<DropdownMenu.Sub>
113+
<DropdownMenu.SubTrigger className="group bg-white hover:bg-gray-700 hover:text-gray-200 hover:border-0 text-xs rounded flex items-center h-6 px-1 pl-6 relative select-none">
114+
More Tools
115+
<RightSlot>
116+
<ChevronRightIcon />
117+
</RightSlot>
118+
</DropdownMenu.SubTrigger>
119+
<DropdownMenu.SubContent
120+
sideOffset={2}
121+
alignOffset={-5}
122+
className="bg-white rounded p-1 shadow-lg"
123+
>
124+
<DropdownMenuItem>
125+
Save Page As… <RightSlot>⌘+S</RightSlot>
126+
</DropdownMenuItem>
127+
<DropdownMenuItem>Create Shortcut…</DropdownMenuItem>
128+
<DropdownMenuItem>Name Window…</DropdownMenuItem>
129+
<Separator />
130+
<DropdownMenuItem>Developer Tools</DropdownMenuItem>
131+
</DropdownMenu.SubContent>
132+
</DropdownMenu.Sub>
133+
<Separator />
134+
<DropdownMenuCheckboxItem
135+
checked={bookmarksChecked}
136+
onCheckedChange={setBookmarksChecked}
137+
>
138+
<DropdownMenuItemIndicator>
139+
<CheckIcon />
140+
</DropdownMenuItemIndicator>
141+
Show Bookmarks <RightSlot>⌘+B</RightSlot>
142+
</DropdownMenuCheckboxItem>
143+
<DropdownMenuCheckboxItem
144+
checked={urlsChecked}
145+
onCheckedChange={setUrlsChecked}
146+
>
147+
<DropdownMenuItemIndicator>
148+
<CheckIcon />
149+
</DropdownMenuItemIndicator>
150+
Show Full URLs
151+
</DropdownMenuCheckboxItem>
152+
<Separator />
153+
<DropdownMenu.Label className="pl-6 leading-6 text-xs text-gray-700">
154+
Contributors
155+
</DropdownMenu.Label>
156+
157+
<DropdownMenu.RadioGroup value={person} onValueChange={setPerson}>
158+
<DropdownMenuRadioItem value="pedro">
159+
<DropdownMenuItemIndicator>
160+
<DotFilledIcon />
161+
</DropdownMenuItemIndicator>
162+
Pedro Sanchez
163+
</DropdownMenuRadioItem>
164+
<DropdownMenuRadioItem value="pablo">
165+
<DropdownMenuItemIndicator>
166+
<DotFilledIcon />
167+
</DropdownMenuItemIndicator>
168+
Pablo Sanchez
169+
</DropdownMenuRadioItem>
170+
</DropdownMenu.RadioGroup>
171+
</DropdownMenu.Content>
172+
</DropdownMenu.Root>
173+
</div>
174+
)
175+
}

‎examples/radix-ui/postcss.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎examples/radix-ui/styles/globals.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

‎examples/radix-ui/tailwind.config.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/** @type {import('tailwindcss').Config} */
2+
module.exports = {
3+
content: ['./pages/**/*.{js,ts,jsx,tsx}'],
4+
theme: {
5+
extend: {},
6+
},
7+
plugins: [],
8+
}

‎examples/radix-ui/tsconfig.json

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es5",
4+
"lib": ["dom", "dom.iterable", "esnext"],
5+
"allowJs": true,
6+
"skipLibCheck": true,
7+
"strict": false,
8+
"forceConsistentCasingInFileNames": true,
9+
"noEmit": true,
10+
"incremental": true,
11+
"esModuleInterop": true,
12+
"module": "esnext",
13+
"moduleResolution": "node",
14+
"resolveJsonModule": true,
15+
"isolatedModules": true,
16+
"jsx": "preserve"
17+
},
18+
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
19+
"exclude": ["node_modules"]
20+
}

0 commit comments

Comments
 (0)