### Install Base UI React with bun
Source: https://base-ui.com/react/overview/quick-start
Use this command to add the Base UI React package to your project using bun.
```bash
bun add @base-ui/react
```
--------------------------------
### Install Base UI React with npm
Source: https://base-ui.com/react/overview/quick-start
Use this command to add the Base UI React package to your project using npm.
```bash
npm i @base-ui/react
```
--------------------------------
### Install Base UI React with pnpm
Source: https://base-ui.com/react/overview/quick-start
Use this command to add the Base UI React package to your project using pnpm.
```bash
pnpm add @base-ui/react
```
--------------------------------
### Install Base UI React with yarn
Source: https://base-ui.com/react/overview/quick-start
Use this command to add the Base UI React package to your project using yarn.
```bash
yarn add @base-ui/react
```
--------------------------------
### Layout setup for Base UI Portals
Source: https://base-ui.com/react/overview/quick-start
Add this HTML structure to your application's layout root to ensure Base UI portaled components render correctly on top of all content.
```tsx
{/* prettier-ignore */}
{children}
```
--------------------------------
### Assemble Popover Component with Tailwind CSS
Source: https://base-ui.com/react/overview/quick-start
This example shows how to implement the Popover component using Tailwind CSS. It includes importing the Popover, defining trigger class names, and structuring the Popover with its parts like Trigger, Portal, Positioner, Popup, Arrow, Title, and Description.
```tsx
/* index.tsx */
import { Popover } from '@base-ui/react/popover';
const triggerClassName =
'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white';
export default function ExamplePopover() {
return (
Notifications
Notifications
You are all caught up. Good job!
);
}
```
--------------------------------
### CSS for Base UI Portals
Source: https://base-ui.com/react/overview/quick-start
Apply this CSS class to your application's root element to create a separate stacking context, ensuring popups appear above page content.
```css
.root {
isolation: isolate;
}
```
--------------------------------
### React Popover Implementation with CSS Modules
Source: https://base-ui.com/react/overview/quick-start
This React component demonstrates how to use the Base UI Popover with CSS Modules for styling. It imports the Popover component and the associated CSS module, then applies the styles to the Popover elements.
```tsx
/* index.tsx */
import * as React from 'react';
import { Popover } from '@base-ui/react/popover';
import styles from './index.module.css';
export default function ExamplePopover() {
return (
Notifications
Notifications
You are all caught up. Good job!
);
}
```
--------------------------------
### iOS Safari compatibility style
Source: https://base-ui.com/react/overview/quick-start
Add this global style to your CSS to ensure Base UI dialogs and similar components cover the entire visual viewport correctly on iOS 15+ Safari.
```css
body {
position: relative;
}
```
--------------------------------
### CSS Module Styles for Popover
Source: https://base-ui.com/react/overview/quick-start
This CSS file defines the styles for the Popover component using CSS Modules. It includes styles for the main container, the popup itself, an arrow element, and text content. It also includes media queries for dark mode and styles for different states like transitions and focus.
```css
/* index.module.css */
.Positioner {
width: var(--positioner-width);
height: var(--positioner-height);
max-width: var(--available-width);
}
.Popup {
box-sizing: border-box;
position: relative;
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 0.75rem;
outline: none;
border: 1px solid oklch(14.5% 0 0deg);
background-color: white;
color: oklch(14.5% 0 0deg);
box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
transform-origin: var(--transform-origin);
transition:
transform 100ms ease-out,
opacity 100ms ease-out;
width: var(--popup-width, auto);
height: var(--popup-height, auto);
max-width: 500px;
@media (prefers-color-scheme: dark) {
border: 1px solid white;
background-color: oklch(14.5% 0 0deg);
color: white;
box-shadow: none;
}
&[data-starting-style],
&[data-ending-style] {
opacity: 0;
transform: scale(0.98);
}
}
.Arrow {
display: block;
position: relative;
width: 12px;
height: 6px;
overflow: clip;
&[data-side='top'] {
bottom: -6px;
rotate: 180deg;
}
&[data-side='bottom'] {
top: -6px;
rotate: 0deg;
}
&[data-side='left'] {
right: -9px;
rotate: 90deg;
}
&[data-side='right'] {
left: -9px;
rotate: -90deg;
}
&::before {
content: '';
display: block;
position: absolute;
bottom: 0;
left: 50%;
box-sizing: border-box;
width: calc(6px * sqrt(2));
height: calc(6px * sqrt(2));
background-color: white;
border: 1px solid oklch(14.5% 0 0deg);
transform: translate(-50%, 50%) rotate(45deg);
@media (prefers-color-scheme: dark) {
background-color: oklch(14.5% 0 0deg);
border: 1px solid white;
}
}
}
.Title {
margin: 0;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 700;
}
.Description {
margin: 0;
font-size: 0.875rem;
line-height: 1.25rem;
color: oklch(43.9% 0 0deg);
@media (prefers-color-scheme: dark) {
color: oklch(70.8% 0 0deg);
}
}
.Container {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
}
.Button {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
height: 2rem;
padding: 0 0.75rem;
margin: 0;
border: 1px solid oklch(14.5% 0 0deg);
background-color: white;
font-family: inherit;
font-size: 0.875rem;
font-weight: 400;
line-height: 1;
white-space: nowrap;
color: oklch(14.5% 0 0deg);
-webkit-user-select: none;
user-select: none;
@media (prefers-color-scheme: dark) {
border: 1px solid white;
background-color: oklch(14.5% 0 0deg);
color: white;
}
@media (hover: hover) {
&:hover:not([data-disabled], :disabled) {
background-color: oklch(97% 0 0deg);
@media (prefers-color-scheme: dark) {
background-color: oklch(26.9% 0 0deg);
}
}
}
&:active:not([data-disabled], :disabled) {
background-color: oklch(92.2% 0 0deg);
@media (prefers-color-scheme: dark) {
background-color: oklch(37.1% 0 0deg);
}
}
&[data-popup-open]:not([data-disabled], :disabled) {
background-color: oklch(97% 0 0deg);
@media (prefers-color-scheme: dark) {
background-color: oklch(26.9% 0 0deg);
}
}
&[data-disabled],
&:disabled {
color: oklch(55.6% 0 0deg);
border-color: oklch(55.6% 0 0deg);
@media (prefers-color-scheme: dark) {
color: oklch(70.8% 0 0deg);
border-color: oklch(70.8% 0 0deg);
}
}
&:focus-visible {
outline: 2px solid oklch(14.5% 0 0deg);
outline-offset: -1px;
@media (prefers-color-scheme: dark) {
outline-color: white;
}
}
}
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.