Pure UI Shadcn

https://pure.ui.pub/docs/components/shadcn/
Admin
A platform for designers, developers, and vibe coders to discover, learn, build, and share...
Tokens:36,149
Snippets:99
Trust Score:4.9
Update:1 year ago
Show doc for...
Tokens:
Raw
### shadcn/ui Installation Command

Source: https://pure.ui.pub/docs/components/shadcn/alert

This command is used to install the Alert component into a shadcn/ui project. It leverages the shadcn-ui CLI to add the necessary files and dependencies.

```bash
npx shadcn-ui@latest add alert
```

--------------------------------

### Toggle Usage Example

Source: https://pure.ui.pub/docs/components/shadcn/toggle

Basic usage example of the Toggle component. This snippet demonstrates how to render the Toggle component in its default state.

```jsx
<Toggle />
```

--------------------------------

### Progress Component Examples

Source: https://pure.ui.pub/docs/components/shadcn/progress

Illustrates various examples of the Progress component, including an indeterminate state, a circular progress indicator, a label displaying progress, and custom styling options.

```jsx
/* Indeterminate Example */
<Progress value={undefined} />

/* Circle Example */
<ProgressCircle value={75} strokeWidth={4} />

/* Label Example */
<Progress value={50}>
  <ProgressLabel>50%</ProgressLabel>
</Progress>

/* Custom Styles Example */
<Progress value={75} className="h-2 w-full bg-gray-200 rounded-full" />
```

--------------------------------

### Card Component Usage Example

Source: https://pure.ui.pub/docs/components/shadcn/card

Demonstrates the structure for using the Card component, including its header, content, and footer sections. This example shows how to compose the Card with its sub-components like CardHeader, CardTitle, CardDescription, CardAction, CardContent, and CardFooter.

```jsx
<Card>
  <CardHeader>
    <CardTitle />
    <CardDescription />
    <CardAction />
  </CardHeader>
  <CardContent />
  <CardFooter />
</Card>
```

--------------------------------

### Pure UI Select - Basic Example

Source: https://pure.ui.pub/docs/components/shadcn/select

A fundamental example showcasing the basic functionality of the Pure UI Select component. This snippet is suitable for demonstrating the core user interaction of making a selection from a list.

```jsx
PreviewCode

Choose model
```

--------------------------------

### AlertDialog Animation Examples (shadcn/ui)

Source: https://pure.ui.pub/docs/components/shadcn/alert-dialog

Showcases various animation presets for the AlertDialog component, demonstrating how to integrate different motion effects like slide, scale, perspective, wipe, and fade. These examples highlight the component's animation capabilities powered by Motion.

```jsx
PreviewCode

Delete account
```

```jsx
PreviewCode

Delete account
```

```jsx
PreviewCode

Delete account
```

```jsx
PreviewCode

Delete account
```

```jsx
PreviewCode

Delete account
```

```jsx
PreviewCode

Delete account
```

```jsx
PreviewCode

Delete account
```

```jsx
PreviewCode

Delete account
```

```jsx
PreviewCode

Delete account
```

```jsx
PreviewCode

Delete account
```

```jsx
PreviewCode

Delete account
```

--------------------------------

### Pure UI Select - Custom Example

Source: https://pure.ui.pub/docs/components/shadcn/select

Demonstrates a custom implementation of the Pure UI Select component, offering enhanced control over styling, icons, and data. This example highlights how to achieve a tailored look and feel while maintaining ease of use.

```jsx
PreviewCode
```

--------------------------------

### Button Usage Example

Source: https://pure.ui.pub/docs/components/shadcn/button

Demonstrates the basic usage of the Button component in React.js. It shows how to render a button with text content.

```jsx
<Button>
  All-in access
</Button>
```

--------------------------------

### Resizable Usage Example

Source: https://pure.ui.pub/docs/components/shadcn/resizable

Demonstrates the basic structure for creating a resizable panel group using the Resizable component. It shows how to define panels and handles to create a multi-panel layout.

```jsx
<ResizablePanelGroup>
  <ResizablePanel />
  <ResizableHandle />
  <ResizablePanel />
</ResizablePanelGroup>
```

