├── .gitignore ├── README.md ├── favicon.ico ├── index.html ├── package.json ├── public └── preview.png ├── src ├── App.css ├── App.tsx ├── components │ └── CustomSandpack.tsx ├── examples │ ├── Accordion.tsx │ ├── AlertDialog.tsx │ ├── AspectRatio.tsx │ ├── Avatar.tsx │ ├── Checkbox.tsx │ ├── Collapsible.tsx │ ├── ContextMenu.tsx │ ├── Dialog.tsx │ ├── DropdownMenu.tsx │ ├── HoverCard.tsx │ ├── Label.tsx │ ├── NavigationMenu.tsx │ ├── Popover.tsx │ ├── Progress.tsx │ ├── RadioGroup.tsx │ ├── ScrollArea.tsx │ ├── Select.tsx │ ├── Separator.tsx │ ├── Slider.tsx │ ├── Switch.tsx │ ├── Tabs.tsx │ ├── Toast.tsx │ ├── Toggle.tsx │ ├── ToggleGroup.tsx │ ├── Toolbar.tsx │ └── Tooltip.tsx ├── favicon.svg ├── main.tsx └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json ├── vite.config.ts └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | 26 | 27 | TODO.md 28 | .vercel 29 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Radix Primitives Cheatsheet 2 | 3 | > Visit this site at [https://radix-primitives-cheatsheet.tone-row.com/](https://radix-primitives-cheatsheet.tone-row.com/) 4 | 5 | I love the components offered by [Radix-UI Primitives](https://github.com/radix-ui/primitives). I wanted to lower the bar to using them for myself and others by providing a quick reference for the most common use cases. This cheatsheet is intended to show the minimum content, props, and styles needed to make each primitive perform its intended function. 6 | 7 | ## Contributions 8 | 9 | Contributions are welcome! Please submit a pull request or open an issue if you have any questions or suggestions. 10 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tone-row/radix-primitives-cheatsheet/50a768516e47996b7451e3a58b531a3838c8ec69/favicon.ico -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | Radix Primitives Cheatsheet 12 | 16 | 17 | 21 | 22 | 23 | 27 | 31 | 32 | 33 | 37 | 41 | 42 | 46 | 50 | 51 | 55 | 64 | 65 | 66 |
67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dizzy-components-1", 3 | "private": true, 4 | "version": "0.0.0", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "tsc && vite build", 8 | "preview": "vite preview" 9 | }, 10 | "dependencies": { 11 | "@codesandbox/sandpack-react": "^0.14.5", 12 | "@radix-ui/react-accordion": "^0.1.6", 13 | "@radix-ui/react-alert-dialog": "^0.1.7", 14 | "@radix-ui/react-aspect-ratio": "^0.1.4", 15 | "@radix-ui/react-avatar": "^0.1.4", 16 | "@radix-ui/react-checkbox": "^0.1.5", 17 | "@radix-ui/react-context-menu": "^0.1.6", 18 | "@radix-ui/react-dropdown-menu": "^0.1.6", 19 | "@radix-ui/react-hover-card": "^0.1.5", 20 | "@radix-ui/react-label": "^0.1.5", 21 | "@radix-ui/react-navigation-menu": "^0.1.2", 22 | "@radix-ui/react-popover": "^0.1.6", 23 | "@radix-ui/react-progress": "^0.1.4", 24 | "@radix-ui/react-radio-group": "^0.1.5", 25 | "@radix-ui/react-scroll-area": "^0.1.4", 26 | "@radix-ui/react-select": "^0.1.1", 27 | "@radix-ui/react-separator": "^0.1.4", 28 | "@radix-ui/react-slider": "^0.1.4", 29 | "@radix-ui/react-switch": "^0.1.5", 30 | "@radix-ui/react-tabs": "^0.1.5", 31 | "@radix-ui/react-toast": "^0.1.1", 32 | "@radix-ui/react-toggle": "^0.1.4", 33 | "@radix-ui/react-toggle-group": "^0.1.5", 34 | "@radix-ui/react-toolbar": "^0.1.5", 35 | "@radix-ui/react-tooltip": "^0.1.7", 36 | "@stitches/react": "^1.2.7", 37 | "prettier": "^2.5.1", 38 | "react": "^17.0.2", 39 | "react-dom": "^17.0.2", 40 | "react-router-dom": "6" 41 | }, 42 | "devDependencies": { 43 | "@types/node": "^17.0.21", 44 | "@types/prettier": "^2.4.4", 45 | "@types/react": "^17.0.33", 46 | "@types/react-dom": "^17.0.10", 47 | "@vitejs/plugin-react": "^1.0.7", 48 | "typescript": "^4.5.4", 49 | "vite": "^2.8.0" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /public/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tone-row/radix-primitives-cheatsheet/50a768516e47996b7451e3a58b531a3838c8ec69/public/preview.png -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;600&display=swap"); 2 | 3 | body { 4 | font-family: "Work Sans", sans-serif; 5 | font-weight: 300; 6 | background-color: whitesmoke; 7 | --accent: 113, 91%, 78%; 8 | --purple: #3a19c7; 9 | --radius: 3px; 10 | accent-color: var(--purple); 11 | } 12 | 13 | *:focus-visible { 14 | outline: var(--purple) auto 1px; 15 | } 16 | 17 | a:focus-visible { 18 | outline: var(--purple) auto 1px; 19 | } 20 | 21 | h1, 22 | h2 { 23 | font-weight: 600; 24 | line-height: 1; 25 | } 26 | 27 | h2 { 28 | font-size: 24px; 29 | margin-bottom: 4px; 30 | } 31 | 32 | .App { 33 | padding: 1rem; 34 | max-width: 1300px; 35 | margin: 0 auto; 36 | } 37 | 38 | .App-header { 39 | display: grid; 40 | gap: 2rem; 41 | padding: 2rem 0; 42 | } 43 | 44 | nav { 45 | max-width: 1100px; 46 | margin-inline: auto; 47 | border-radius: var(--radius); 48 | } 49 | 50 | .App-header nav ul { 51 | display: flex; 52 | justify-content: center; 53 | column-gap: 0.25rem; 54 | row-gap: 0.25rem; 55 | flex-wrap: wrap; 56 | } 57 | 58 | .App-header nav li { 59 | display: inline; 60 | font-size: 13px; 61 | } 62 | 63 | .App-header nav a { 64 | display: block; 65 | padding: 5px; 66 | border-radius: var(--radius); 67 | background-color: hsla(var(--accent), 0); 68 | transition: background-color 0.2s ease-in-out; 69 | } 70 | .App-header nav a:hover { 71 | background-color: hsla(var(--accent), 0.25); 72 | } 73 | 74 | .App-header nav a[aria-current="page"] { 75 | background-color: hsla(var(--accent), 1); 76 | } 77 | 78 | h1 { 79 | font-size: 36px; 80 | text-align: center; 81 | } 82 | 83 | .offsite-link { 84 | color: var(--purple); 85 | font-size: 0.7rem; 86 | font-weight: 600; 87 | white-space: nowrap; 88 | width: 100%; 89 | overflow: hidden; 90 | text-overflow: ellipsis; 91 | } 92 | 93 | .brand { 94 | background-color: var(--purple); 95 | padding: 0.25rem 0.5rem; 96 | display: flex; 97 | justify-content: space-between; 98 | } 99 | 100 | .title { 101 | text-align: center; 102 | justify-self: center; 103 | } 104 | 105 | main { 106 | display: grid; 107 | gap: 1rem; 108 | grid-template: auto / minmax(0, 1fr); 109 | } 110 | 111 | .brand a { 112 | color: white; 113 | } 114 | 115 | .sp-cube-wrapper { 116 | bottom: auto; 117 | top: var(--sp-space-2); 118 | } 119 | 120 | @media (min-width: 768px) { 121 | h2 { 122 | font-size: 32px; 123 | } 124 | 125 | .App-header nav li { 126 | font-size: 14.4px; 127 | } 128 | 129 | h1 { 130 | font-size: 48px; 131 | } 132 | 133 | .offsite-link { 134 | font-size: 0.8rem; 135 | } 136 | 137 | .title { 138 | text-align: right; 139 | } 140 | 141 | .App-header nav ul { 142 | column-gap: 0.6rem; 143 | row-gap: 0.5rem; 144 | } 145 | } 146 | 147 | .example-title { 148 | overflow: hidden; 149 | text-overflow: ellipsis; 150 | } 151 | -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import "@codesandbox/sandpack-react/dist/index.css"; 3 | 4 | import { NavLink, useLocation } from "react-router-dom"; 5 | import { ReactElement, Suspense, lazy, useEffect, useState } from "react"; 6 | 7 | const examples = [ 8 | "Accordion", 9 | "AlertDialog", 10 | "AspectRatio", 11 | "Avatar", 12 | "Checkbox", 13 | "Collapsible", 14 | "ContextMenu", 15 | "Dialog", 16 | "DropdownMenu", 17 | "HoverCard", 18 | "Label", 19 | "NavigationMenu", 20 | "Popover", 21 | "Progress", 22 | "RadioGroup", 23 | "ScrollArea", 24 | "Select", 25 | "Separator", 26 | "Slider", 27 | "Switch", 28 | "Tabs", 29 | "Toast", 30 | "Toggle", 31 | "ToggleGroup", 32 | "Toolbar", 33 | "Tooltip", 34 | ]; 35 | 36 | const importExample = (name: string) => 37 | lazy(() => import(`./examples/${name}.tsx`)); 38 | 39 | function App() { 40 | const [example, setExample] = useState(() => <>{null}); 41 | const location = useLocation(); 42 | const hash = location.pathname.slice(1); 43 | useEffect(() => { 44 | async function loadExample() { 45 | const Example = importExample(hash); 46 | setExample(); 47 | } 48 | if (hash) { 49 | loadExample(); 50 | } 51 | }, [hash]); 52 | useEffect(() => { 53 | if (hash === "") { 54 | // push to random example 55 | window.location.hash = 56 | "/" + examples[Math.floor(Math.random() * examples.length)]; 57 | } 58 | }, []); 59 | const documentationUrl = `https://www.radix-ui.com/docs/primitives/components/${hash 60 | .replaceAll(/[A-Z]/g, (c) => `-${c.toLowerCase()}`) 61 | .slice(1)}`; 62 | return ( 63 |
64 |
65 |
66 |

Radix Primitives Cheatsheet

67 | 68 | {"https://www.radix-ui.com/"} 69 | 70 |
71 | 80 |
81 |
82 |
83 |

{hash}

84 | 85 | {documentationUrl} 86 | 87 |
88 | Loading...
}>{example} 89 | 90 | 91 | ); 92 | } 93 | 94 | export default App; 95 | -------------------------------------------------------------------------------- /src/components/CustomSandpack.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Sandpack, 3 | SandpackProps, 4 | githubLightTheme, 5 | } from "@codesandbox/sandpack-react"; 6 | 7 | export const CustomSandpack = ({ 8 | files = {}, 9 | options = {}, 10 | customSetup = {}, 11 | }: SandpackProps) => ( 12 | 35 | ); 36 | -------------------------------------------------------------------------------- /src/examples/Accordion.tsx: -------------------------------------------------------------------------------- 1 | import { CustomSandpack } from "../components/CustomSandpack"; 2 | import babel from "prettier/parser-babel"; 3 | import prettier from "prettier/standalone"; 4 | 5 | const code = `import * as Accordion from "@radix-ui/react-accordion"; 6 | 7 | export default function App() { 8 | return ( 9 | 10 | 11 | 12 | Option 1 13 | 14 | 15 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod 16 | voluptates ea aspernatur! Nesciunt culpa officiis, assumenda 17 | sequi, odit debitis, eos natus minima doloremque nemo vel sunt 18 | iste id at cupiditate. 19 | 20 | 21 | 22 | 23 | Option 2 24 | 25 | 26 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod 27 | voluptates ea aspernatur! Nesciunt culpa officiis, assumenda 28 | sequi, odit debitis, eos natus minima doloremque nemo vel sunt 29 | iste id at cupiditate. 30 | 31 | 32 | 33 | ); 34 | } 35 | `; 36 | 37 | const Example = () => ( 38 | 55 | ); 56 | export default Example; 57 | -------------------------------------------------------------------------------- /src/examples/AlertDialog.tsx: -------------------------------------------------------------------------------- 1 | import { CustomSandpack } from "../components/CustomSandpack"; 2 | import babel from "prettier/parser-babel"; 3 | import prettier from "prettier/standalone"; 4 | 5 | const code = `import * as AlertDialog from '@radix-ui/react-alert-dialog'; 6 | 7 | export default function App() { 8 | return ( 9 | Click Me 10 | 11 | 21 | 30 | Hello World 31 | 32 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. In 33 | exercitationem animi qui laudantium cum accusamus nulla nostrum. 34 | Quisquam natus voluptatibus rem laudantium accusamus, magnam 35 | atque quasi sunt officia quaerat ullam! 36 | 37 | Cancel 38 | OK 39 | 40 | 41 | ) 42 | }`; 43 | 44 | const Example = () => ( 45 | 62 | ); 63 | export default Example; 64 | -------------------------------------------------------------------------------- /src/examples/AspectRatio.tsx: -------------------------------------------------------------------------------- 1 | import { CustomSandpack } from "../components/CustomSandpack"; 2 | import babel from "prettier/parser-babel"; 3 | import prettier from "prettier/standalone"; 4 | 5 | const code = `import * as AspectRatio from "@radix-ui/react-aspect-ratio"; 6 | 7 | export default function App() { 8 | return ( 9 |
10 | 11 | Kitten 16 | 17 |
18 | ); 19 | } 20 | `; 21 | 22 | const Example = () => ( 23 | 40 | ); 41 | export default Example; 42 | -------------------------------------------------------------------------------- /src/examples/Avatar.tsx: -------------------------------------------------------------------------------- 1 | import { CustomSandpack } from "../components/CustomSandpack"; 2 | import babel from "prettier/parser-babel"; 3 | import prettier from "prettier/standalone"; 4 | 5 | const code = `import * as Avatar from "@radix-ui/react-avatar"; 6 | 7 | export default function App() { 8 | return ( 9 | 10 | 11 | Kitten 12 | 13 | ); 14 | } 15 | `; 16 | 17 | const Example = () => ( 18 | 35 | ); 36 | export default Example; 37 | -------------------------------------------------------------------------------- /src/examples/Checkbox.tsx: -------------------------------------------------------------------------------- 1 | import { CustomSandpack } from "../components/CustomSandpack"; 2 | import babel from "prettier/parser-babel"; 3 | import prettier from "prettier/standalone"; 4 | 5 | const code = `import * as Checkbox from "@radix-ui/react-checkbox"; 6 | 7 | export default function App() { 8 | return ( 9 | 10 | 11 | Checkbox Item 12 | 13 | ); 14 | } 15 | 16 | `; 17 | 18 | const Example = () => ( 19 | 36 | ); 37 | export default Example; 38 | -------------------------------------------------------------------------------- /src/examples/Collapsible.tsx: -------------------------------------------------------------------------------- 1 | import { CustomSandpack } from "../components/CustomSandpack"; 2 | import babel from "prettier/parser-babel"; 3 | import prettier from "prettier/standalone"; 4 | 5 | const code = `import * as Collapsible from "@radix-ui/react-collapsible"; 6 | 7 | export default function App() { 8 | return ( 9 | 10 | Collapsible Trigger 11 | 12 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi temporibus, magni enim aspernatur repudiandae consequatur recusandae illo labore deleniti a necessitatibus aliquam ipsum. Molestias consequatur ut maiores veritatis. Voluptatum, optio. 13 | 14 | ); 15 | } 16 | `; 17 | 18 | const Example = () => ( 19 | 36 | ); 37 | export default Example; 38 | -------------------------------------------------------------------------------- /src/examples/ContextMenu.tsx: -------------------------------------------------------------------------------- 1 | import { CustomSandpack } from "../components/CustomSandpack"; 2 | import babel from "prettier/parser-babel"; 3 | import prettier from "prettier/standalone"; 4 | 5 | const code = `import * as ContextMenu from "@radix-ui/react-context-menu"; 6 | 7 | export default function App() { 8 | return ( 9 | 10 | Right-click this text to open a Context Menu 11 | 12 | Items Label 13 | Item One 14 | Item Two 15 | Item Three 16 | 17 | Items Label 18 | Item Four 19 | Item Five 20 | Item Six 21 | 22 | 23 | ); 24 | } 25 | `; 26 | 27 | const Example = () => ( 28 | 45 | ); 46 | export default Example; 47 | -------------------------------------------------------------------------------- /src/examples/Dialog.tsx: -------------------------------------------------------------------------------- 1 | import { CustomSandpack } from "../components/CustomSandpack"; 2 | import babel from "prettier/parser-babel"; 3 | import prettier from "prettier/standalone"; 4 | 5 | const code = `import * as Dialog from "@radix-ui/react-dialog"; 6 | 7 | export default function App() { 8 | return ( 9 | 10 | Open a Dialog 11 | 12 | 22 | 31 | Dialog Title 32 | Dialog Description 33 | Close 34 | 35 | 36 | 37 | ); 38 | } 39 | `; 40 | 41 | const Example = () => ( 42 | 59 | ); 60 | export default Example; 61 | -------------------------------------------------------------------------------- /src/examples/DropdownMenu.tsx: -------------------------------------------------------------------------------- 1 | import { CustomSandpack } from "../components/CustomSandpack"; 2 | import babel from "prettier/parser-babel"; 3 | import prettier from "prettier/standalone"; 4 | 5 | const code = `import * as DropdownMenu from "@radix-ui/react-dropdown-menu"; 6 | 7 | export default function App() { 8 | return ( 9 | 10 | Open Dropdown Menu 11 | 12 | Item 1 13 | Item 2 14 | 15 | 16 | ); 17 | } 18 | `; 19 | 20 | const Example = () => ( 21 | 38 | ); 39 | export default Example; 40 | -------------------------------------------------------------------------------- /src/examples/HoverCard.tsx: -------------------------------------------------------------------------------- 1 | import { CustomSandpack } from "../components/CustomSandpack"; 2 | import babel from "prettier/parser-babel"; 3 | import prettier from "prettier/standalone"; 4 | 5 | const code = `import * as HoverCard from "@radix-ui/react-hover-card"; 6 | 7 | const cardBackgroundColor = '#ddd'; 8 | 9 | export default function App() { 10 | return ( 11 | 12 | Trigger Hover Card 13 | 14 | Hover Card Content 15 | 16 | 17 | 18 | ); 19 | } 20 | `; 21 | 22 | const Example = () => ( 23 | 41 | ); 42 | export default Example; 43 | -------------------------------------------------------------------------------- /src/examples/Label.tsx: -------------------------------------------------------------------------------- 1 | import { CustomSandpack } from "../components/CustomSandpack"; 2 | import babel from "prettier/parser-babel"; 3 | import prettier from "prettier/standalone"; 4 | 5 | const code = `import * as Label from "@radix-ui/react-label"; 6 | 7 | export default function App() { 8 | return ( 9 | 10 | First Name 11 | 12 | ); 13 | } 14 | `; 15 | 16 | const Example = () => ( 17 | 34 | ); 35 | export default Example; 36 | -------------------------------------------------------------------------------- /src/examples/NavigationMenu.tsx: -------------------------------------------------------------------------------- 1 | import { CustomSandpack } from "../components/CustomSandpack"; 2 | import babel from "prettier/parser-babel"; 3 | import prettier from "prettier/standalone"; 4 | 5 | const code = `import * as NavigationMenu from "@radix-ui/react-navigation-menu"; 6 | 7 | export default function App() { 8 | return ( 9 | 10 | 11 | 12 | Trigger 13 | 14 | 15 | 16 | Item 1 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | ); 26 | } 27 | `; 28 | 29 | const Example = () => ( 30 | 47 | ); 48 | export default Example; 49 | -------------------------------------------------------------------------------- /src/examples/Popover.tsx: -------------------------------------------------------------------------------- 1 | import { CustomSandpack } from "../components/CustomSandpack"; 2 | import babel from "prettier/parser-babel"; 3 | import prettier from "prettier/standalone"; 4 | 5 | const code = `import * as Popover from "@radix-ui/react-popover"; 6 | 7 | const popoverBackgroundColor = '#ddd'; 8 | 9 | export default function App() { 10 | return ( 11 | 12 | Trigger 13 | 14 | This is the content 15 | Close 16 | 17 | 18 | 19 | ); 20 | } 21 | `; 22 | 23 | const Example = () => ( 24 | 41 | ); 42 | export default Example; 43 | -------------------------------------------------------------------------------- /src/examples/Progress.tsx: -------------------------------------------------------------------------------- 1 | import { CustomSandpack } from "../components/CustomSandpack"; 2 | import babel from "prettier/parser-babel"; 3 | import prettier from "prettier/standalone"; 4 | 5 | const code = `import * as Progress from "@radix-ui/react-progress"; 6 | 7 | const value = 75; 8 | 9 | export default function App() { 10 | return ( 11 | 13 | 14 | 15 | ); 16 | } 17 | 18 | `; 19 | 20 | const Example = () => ( 21 | 38 | ); 39 | export default Example; 40 | -------------------------------------------------------------------------------- /src/examples/RadioGroup.tsx: -------------------------------------------------------------------------------- 1 | import { CustomSandpack } from "../components/CustomSandpack"; 2 | import babel from "prettier/parser-babel"; 3 | import prettier from "prettier/standalone"; 4 | 5 | const code = `import * as RadioGroup from "@radix-ui/react-radio-group"; 6 | import { styled } from "@stitches/react"; 7 | 8 | const RadioGroupIndicator = styled(RadioGroup.Indicator, { 9 | width: "10px", 10 | height: "10px", 11 | display: "inline-block", 12 | backgroundColor: "black", 13 | borderRadius: "50%", 14 | }); 15 | 16 | export default function App() { 17 | return ( 18 | 19 | 20 | 21 | One 22 | 23 | 24 | 25 | Two 26 | 27 | 28 | ); 29 | } 30 | `; 31 | 32 | const Example = () => ( 33 | 51 | ); 52 | export default Example; 53 | -------------------------------------------------------------------------------- /src/examples/ScrollArea.tsx: -------------------------------------------------------------------------------- 1 | import { CustomSandpack } from "../components/CustomSandpack"; 2 | import babel from "prettier/parser-babel"; 3 | import prettier from "prettier/standalone"; 4 | 5 | const code = `import * as ScrollArea from "@radix-ui/react-scroll-area"; 6 | 7 | export default function App() { 8 | return ( 9 | 12 | 13 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet aut 14 | sapiente possimus quisquam. Obcaecati eaque reprehenderit, dolor 15 | culpa recusandae delectus, inventore, libero voluptates sed a 16 | consequuntur natus repudiandae praesentium est? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet aut 17 | sapiente possimus quisquam. Obcaecati eaque reprehenderit, dolor 18 | culpa recusandae delectus, inventore, libero voluptates sed a 19 | consequuntur natus repudiandae praesentium est? 20 | 21 | 29 | 30 | 31 | 32 | 33 | ); 34 | } 35 | `; 36 | 37 | const Example = () => ( 38 | 55 | ); 56 | export default Example; 57 | -------------------------------------------------------------------------------- /src/examples/Select.tsx: -------------------------------------------------------------------------------- 1 | import { CustomSandpack } from "../components/CustomSandpack"; 2 | import babel from "prettier/parser-babel"; 3 | import prettier from "prettier/standalone"; 4 | 5 | const code = `import * as Select from "@radix-ui/react-select"; 6 | 7 | export default function App() { 8 | return ( 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | Hello World 19 | 20 | 21 | 22 | Goodbye World 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | ); 31 | } 32 | `; 33 | 34 | const Example = () => ( 35 | 52 | ); 53 | export default Example; 54 | -------------------------------------------------------------------------------- /src/examples/Separator.tsx: -------------------------------------------------------------------------------- 1 | import { CustomSandpack } from "../components/CustomSandpack"; 2 | import babel from "prettier/parser-babel"; 3 | import prettier from "prettier/standalone"; 4 | 5 | const code = `import * as Separator from "@radix-ui/react-separator"; 6 | 7 | export default function App() { 8 | return ( 9 |
Thing One 10 | 11 | - 12 | 13 | Thing Two 14 |
15 | ); 16 | } 17 | `; 18 | 19 | const Example = () => ( 20 | 37 | ); 38 | export default Example; 39 | -------------------------------------------------------------------------------- /src/examples/Slider.tsx: -------------------------------------------------------------------------------- 1 | import { CustomSandpack } from "../components/CustomSandpack"; 2 | import babel from "prettier/parser-babel"; 3 | import prettier from "prettier/standalone"; 4 | 5 | const code = `import * as Slider from "@radix-ui/react-slider"; 6 | 7 | export default function App() { 8 | return ( 9 | 16 | 17 | 24 | 25 | 33 | 34 | ); 35 | } 36 | `; 37 | 38 | const Example = () => ( 39 | 56 | ); 57 | export default Example; 58 | -------------------------------------------------------------------------------- /src/examples/Switch.tsx: -------------------------------------------------------------------------------- 1 | import { CustomSandpack } from "../components/CustomSandpack"; 2 | import babel from "prettier/parser-babel"; 3 | import prettier from "prettier/standalone"; 4 | 5 | const code = `import * as Switch from "@radix-ui/react-switch"; 6 | import { styled } from "@stitches/react"; 7 | 8 | const SwitchThumb = styled(Switch.Thumb, { 9 | width: "50%", 10 | background: "darkgrey", 11 | height: "100%", 12 | display: "block", 13 | position: "absolute", 14 | top: 0, 15 | left: 0, 16 | "&[data-state=checked]": { 17 | left: "50%", 18 | } 19 | }); 20 | 21 | export default function App() { 22 | return ( 23 | 24 | 25 | 26 | ); 27 | } 28 | `; 29 | 30 | const Example = () => ( 31 | 49 | ); 50 | export default Example; 51 | -------------------------------------------------------------------------------- /src/examples/Tabs.tsx: -------------------------------------------------------------------------------- 1 | import { CustomSandpack } from "../components/CustomSandpack"; 2 | import babel from "prettier/parser-babel"; 3 | import prettier from "prettier/standalone"; 4 | 5 | const code = `import * as Tabs from "@radix-ui/react-tabs"; 6 | 7 | export default function App() { 8 | return ( 9 | 10 | 11 | One 12 | Two 13 | 14 | I am "One" content 15 | I am "Two" content 16 | 17 | ); 18 | } 19 | `; 20 | 21 | const Example = () => ( 22 | 39 | ); 40 | export default Example; 41 | -------------------------------------------------------------------------------- /src/examples/Toast.tsx: -------------------------------------------------------------------------------- 1 | import { CustomSandpack } from "../components/CustomSandpack"; 2 | import babel from "prettier/parser-babel"; 3 | import prettier from "prettier/standalone"; 4 | 5 | const code = `import * as Toast from "@radix-ui/react-toast"; 6 | import { useState } from "react"; 7 | 8 | export default function App() { 9 | const [showToast, setShowToast] = useState(false); 10 | 11 | return ( 12 | 13 | 14 | 15 | Toast Title 16 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod saepe porro eius harum, rem eos voluptatem? Labore ipsum sed cumque fuga, veniam perferendis quo accusamus esse ab illo sint reiciendis! 17 | Action 18 | Close 19 | 20 | 21 | 22 | ); 23 | } 24 | `; 25 | 26 | const Example = () => ( 27 | 44 | ); 45 | export default Example; 46 | -------------------------------------------------------------------------------- /src/examples/Toggle.tsx: -------------------------------------------------------------------------------- 1 | import { CustomSandpack } from "../components/CustomSandpack"; 2 | import babel from "prettier/parser-babel"; 3 | import prettier from "prettier/standalone"; 4 | 5 | const code = `import * as Toggle from "@radix-ui/react-toggle"; 6 | import { styled } from "@stitches/react"; 7 | 8 | const ToggleRoot = styled(Toggle.Root, { 9 | '&[aria-pressed=true]': { 10 | fontWeight: "bold", 11 | fontSize: "1.2em", 12 | } 13 | }); 14 | 15 | export default function App() { 16 | return ( 17 | This is a toggle 18 | ); 19 | } 20 | `; 21 | 22 | const Example = () => ( 23 | 41 | ); 42 | export default Example; 43 | -------------------------------------------------------------------------------- /src/examples/ToggleGroup.tsx: -------------------------------------------------------------------------------- 1 | import { CustomSandpack } from "../components/CustomSandpack"; 2 | import babel from "prettier/parser-babel"; 3 | import prettier from "prettier/standalone"; 4 | 5 | const code = `import * as ToggleGroup from "@radix-ui/react-toggle-group"; 6 | import { styled } from "@stitches/react"; 7 | 8 | const ToggleGroupItem = styled(ToggleGroup.Item, { 9 | '&[aria-pressed=true]': { 10 | fontWeight: "bold", 11 | fontSize: "1.2em", 12 | } 13 | }); 14 | 15 | export default function App() { 16 | return ( 17 | 18 | Item A 19 | Item B 20 | Item C 21 | 22 | ); 23 | } 24 | `; 25 | 26 | const Example = () => ( 27 | 45 | ); 46 | export default Example; 47 | -------------------------------------------------------------------------------- /src/examples/Toolbar.tsx: -------------------------------------------------------------------------------- 1 | export * from "@radix-ui/react-toolbar"; 2 | 3 | import { CustomSandpack } from "../components/CustomSandpack"; 4 | import babel from "prettier/parser-babel"; 5 | import prettier from "prettier/standalone"; 6 | 7 | const code = `import * as Toolbar from "@radix-ui/react-toolbar"; 8 | 9 | export default function App() { 10 | return ( 11 | 12 | Toolbar Button 13 | 14 | Some Link 15 | 16 | Item A 17 | Item B 18 | Item C 19 | 20 | 21 | ); 22 | } 23 | `; 24 | 25 | const Example = () => ( 26 | 43 | ); 44 | export default Example; 45 | -------------------------------------------------------------------------------- /src/examples/Tooltip.tsx: -------------------------------------------------------------------------------- 1 | import { CustomSandpack } from "../components/CustomSandpack"; 2 | import babel from "prettier/parser-babel"; 3 | import prettier from "prettier/standalone"; 4 | 5 | const code = `import * as Tooltip from "@radix-ui/react-tooltip"; 6 | 7 | const cardBackgroundColor = '#ddd'; 8 | 9 | 10 | export default function App() { 11 | return ( 12 | 13 | 14 | A Nice Tooltip 15 | 16 | 17 | Good News! 18 | 19 | 20 | 21 | ); 22 | } 23 | `; 24 | 25 | const Example = () => ( 26 | 43 | ); 44 | export default Example; 45 | -------------------------------------------------------------------------------- /src/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/main.tsx: -------------------------------------------------------------------------------- 1 | import App from "./App"; 2 | import { HashRouter } from "react-router-dom"; 3 | import React from "react"; 4 | import ReactDOM from "react-dom"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | 24 | 25 |