Typography is the art and science of arranging type.
A design is the concept or proposal for an object, process, or system.
Art is a diverse range of cultural activity centered around works utilizing creative or imaginative talents, which are expected to evoke a worthwhile experience, generally through an expression of emotional power, conceptual ideas, technical proficiency, or beauty.
Discover{' '}
The principles of good{' '}
Typography is the art and science of arranging type to make written language clear, visually appealing, and effective in communication.
No results found.
```
--------------------------------
### Implementing Toast with Tailwind CSS in React
Source: https://base-ui.com/react/components/toast.md
This example demonstrates a complete React component setup for using the Base UI Toast component with Tailwind CSS. It includes both stacked and anchored toast implementations, showing how to manage toast states and integrate with other components like Tooltip.
```tsx
/* index.tsx */
'use client';
import * as React from 'react';
import { Toast } from '@base-ui/react/toast';
import { Button } from '@base-ui/react/button';
import { Tooltip } from '@base-ui/react/tooltip';
const stackedToastManager = Toast.createToastManager();
const anchoredToastManager = Toast.createToastManager();
export default function ExampleToast() {
return (
);
}
function StackedToastButton() {
function createToast() {
stackedToastManager.add({
description: 'Copied',
});
}
return (
);
}
function CopyButton() {
const [copied, setCopied] = React.useState(false);
const buttonRef = React.useRef(null);
function handleCopy() {
setCopied(true);
anchoredToastManager.add({
description: 'Copied',
positionerProps: {
anchor: buttonRef.current,
sideOffset: 10,
},
timeout: 1500,
onClose() {
setCopied(false);
},
});
}
return (
);
}
function AnchoredToasts() {
const { toasts } = Toast.useToastManager();
return (
{toasts.map((toast) => (
Overview
Handbook
GitHub
);
}
function Link(props: NavigationMenu.Link.Props) {
return (
(null);
return (
Swipe here
Library
Swipe from the edge whenever you want to jump back into your playlists.
Close
);
}
```
--------------------------------
### React Nested Drawer Component Example
Source: https://base-ui.com/react/components/drawer.md
This React TypeScript example demonstrates how to implement nested Drawer components using the `@base-ui/react/drawer` library. It shows a main drawer with a trigger that opens a second, nested drawer, utilizing CSS Modules for styling.
```tsx
/* index.tsx */
'use client';
import { Drawer } from '@base-ui/react/drawer';
import styles from './index.module.css';
export default function ExampleDrawerNested() {
return (
Open drawer stack
Account
Nested drawers can be styled to stack, while each drawer remains independently focus
managed.
Security settings
Security
Review sign-in activity and update your security preferences.
```
--------------------------------
### React Drawer with Dynamic Snap Points
Source: https://base-ui.com/react/components/drawer.md
Illustrates the implementation of a React Drawer component using @base-ui/react/drawer, demonstrating how to define and apply dynamic snap points for controlled height adjustments.
```tsx
/* index.tsx */
'use client';
import * as React from 'react';
import { Drawer } from '@base-ui/react/drawer';
import styles from './index.module.css';
const TOP_MARGIN_REM = 1;
const VISIBLE_SNAP_POINTS_REM = [30];
function toViewportSnapPoint(heightRem: number) {
return `${heightRem + TOP_MARGIN_REM}rem`;
}
const snapPoints = [...VISIBLE_SNAP_POINTS_REM.map(toViewportSnapPoint), 1];
export default function ExampleDrawerSnapPoints() {
return (
Open snap drawer
Snap points
Drag the sheet to snap between a compact peek and a near full-height view.
Close
);
}
```
--------------------------------
### Implement Collapsible with Tailwind CSS
Source: https://base-ui.com/react/components/collapsible.md
This example demonstrates how to integrate the Collapsible component with Tailwind CSS for styling.
```tsx
/* index.tsx */
import * as React from 'react';
import { Collapsible } from '@base-ui/react/collapsible';
export default function ExampleCollapsible() {
return (
Recovery keys
);
}
export function CaretRightIcon(props: React.ComponentProps<'svg'>) {
return (
);
}
```
--------------------------------
### Select Component React Implementation
Source: https://base-ui.com/react/components/select.md
React component implementation using Base UI Select component with CSS Modules. Demonstrates basic setup with an apple options list and Select.Root initialization.
```tsx
/* index.tsx */
import * as React from 'react';
import { Select } from '@base-ui/react/select';
import styles from './index.module.css';
const apples = [
{ label: 'Gala', value: 'gala' },
{ label: 'Fuji', value: 'fuji' },
{ label: 'Honeycrisp', value: 'honeycrisp' },
{ label: 'Granny Smith', value: 'granny-smith' },
{ label: 'Pink Lady', value: 'pink-lady' },
];
export default function ExampleSelect() {
return (
```
--------------------------------
### Basic Usage of useRender Hook
Source: https://base-ui.com/react/utils/use-render.md
This example demonstrates how to call the `useRender` hook to obtain a rendered React element.
```tsx
const element = useRender({
// Input parameters
});
```
--------------------------------
### Define OverflowEdges Type
Source: https://base-ui.com/react/components/scroll-area.md
This utility type describes the overflow status at the start and end edges for both horizontal and vertical axes.
```typescript
type OverflowEdges = { xStart: boolean; xEnd: boolean; yStart: boolean; yEnd: boolean };
```
-
{overviewLinks.map((item) => (
-
{item.title}
{item.description}
))}
-
{handbookLinks.map((item) => (
-
{item.title}
{item.description}
))}
Swipe from the right edge to open the drawer.
{Array.from({ length: 20 }, (_, index) => (
))}
alien-bean-pasta
wild-irish-burrito
horse-battery-staple