--------------------------------

### AlertDialog Custom Animation Example (shadcn/ui)

Source: https://pure.ui.pub/docs/components/shadcn/alert-dialog

Illustrates how to implement custom animations for the AlertDialog component. This example provides a placeholder for defining unique animation sequences, offering flexibility beyond the predefined presets.

```jsx
PreviewCode

Delete account
```

--------------------------------

### Carousel Usage Example

Source: https://pure.ui.pub/docs/components/shadcn/carousel

Demonstrates how to implement the Carousel component using its provided structure, including content and navigation elements.

```React.js
<Carousel>
  <CarouselContent>
    <CarouselItem />
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>
```

--------------------------------

### Select Component - Size Examples

Source: https://pure.ui.pub/docs/components/shadcn/select

Demonstrates the usage of the Select component with different size variants. The 'size' prop controls the visual dimensions of the component.

```react
<Select />
<Select size="sm" />
<Select size="md" />
<Select size="lg" />
```

--------------------------------

### Pagination Usage Example

Source: https://pure.ui.pub/docs/components/shadcn/pagination

Demonstrates how to implement the Pagination component with its various items, including previous, next, links, and ellipsis. This component is designed for navigating through paginated data.

```jsx
<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink />
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext />
    </PaginationItem>
  </PaginationContent>
</Pagination>
```

--------------------------------

### Pure UI Select - Advanced Example

Source: https://pure.ui.pub/docs/components/shadcn/select

Presents an advanced usage scenario for the Pure UI Select component, emphasizing its full compatibility with the original Radix API. This allows for deep customization of elements like icons and styles, as referenced in the 'Customize' section.

```jsx
PreviewCode

Add model
```

--------------------------------

### Select Component - Custom Transition Example

Source: https://pure.ui.pub/docs/components/shadcn/select

Illustrates applying custom transition values to the Select component, enabling detailed control over animation behavior beyond predefined presets.

```react
<Select transition={{ duration: 0.5, ease: [0.25, 0.1, 0.25, 1.0] }} />
```

--------------------------------

### Alert with Icon, Title, and Description

Source: https://pure.ui.pub/docs/components/shadcn/alert

This snippet demonstrates a basic Alert component setup, including an icon, a title, and a descriptive text. It's a common pattern for conveying important information to the user.

```jsx
import { Alert, AlertDescription, AlertIcon, AlertTitle } from "@/components/ui/alert";

function AlertDemo() {
  return (
    <Alert>
      <AlertIcon />
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>
        Your session has expired, please log in again.
      </AlertDescription>
    </Alert>
  );
}
```

--------------------------------

### Tabs Component Usage

Source: https://pure.ui.pub/docs/components/shadcn/tabs

Demonstrates the basic usage of the Tabs component, showcasing its structure and integration within a React application. This example highlights how to set up and render the Tabs component.

```TypeScript
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@pureui/shadcn/tabs";

function TabsDemo() {
  return (
    <Tabs defaultValue="account" className="w-[400px]">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="billing">Billing</TabsTrigger>
        <TabsTrigger value="appearance">Appearance</TabsTrigger>
      </TabsList>
      <TabsContent value="account">Account settings</TabsContent>
      <TabsContent value="billing">Billing settings</TabsContent>
      <TabsContent value="appearance">Appearance settings</TabsContent>
    </Tabs>
  );
}

export default TabsDemo;
```

--------------------------------

### Collapsible with Transition Presets

Source: https://pure.ui.pub/docs/components/shadcn/collapsible

Demonstrates how to apply predefined animation and transition presets to the Collapsible component. This example shows setting an animation preset and a custom transition object with ease and duration.

```jsx
<Collapsible
  animationPreset="motion"
  transitionPreset={{
    ease: "inOutExpo",
    duration: 0.6,
  }}
/>
```

--------------------------------

### Dialog Non-modal Example (React)

Source: https://pure.ui.pub/docs/components/shadcn/dialog

Illustrates the usage of the Dialog component in a non-modal configuration. This allows interaction with the underlying content while the dialog is open, suitable for less critical prompts or information displays.

