### Switch Component Examples Source: https://www.radix-ui.com/themes/docs/components/switch.md Examples demonstrating how to use the Switch component with various props. ```APIDOC ## Switch Component Examples ### Size Use the `size` prop to control the size of the switch. ```jsx ``` ### Variant Use the `variant` prop to control the visual style of the switch. ```jsx ``` ### Color Use the `color` prop to assign a specific [color](/themes/docs/theme/color). ```jsx ``` ### High-contrast Use the `highContrast` prop to increase color contrast in light mode. ```jsx ``` ### Radius Use the `radius` prop to assign a specific radius value. ```jsx ``` ### Alignment Composing `Switch` within `Text` automatically centers it with the first line of text. ```jsx Sync settings Sync settings Sync settings ``` It is automatically well-aligned with multi-line text too. ### Disabled Use the native `disabled` attribute to create a disabled switch. ```jsx Off On On Off ``` ``` -------------------------------- ### Text Component Usage Examples Source: https://www.radix-ui.com/themes/docs/components/text.md Examples demonstrating how to use the Text component and its `as` prop. ```APIDOC ## Text Component Examples ### Basic Usage ```jsx The quick brown fox jumps over the lazy dog. ``` ### Using the `as` prop Use the `as` prop to render text as a `p`, `label`, `div`, or `span`. This prop is purely semantic and does not alter visual appearance. #### As a paragraph ```jsx This is a paragraph element. ``` #### As a label ```jsx This is a label element. ``` #### As a div ```jsx This is a div element. ``` #### As a span ```jsx This is a span element. ``` ``` -------------------------------- ### Progress Component Examples Source: https://www.radix-ui.com/themes/docs/components/progress.md Examples demonstrating how to use the Progress component with different props. ```APIDOC ## Progress Component Examples ### Size Use the `size` prop to control the size. ```jsx ``` ### Variant Use the `variant` prop to control the visual style. ```jsx ``` ### Color Use the `color` prop to assign a specific [color](/themes/docs/theme/color). ```jsx ``` ### High-contrast Use the `highContrast` prop to increase color contrast with the background. ```jsx ``` ### Radius Use the `radius` prop to assign a specific radius value. ```jsx ``` ### With controlled value Use the `value` prop to provide a precise indication of the task progress. ```jsx ``` ### With custom duration Use the `duration` prop to indicate an approximate duration of an indeterminate task. Once the duration times out, the progress bar will start an indeterminate animation. ```jsx ``` When an approximate duration can be estimated, the Progress component is still useful over [Spinner](/themes/docs/components/spinner), which doesn’t provide any visual cues towards the progress of the task. ``` -------------------------------- ### Use Basic Radix Themes Components Source: https://www.radix-ui.com/themes/docs/overview/getting-started Example of using basic Radix Themes components like Flex, Text, and Button after setup. ```jsx import { Flex, Text, Button } from "@radix-ui/themes"; export default function MyApp() { return ( Hello from Radix Themes :) ); } ``` -------------------------------- ### Grid Component Examples Source: https://www.radix-ui.com/themes/docs/components/grid Examples demonstrating the usage of the Grid component, including responsive layouts. ```APIDOC ## Grid Component Examples ### Responsive Layout All props marked `Responsive`, such as `columns` and `rows` accept a [breakpoint object](/themes/docs/theme/breakpoints). For example, the following grid starts with 1 column, and uses 2 columns from the medium breakpoint. ```jsx ``` ``` -------------------------------- ### Tabs Examples Source: https://www.radix-ui.com/themes/docs/components/tabs.md Examples demonstrating the usage of different props for the Tabs component. ```APIDOC ## Examples ### Size Use the `size` prop to control the size of the tab list. ```jsx Account Documents Settings Account Documents Settings ``` ### Color Use the `color` prop to assign a specific [color](/themes/docs/theme/color) to the tab list. ```jsx Account Documents Settings Account Documents Settings Account Documents Settings Account Documents Settings ``` ### High-contrast Use the `highContrast` prop to increase color contrast with the background. ```jsx Account Documents Settings Account Documents Settings ``` ### Navigation Tabs should not be used for page navigation. Use [Tab Nav](/themes/docs/components/tab-nav) instead, which is designed for this purpose and has equivalent styles. ``` -------------------------------- ### Icon Button Examples Source: https://www.radix-ui.com/themes/docs/components/icon-button Examples demonstrating various ways to use the IconButton component with different props. ```APIDOC ### Basic Usage ```jsx ``` ### Size Use the `size` prop to control the size of the button. ```jsx ``` ### Variant Use the `variant` prop to control the visual style of the button. ```jsx ``` #### Ghost Variant Use the `ghost` variant to display a button without chrome. Ghost buttons behave like text in layout, as they use a negative margin to optically align themselves against their siblings while maintaining the padding in active and hover states. ```jsx ``` ### Color Use the `color` prop to assign a specific [color](/themes/docs/theme/color). ```jsx ``` ### High-contrast Use the `highContrast` prop to increase color contrast with the background. ```jsx ``` ``` -------------------------------- ### Blockquote Component Examples Source: https://www.radix-ui.com/themes/docs/components/blockquote.md Examples demonstrating the usage of the Blockquote component with different props. ```APIDOC ## Blockquote Component Examples ### Size Use the `size` prop to control the size. ```jsx

Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.

``` ### Weight Use the `weight` prop to set the text weight. ```jsx

Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.

``` ### Color Use the `color` prop to assign a specific [color](/themes/docs/theme/color). ```jsx

Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.

