005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
41 lines
1.7 KiB
Markdown
41 lines
1.7 KiB
Markdown
# Usage
|
||
|
||
<p class="description">Learn the basics of working with Joy UI components.</p>
|
||
|
||
## Quickstart
|
||
|
||
After [installation](/joy-ui/getting-started/installation/), you can import any Joy UI component and start playing around.
|
||
For example, try changing the `variant` on the [Button](/joy-ui/react-button/) to `soft` to see how the style changes:
|
||
|
||
{{"demo": "ButtonUsage.js", "defaultCodeOpen": true}}
|
||
|
||
## Globals
|
||
|
||
Since Joy UI components are built to function in isolation, they don't require any kind of globally scoped styles.
|
||
For a better user experience and developer experience, we recommend adding the following globals to your app.
|
||
|
||
### Responsive meta tag
|
||
|
||
Joy UI is a _mobile-first_ component library—we write code for mobile devices first, and then scale up the components as necessary using CSS media queries.
|
||
|
||
To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your `<head>` element:
|
||
|
||
```html
|
||
<meta name="viewport" content="initial-scale=1, width=device-width" />
|
||
```
|
||
|
||
### CssBaseline
|
||
|
||
Joy UI provides an optional [CssBaseline](/joy-ui/react-css-baseline/) component.
|
||
It fixes some inconsistencies across browsers and devices while providing resets that are better tailored to fit Joy UI than alternative global style sheets like [normalize.css](https://github.com/necolas/normalize.css/).
|
||
|
||
### CssVarsProvider
|
||
|
||
Joy UI provides an optional `<CssVarsProvider />` component that unlocks a whole host of customization options powered by CSS variables.
|
||
Visit the [Using CSS variables](/joy-ui/customization/using-css-variables/) guide to learn more.
|
||
|
||
### Default font
|
||
|
||
Joy UI uses the Inter font by default.
|
||
See [Installation—Inter font](/joy-ui/getting-started/installation/#inter-font) for complete details.
|