```React
/*
  This is a placeholder for the non-modal dialog example code.
  The actual implementation would involve specific props to control modal behavior.
*/
<Dialog>
  <DialogTrigger />
  <DialogContent>
    {/* Content */}
  </DialogContent>
</Dialog>
```

--------------------------------

### Select Component - Custom Animation Example

Source: https://pure.ui.pub/docs/components/shadcn/select

Demonstrates how to apply custom animations to the Select component by providing specific animation configurations. This allows for fine-grained control over motion effects.

```react
<Select animation={{ x: 10, opacity: 0 }} />
```

--------------------------------

### Breadcrumb Usage Example

Source: https://pure.ui.pub/docs/components/shadcn/breadcrumb

Demonstrates the basic structure for implementing a Breadcrumb component using shadcn/ui components like BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, and BreadcrumbPage. This structure helps users navigate hierarchical content.

```tsx
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink />
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage />
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>
```

--------------------------------

### Basic Radio Group Usage

Source: https://pure.ui.pub/docs/components/shadcn/radio-group

Demonstrates the basic usage of the Radio Group component, allowing users to select one option from a set. This example shows a simple implementation without custom styling or advanced features.

```jsx
<RadioGroup />
```

--------------------------------

### Dialog Basic Usage (React)

Source: https://pure.ui.pub/docs/components/shadcn/dialog

Demonstrates the fundamental structure for implementing the Dialog component. It shows how to trigger the dialog and structure its content, header, and footer using provided sub-components.

```React
<Dialog>
  <DialogTrigger />
  <DialogContent>
    <DialogHeader>
      <DialogTitle />
      <DialogDescription />
    </DialogHeader>
    <DialogFooter>
      <DialogClose />
    </DialogFooter>
  </DialogContent>
</Dialog>
```

--------------------------------

### Progress API Reference

Source: https://pure.ui.pub/docs/components/shadcn/progress

API documentation for the Progress component, detailing its props and inheritance from Radix UI's Progress Root. Includes specific props for ProgressCircle.

```APIDOC
Progress:
  Supports all [Radix `Root` API](https://www.radix-ui.com/primitives/docs/components/progress#root)

ProgressBar:
  Alias for `Progress`.

ProgressCircle:
  Props:
    strokeWidth: number (default: 2) - The width of the progress circle's stroke.
  Supports all [Radix `Root` API](https://www.radix-ui.com/primitives/docs/components/progress#root)
```

--------------------------------

### Button API Reference

Source: https://pure.ui.pub/docs/components/shadcn/button

Provides the API documentation for the Button component. It details the available props, their types, default values, and descriptions. The component is a wrapper around native HTML <button> and supports its properties and events.

```APIDOC
Button Component API:

Props:
  - size: enum, Default: "default"
  - variant: enum, Default: "default"
  - radius: enum, Default: "default"
  - pending: boolean, Default: N/A
  - reduceMotion: boolean, Default: false

Description:
  The `Button` component is a wrapper around native HTML `<button>`, supporting all `HTMLButtonElement` properties, methods, and events.

Useful links:
  - HTML reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
  - HTML DOM API: https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement
```

--------------------------------

### Select Component - Animation Presets (Motion)

Source: https://pure.ui.pub/docs/components/shadcn/select

Examples of using the 'motion' animation preset for the Select component. These animations are typically used when the position is set to 'popper'.

```react
<Select animationPreset="motion" />
```

--------------------------------

### Toggle API Reference

Source: https://pure.ui.pub/docs/components/shadcn/toggle

API reference for the Toggle component, detailing its available props, their types, default values, and supported Radix UI primitives.

```APIDOC
Toggle Component API:

Props:
  - size: enum
    Description: Controls the size of the toggle button.
    Default: "default"
    Possible values: "default", "sm", "lg"

  - variant: enum
    Description: Controls the visual style of the toggle button.
    Default: "default"
    Possible values: "default", "outline"

  - reduceMotion: boolean
    Description: If true, disables animations for users who prefer reduced motion.
    Default: false

Supports all props from Radix UI Toggle Primitive (Root):
  - Reference: https://www.radix-ui.com/primitives/docs/components/toggle#root
```

--------------------------------

### Select Component - Animation Presets (Burst)