``` ``` -------------------------------- ### Button Component Examples Source: https://www.radix-ui.com/themes/docs/components/button.md Examples demonstrating various ways to use the Button component, including different sizes, variants, colors, and states. ```APIDOC ## Button Component Examples ### Size Use the `size` prop to control the size of the button. ```jsx ``` ### Variant Use the `variant` prop to control the visual style of the button. ```jsx ``` #### Ghost Variant Use the `ghost` variant to display a button without chrome. Ghost buttons behave like text in layout, as they use a negative margin to optically align themselves against their siblings while maintaining the padding in active and hover states. ```jsx ``` ### Color Use the `color` prop to assign a specific [color](/themes/docs/theme/color). ```jsx ``` ### High-contrast Use the `highContrast` prop to increase color contrast with the background. ```jsx ``` ### Radius Use the `radius` prop to assign a specific radius value. ```jsx ``` ### With icons You can nest icons directly inside the button. An appropriate gap is provided automatically. ```jsx ``` ``` -------------------------------- ### Install Radix Themes Package Source: https://www.radix-ui.com/themes/docs/overview/getting-started Install the Radix Themes package using npm. ```bash npm install @radix-ui/themes ``` -------------------------------- ### Callout Component Examples Source: https://www.radix-ui.com/themes/docs/components/callout.md Examples demonstrating how to use the Callout component with different props like size, variant, color, and high-contrast. ```APIDOC ## Examples ### Size Use the `size` prop to control the size. ```jsx You will need admin privileges to install and access this application. You will need admin privileges to install and access this application. You will need admin privileges to install and access this application. ``` ### Variant Use the `variant` prop to control the visual style. ```jsx You will need admin privileges to install and access this application. You will need admin privileges to install and access this application. You will need admin privileges to install and access this application. ``` ### Color Use the `color` prop to assign a specific [color](/themes/docs/theme/color). ```jsx You will need admin privileges to install and access this application. You will need admin privileges to install and access this application. You will need admin privileges to install and access this application. ``` ### High-contrast Use the `HighContrast` prop to add additional contrast. ```jsx An update to Radix Themes is available. See what’s new in version 3.2.0. An update to Radix Themes is available. See what’s new in version 3.2.0. ``` ``` -------------------------------- ### Badge Examples Source: https://www.radix-ui.com/themes/docs/components/badge.md Examples demonstrating various ways to use the Badge component, including size, variant, color, high-contrast, and radius. ```APIDOC ## Badge Examples ### Size Use the `size` prop to control the size. ```jsx New New New ``` ### Variant Use the `variant` prop to control the visual style. ```jsx New New New New ``` ### Color Use the `color` prop to assign a specific [color](/themes/docs/theme/color). ```jsx New New New New ``` ### High-contrast Use the `highContrast` prop to increase color contrast with the background. ```jsx New New New New New New New New ``` ### Radius Use the `radius` prop to assign a specific radius value. ```jsx New New New ``` ``` -------------------------------- ### Hover Card Examples Source: https://www.radix-ui.com/themes/docs/components/hover-card.md Examples demonstrating the usage of the Hover Card component, including variations in size and content. ```APIDOC ## Examples ### Size Use the `size` prop to control the size. ```jsx Size 1 Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. Size 2 Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. Size 3 Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. ``` ### With inset content Use the [Inset](/themes/docs/components/inset) component to align content flush with the sides of the hover card. ```jsx Technology revolutionized{" typography Bold typography

Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing (leading), and letter-spacing (tracking)… {" } in the latter twentieth century. ``` ``` -------------------------------- ### Heading Component Examples Source: https://www.radix-ui.com/themes/docs/components/heading Examples demonstrating various ways to use the Heading component, including changing its semantic level, size, weight, and alignment. ```APIDOC ### Examples #### As another element Use the `as` prop to change the heading level. This prop is purely semantic and does not change the visual appearance. ```jsx Level 1 Level 2 Level 3 ``` #### Size Use the `size` prop to control the size of the heading. The prop also provides correct line height and corrective letter spacing—as text size increases, the relative line height and letter spacing decrease. Heading sizes match [Text](/themes/components/text) sizes. However, the line heights are set a bit tighter as headings tend to be shorter than running text. ```jsx The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog ``` #### Weight Use the `weight` prop to set the text weight. ```jsx The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. ``` #### Align Use the `align` prop to set text alignment. ```jsx Left-aligned Center-aligned Right-aligned ``` ``` -------------------------------- ### Text Field Examples Source: https://www.radix-ui.com/themes/docs/components/text-field.md Examples demonstrating the usage of the Text Field component with different props. ```APIDOC ## [Examples](#examples) ### [Size](#size) Use the `size` prop to control the size. ```jsx ``` Use matching component sizes when composing Text Field with buttons. However, don’t use size 1 inputs with buttons—at this size, there is not enough vertical space to nest other interactive elements. ```jsx ``` ### [Variant](#variant) Use the `variant` prop to control the visual style. ```jsx ``` ### [Color](#color) Use the `color` prop to assign a specific [color](/themes/docs/theme/color). ```jsx ``` ### [Radius](#radius) Use the `radius` prop to assign a specific radius value. ```jsx ``` ``` -------------------------------- ### Responsive Grid Layout Source: https://www.radix-ui.com/themes/docs/components/grid Configure responsive grid layouts by passing breakpoint objects to props like `columns`. This example shows a grid that starts with one column and switches to two columns at the medium breakpoint. ```jsx ``` -------------------------------- ### Select Component - Size Example Source: https://www.radix-ui.com/themes/docs/components/select.md Demonstrates how to use the `size` prop on `Select.Root` to control the visual size of the select component. ```APIDOC ## Examples: Size Use the `size` prop to control the size. ```jsx Apple Orange Apple Orange Apple Orange ``` ``` -------------------------------- ### Button Size Examples Source: https://www.radix-ui.com/themes/docs/components/button.md Control the button size using the `size` prop. Examples shown with `variant="soft"`. ```jsx ```