Source: https://pure.ui.pub/docs/components/shadcn/select

Examples of using the 'burst' animation preset for the Select component. These animations are typically used when the position is set to 'popper'.

```react
<Select animationPreset="burst" />
```

--------------------------------

### Resizable API Reference

Source: https://pure.ui.pub/docs/components/shadcn/resizable

Details the props available for the Resizable components, including PanelGroup, Panel, and Handle. It specifies which external library props are supported and lists specific component props with their types and defaults.

```APIDOC
PanelGroup:
  Description: Represents a group of resizable panels.
  Props:
    - Supports all [`PanelGroup`](https://github.com/bvaughn/react-resizable-panels/tree/main/packages/react-resizable-panels#panelgroup) props from the react-resizable-panels library.

Panel:
  Description: Represents an individual resizable panel within a PanelGroup.
  Props:
    - Supports all [`Panel`](https://github.com/bvaughn/react-resizable-panels/tree/main/packages/react-resizable-panels#panel) props from the react-resizable-panels library.

Handle:
  Description: Represents the draggable handle between panels.
  Props:
    - `withHandle`: boolean | ReactNode
      Type: boolean or ReactNode
      Default: `―`
    - Supports all [`PanelResizeHandle`](https://github.com/bvaughn/react-resizable-panels/tree/main/packages/react-resizable-panels#panelresizehandle) props from the react-resizable-panels library.
```

--------------------------------

### Select Component - Animation Presets (Scale)

Source: https://pure.ui.pub/docs/components/shadcn/select

Examples of using the 'scale' animation preset for the Select component. These animations are typically used when the position is set to 'popper'.

```react
<Select animationPreset="scale" />
```

--------------------------------

### Select Component - Animation Presets (Wipe)

Source: https://pure.ui.pub/docs/components/shadcn/select

Examples of using the 'wipe' animation preset for the Select component. These animations are typically used when the position is set to 'popper'.

```react
<Select animationPreset="wipe" />
```

--------------------------------

### shadcn/ui Select Component API Reference

Source: https://pure.ui.pub/docs/components/shadcn/select

This section consolidates the API documentation for various sub-components of the shadcn/ui Select component, referencing their underlying Radix UI APIs. It details properties and functionalities for each part.

```APIDOC
Select Component Parts:

- **Value**: Supports all Radix UI Value API functionalities.
- **Icon**: Supports all Radix UI Icon API functionalities.
- **Portal**: Supports all Radix UI Portal API functionalities.
- **Content**: Supports all Radix UI Content API functionalities.
  Properties:
    - `size`: enum, default: "default"
    - `radius`: enum, default: "-"
    - `animation`: AnimationProps
    - `animationPreset`: enum
    - `transition`: Transition
    - `transitionPreset`: enum | TransitionPreset
- **Viewport**: Supports all Radix UI Viewport API functionalities.
- **Item**: Supports all Radix UI Item API functionalities.
- **ItemText**: Supports all Radix UI ItemText API functionalities.
- **ItemIndicator**: Supports all Radix UI ItemIndicator API functionalities. Uses `CheckIcon` as default.
- **Option**: Abstracted Radix Item components (`SelectItem`, `SelectItemText`, `SelectItemIndicator`).
  Properties:
    - `indicator`: ReactNode
- **ScrollUpButton**: Supports all Radix UI ScrollUpButton API functionalities.
- **ScrollDownButton**: Supports all Radix UI ScrollDownButton API functionalities.
- **Group**: Supports all Radix UI Group API functionalities.
- **Label**: Supports all Radix UI Label API functionalities.
- **Separator**: Supports all Radix UI Separator API functionalities.
- **Arrow**: Supports all Radix UI Arrow API functionalities.

Related Navigation:
- Previous: Scroll Area
- Next: Separator
```

--------------------------------

### Select Component - Radius Examples

Source: https://pure.ui.pub/docs/components/shadcn/select

Illustrates how to apply different radius styles to the Select component using the 'radius' prop. This allows for customization of the component's border-radius.

```react
<Select />
<Select radius="sm" />
<Select radius="md" />
<Select radius="lg" />
```

--------------------------------

### Skeleton Component Usage

Source: https://pure.ui.pub/docs/components/shadcn/skeleton

Demonstrates the basic usage of the Skeleton component. It serves as a visual placeholder while actual content is being fetched or processed.

```jsx
<Skeleton />
```

--------------------------------

### Select Component - Animation Presets (Wipe Scale)

Source: https://pure.ui.pub/docs/components/shadcn/select

Examples of using the 'wipeScale' animation preset for the Select component. These animations are typically used when the position is set to 'popper'.

```react
<Select animationPreset="wipeScale" />
```

--------------------------------

### Select Component - Animation Presets (Burst Scale)

Source: https://pure.ui.pub/docs/components/shadcn/select

Examples of using the 'burstScale' animation preset for the Select component. These animations are typically used when the position is set to 'popper'.

```react
<Select animationPreset="burstScale" />
```

--------------------------------

### Radio Group Orientation Example

Source: https://pure.ui.pub/docs/components/shadcn/radio-group

Demonstrates how to control the orientation of the Radio Group component, allowing options to be displayed either horizontally or vertically. This provides flexibility in layout design.

```jsx
Pizza 🍕
Burger 🍔
Ramen 🍜
```

--------------------------------

### Alert with Title and Icon Only

Source: https://pure.ui.pub/docs/components/shadcn/alert

This example shows an Alert component configured with only a title and an icon, omitting the description. This variant is useful for concise notifications where a full explanation is not necessary.

```jsx
import { Alert, AlertIcon, AlertTitle } from "@/components/ui/alert";

function AlertDemo() {
  return (
    <Alert>
      <AlertIcon />
      <AlertTitle>Heads up!</AlertTitle>
    </Alert>
  );
}
```

--------------------------------

### Collapsible API Reference

Source: https://pure.ui.pub/docs/components/shadcn/collapsible

API documentation for the Collapsible component, detailing its available props, their types, default values, and compatibility with underlying Radix UI primitives.

```APIDOC
Collapsible:
  Props:
    animation: AnimationProps
      - Type: AnimationProps
      - Description: Applies animation properties to the component.
      - Default: N/A

    animationPreset: enum
      - Type: enum
      - Description: Selects a predefined animation preset.
      - Default: "fade"

    transition: Transition
      - Type: Transition
      - Description: Defines custom transition properties.
      - Default: N/A

    transitionPreset: enum | TransitionPreset
      - Type: enum | TransitionPreset
      - Description: Selects a predefined transition preset or a custom Transition object.
      - Default: N/A

    reduceMotion: boolean
      - Type: boolean
      - Description: Toggles motion reduction for accessibility.
      - Default: false

  Support:
    - Supports all Root props from Radix API (https://www.radix-ui.com/primitives/docs/components/collapsible#root).

Trigger:
  Support:
    - Supports all props from Radix API (https://www.radix-ui.com/primitives/docs/components/collapsible#trigger).

Content:
  Support:
    - Supports all props from Radix API (https://www.radix-ui.com/primitives/docs/components/collapsible#content).
```

--------------------------------

### Select Component - Animation Presets (Motion Blur)

Source: https://pure.ui.pub/docs/components/shadcn/select

Examples of using the 'motionBlur' animation preset for the Select component. These animations are typically used when the position is set to 'popper'.

```react
<Select animationPreset="motionBlur" />
```

--------------------------------

### Select Component - Animation Presets (Slide Inside)

Source: https://pure.ui.pub/docs/components/shadcn/select

Examples of using the 'slideInside' animation preset for the Select component. These animations are typically used when the position is set to 'popper'.

```react
<Select animationPreset="slideInside" />
```

--------------------------------

### React AlertDialog Basic Usage (shadcn/ui)

Source: https://pure.ui.pub/docs/components/shadcn/alert-dialog

Demonstrates the fundamental structure for implementing an AlertDialog component using shadcn/ui. It outlines the necessary nested components for triggers, content, headers, footers, and actions, facilitating critical user confirmations.

```jsx
<AlertDialog>
  <AlertDialogTrigger />
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle />
      <AlertDialogDescription />
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel />
      <AlertDialogAction />
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>
```
Tokens:
Raw