Prism UI

https://www.prismui.tech/docs
Admin
Prism UI is a React component library built on Tailwind CSS, offering beautifully designed,...
Tokens:28,569
Snippets:108
Trust Score:6.4
Update:1 year ago
Show doc for...
Tokens:
Raw
### Project Setup Commands

Source: https://www.prismui.tech/docs/templates/prismui-homepage

Commands to install project dependencies and start the development server using pnpm. Ensure Node.js and pnpm are installed on your system.

```shell
pnpm install
```

```shell
pnpm dev
```

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

### Floating Action Panel Basic Usage Example

Source: https://www.prismui.tech/docs/components/floating-action-panel

Demonstrates the fundamental setup of the Floating Action Panel component using React. It shows how to import and use `FloatingActionPanelRoot`, `FloatingActionPanelTrigger`, `FloatingActionPanelContent`, and `FloatingActionPanelButton` to create a simple action menu with a 'New Item' button.

```javascript
import { Plus } from "lucide-react"
import {
  FloatingActionPanelRoot,
  FloatingActionPanelTrigger,
  FloatingActionPanelContent,
  FloatingActionPanelButton,
} from "@/components/prismui/floating-action-panel"

export default function Example() {
  return (
    <FloatingActionPanelRoot>
      {({ mode }) => (
        <>
          <FloatingActionPanelTrigger title="Quick Actions" mode="actions">
            Actions
          </FloatingActionPanelTrigger>
          <FloatingActionPanelContent>
            <div className="space-y-1 p-2">
              <FloatingActionPanelButton onClick={() => console.log("New")}>
                <Plus className="h-4 w-4" />
                New Item
              </FloatingActionPanelButton>
            </div>
          </FloatingActionPanelContent>
        </>
      )}
    </FloatingActionPanelRoot>
  )
}
```

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

### Initialize shadcn/ui with default settings

Source: https://www.prismui.tech/docs/installation

Command to initialize shadcn/ui with default settings, including New York style, Zinc color, and CSS variables for colors. This simplifies the initial setup process.

```shell
pnpm dlx shadcn@latest init -d
```

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

### Status Badge Installation

Source: https://www.prismui.tech/docs/components/status-badge

Instructions for installing the Status Badge component, including package manager commands and manual setup.

```bash
pnpm add framer-motion lucide-react
# Or using npm:
npm install framer-motion lucide-react
# Or using yarn:
yarn add framer-motion lucide-react
```

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

### Install PrismUI components

Source: https://www.prismui.tech/docs/installation

Installs PrismUI components using the shadcn/ui add command, specifying the component's JSON configuration URL. This example shows how to add the expandable-card component.

```shell
pnpm dlx shadcn@latest add "https://www.prismui.tech/r/styles/default/expandable-card.json"
```

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

### Install PrismUI dependencies

Source: https://www.prismui.tech/docs/installation

Installs necessary additional dependencies for PrismUI, including framer-motion for animations, tailwindcss-animate for Tailwind CSS animations, and lucide-react for icons.

```shell
pnpm add framer-motion
pnpm add tailwindcss-animate
pnpm add lucide-react
```

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

### Install base shadcn/ui components

Source: https://www.prismui.tech/docs/installation

Installs essential base components from shadcn/ui that PrismUI relies on. This includes components like button, card, dialog, and separator.

```shell
pnpm dlx shadcn@latest add button
pnpm dlx shadcn@latest add card
pnpm dlx shadcn@latest add dialog
pnpm dlx shadcn@latest add separator
```

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

### Install Framer Motion Dependency

Source: https://www.prismui.tech/docs/sections/hero

Before using the Hero component, you need to install the `framer-motion` library, which is essential for its animation features. This command uses pnpm for package management.

```bash
pnpm add framer-motion
```

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

### Install Enhanced Button

Source: https://www.prismui.tech/docs/components/enhanced-button

Installs the Enhanced Button component and its required dependencies using pnpm. This includes framer-motion for animations and lucide-react for icons.

```bash
pnpm add framer-motion lucide-react
```

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

### Initialize shadcn/ui with pnpm

Source: https://www.prismui.tech/docs/installation

Command to initialize shadcn/ui in a Next.js project using pnpm. This command sets up the project with default or custom configurations for shadcn/ui.

```shell
pnpm dlx shadcn@latest init
```

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

### Basic Hero Component Usage Example

Source: https://www.prismui.tech/docs/sections/hero

Shows a basic implementation of the Hero component. It highlights the use of the `className` prop to apply custom styling, such as background gradients, to the component.

```jsx
<Hero className="bg-gradient-to-b from-black to-zinc-900">
  {/* Optional content */}
</Hero>
```

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

### Install Tweet Card Dependencies

Source: https://www.prismui.tech/docs/components/tweet-card

Installs the necessary dependencies for the Tweet Card component. This is the first step in integrating the component into your project.

```bash
npm install @prismui/tweet-card
# or
yarn add @prismui/tweet-card
```

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

### Prism UI Pricing Section Usage Example

Source: https://www.prismui.tech/docs/sections/pricing

Illustrates how to integrate the Pricing Section component into a landing page or pricing page. It highlights key features like animated cards, monthly/yearly toggles, and responsive design.

```javascript
// Example usage within a React application:
// import PricingSection from '@/components/sections/pricing';
// 
// function MyPage() {
//   return (
//     <div>
//       {/* Other page content */}
//       <PricingSection />
//       {/* Other page content */}
//     </div>
//   );
// }
```

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

### Server Action Setup for Fetching Tweets

Source: https://www.prismui.tech/docs/components/tweet-card

An optional server action setup to fetch tweet data server-side. This is useful for dynamic content loading and can be integrated with the Tweet Card component.

```javascript
import { unstable_noStore as noStore } from 'next/cache';
import TweetCard from '@prismui/tweet-card';

async function getTweet(id) {
  noStore();
  const res = await fetch(`https://api.twitter.com/2/tweets?ids=${id}`, {
    headers: {
      Authorization: `Bearer ${process.env.TWITTER_API_BEARER_TOKEN}`,
    },
  });
  const data = await res.json();
  return data;
}

export default async function Page({ params }) {
  const tweet = await getTweet(params.id);

  return (
    <TweetCard
      id={params.id}
      data={tweet.data[0]} // Assuming the API returns data in this structure
    />
  );
}
```

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

### Basic DisplayCards Usage

Source: https://www.prismui.tech/docs/components/display-cards

Demonstrates the fundamental way to import and render the DisplayCards component. This example shows the default configuration without any custom data or styling.

```TypeScript
import { DisplayCards } from "@/components/prismui/display-cards"

export default function Example() {
  return <DisplayCards />
}
```

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

### Minimal Style Timeline Example

Source: https://www.prismui.tech/docs/components/timeline

Illustrates the minimal style of the Timeline component, featuring a clean design without icons. Suitable for simpler presentations.

```TypeScript
import { Timeline } from "@/components/prismui/timeline"

export default function TimelineMinimal() {
  const items = [
    {
      date: "2024-01-07",
      title: "Modern Style",
      description: "With subtle gradients and hover effects",
      href: "#modern",
    },
    {
      date: "2024-01-05",
      title: "Minimal Style",
      description: "Clean and simple design",
      href: "#minimal",
    }
  ]

  return (
    <Timeline
      items={items}
      initialCount={2}
      dotClassName="bg-muted-foreground/20 group-hover:bg-muted-foreground/40 h-2 w-2 transition-colors duration-300"
      lineClassName="border-l border-border/50"
      titleClassName="font-normal"
      dateClassName="font-light"
      buttonVariant="ghost"
      buttonSize="sm"
      showMoreText="View More"
      showLessText="View Less"
      animationDuration={0.3}
      animationDelay={0.1}
    />
  )
}
```

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

### Enhanced Button Variants

Source: https://www.prismui.tech/docs/components/enhanced-button

Shows examples of different visual variants available for the Enhanced Button component, including primary, secondary, outline, and ghost styles.

```typescript
<EnhancedButton variant="primary">Primary</EnhancedButton>
<EnhancedButton variant="secondary">Secondary</EnhancedButton>
<EnhancedButton variant="outline">Outline</EnhancedButton>
<EnhancedButton variant="ghost">Ghost</EnhancedButton>
```

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

### Basic Menu Popover Example

Source: https://www.prismui.tech/docs/components/popover

Demonstrates how to use the Popover component to create a basic menu with options like Settings, Share, and Send Message. It utilizes `PopoverRoot`, `PopoverTrigger`, `PopoverContent`, `PopoverHeader`, `PopoverBody`, and `PopoverButton` components.

```react
import {
  PopoverRoot,
  PopoverTrigger,
  PopoverContent,
  PopoverHeader,
  PopoverBody,
  PopoverButton,
} from "@/components/prismui/popover"
import { Settings, Share, MessageSquare } from "lucide-react"

export default function Example() {
  return (
    <PopoverRoot>
      <PopoverTrigger variant="outline">More options</PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>Options</PopoverHeader>
        <PopoverBody>
          <PopoverButton onClick={() => console.log("Settings clicked")}>
            <Settings className="h-4 w-4" />
            Settings
          </PopoverButton>
          <PopoverButton onClick={() => console.log("Share clicked")}>
            <Share className="h-4 w-4" />
            Share
          </PopoverButton>
          <PopoverButton onClick={() => console.log("Message clicked")}>
            <MessageSquare className="h-4 w-4" />
            Send Message
          </PopoverButton>
        </PopoverBody>
      </PopoverContent>
    </PopoverRoot>
  )
}
```

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

### Basic Usage of Expandable Card

Source: https://www.prismui.tech/docs/components/expandable-card

Demonstrates how to use the ProjectStatusCard component with essential props like title, progress, due date, contributors, tasks, GitHub stars, and open issues. This example shows a typical implementation for displaying project status.

```TypeScript
import { ProjectStatusCard } from "@/components/prismui/expandable-card"

export default function Example() {
  return (
    <ProjectStatusCard
      title="UI Component Library"
      progress={75}
      dueDate="Jan 15, 2024"
      contributors={[
        { name: "Sarah" },
        { name: "Mike" },
        { name: "Alex" },
        { name: "Emma" }
      ]}
      tasks={[
        { title: "Update Button Components", completed: true },
        { title: "Add Dark Mode Support", completed: true },
        { title: "Implement Form Validation", completed: false },
        { title: "Write Documentation", completed: false }
      ]}
      githubStars={128}
      openIssues={5}
    />
  )
}
```

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

### Tweet Card Basic Usage Example

Source: https://www.prismui.tech/docs/components/tweet-card

Demonstrates the most basic usage of the Tweet Card component, displaying a tweet using its ID.

```jsx
import TweetCard from '@prismui/tweet-card';

function Page() {
  return (
    <TweetCard id="1743790000000000000" />
  );
}
```

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

### Hero Component with Custom Content Example

Source: https://www.prismui.tech/docs/sections/hero

Illustrates how to render custom content within the Hero component by passing children. This allows for flexible content placement, such as headings and paragraphs, inside the 3D card section.

```jsx
<Hero>
  <div className="p-6 text-white">
    <h3 className="text-xl font-bold">Custom Card Content</h3>
    <p>Add any content inside the 3D card section</p>
  </div>
</Hero>
```

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

### Modern Style Timeline Example

Source: https://www.prismui.tech/docs/components/timeline

Demonstrates the modern style of the Timeline component with subtle gradients, hover effects, and icons. Uses Sparkles and Code icons from lucide-react.

```TypeScript
import { Timeline } from "@/components/prismui/timeline"
import { Sparkles, Code } from "lucide-react"

export default function TimelineModern() {
  const items = [
    {
      date: "2024-01-07",
      title: "Modern Style",
      description: "With subtle gradients and hover effects",
      href: "#modern",
      icon: <Sparkles className="h-3 w-3" />,
    },
    {
      date: "2024-01-05",
      title: "Minimal Style",
      description: "Clean and simple design",
      href: "#minimal",
      icon: <Code className="h-3 w-3" />,
    }
  ]

  return (
    <Timeline
      items={items}
      initialCount={2}
      dotClassName="bg-gradient-to-b from-background to-muted ring-1 ring-border group-hover:ring-primary group-hover:bg-gradient-to-b group-hover:from-muted group-hover:to-muted/50 transition-all duration-300"
      lineClassName="border-l border-border"
      titleClassName="font-medium text-foreground/90 group-hover:text-primary transition-colors duration-300"
      dateClassName="text-muted-foreground group-hover:text-foreground/80 transition-colors duration-300"
      descriptionClassName="text-muted-foreground/80"
      buttonVariant="outline"
      buttonSize="sm"
      showMoreText="Load More"
      showLessText="Show Less"
      animationDuration={0.4}
      animationDelay={0.15}
    />
  )
}
```

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

### Logo Carousel Basic Usage and Examples

Source: https://www.prismui.tech/docs/components/logo-carousel

Demonstrates the fundamental ways to use the Logo Carousel component, including basic rendering, setting custom column counts, providing custom logo data, and adjusting animation timing and styling.

```typescript
import { LogoCarousel } from "@/components/prismui/logo-carousel"

export default function Example() {
  return <LogoCarousel />
}
```

```jsx
<LogoCarousel columns={3} />
```

```typescript
interface Logo {
  id: number
  name: string
  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>
}

const customLogos: Logo[] = [
  {
    id: 1,
    name: "CustomLogo",
    icon: YourCustomLogoComponent
  },
  // Add more logos...
]
```

```typescript
// Adjust the CYCLE_DURATION constant in the component
const CYCLE_DURATION = 2000; // 2 seconds per logo
```

```jsx
<motion.div
  className="relative h-14 w-24 overflow-hidden md:h-24 md:w-48"
  // Customize dimensions and responsive behavior
>
  {/* ... */}
</motion.div>
```

```jsx
<motion.div
  initial={{ y: "10%", opacity: 0 }}
  animate={{
    y: "0%",
    opacity: 1,
    transition: {
      type: "spring",
      stiffness: 300,
      damping: 20,
    },
  }}
>
  {/* ... */}
</motion.div>
```

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

### Hero Badge Props Documentation

Source: https://www.prismui.tech/docs/components/hero-badge

Details the available properties (props) for the Hero Badge component, including their types, default values, and descriptions, to guide developers in customizing the component.

```APIDOC
HeroBadge Props:

  text: string
    - The text content to display within the badge.
    - No default value.

  href?: string
    - An optional URL for the badge to link to. If provided, the badge acts as a link.
    - No default value.

  icon?: ReactNode
    - An optional ReactNode representing an icon to display before the badge text.
    - No default value.

  endIcon?: ReactNode
    - An optional ReactNode representing an icon to display after the badge text.
    - No default value.

  variant?: "default" | "outline" | "ghost"
    - Specifies the visual style variant of the badge.
    - Defaults to "default".

  size?: "sm" | "md" | "lg"
    - Determines the size of the badge.
    - Defaults to "md".

  className?: string
    - Allows applying additional CSS classes for custom styling.
    - No default value.

  onClick?: () => void
    - An optional click handler function. This is used when the badge does not have an 'href' prop and should perform an action on click.
    - No default value.
```

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

### Form Input Popover Example

Source: https://www.prismui.tech/docs/components/popover

Illustrates using the Popover component to embed a form, specifically for adding notes. It showcases `PopoverForm`, `PopoverLabel`, `PopoverTextarea`, `PopoverFooter`, `PopoverCloseButton`, and `PopoverSubmitButton` for a complete form interaction within a popover.

```react
import {
  PopoverRoot,
  PopoverTrigger,
  PopoverContent,
  PopoverForm,
  PopoverLabel,
  PopoverTextarea,
  PopoverFooter,
  PopoverCloseButton,
  PopoverSubmitButton,
} from "@/components/prismui/popover"

export default function Example() {
  return (
    <PopoverRoot>
      <PopoverTrigger>Add Note</PopoverTrigger>
      <PopoverContent className="h-[200px] w-[364px]">
        <PopoverForm onSubmit={(note) => console.log("Note submitted:", note)}>
          <PopoverLabel>Add Note</PopoverLabel>
          <PopoverTextarea />
          <PopoverFooter>
            <PopoverCloseButton />
            <PopoverSubmitButton>Submit Note</PopoverSubmitButton>
          </PopoverFooter>
        </PopoverForm>
      </PopoverContent>
    </PopoverRoot>
  )
}
```

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

### React Server Component Setup

Source: https://www.prismui.tech/docs/components/tweet-card

Provides the code to set up the Tweet Card component within a React Server Component architecture. This involves importing and rendering the component.

```jsx
import TweetCard from '@prismui/tweet-card';

function MyComponent() {
  return (
    <TweetCard id="1743790000000000000" />
  );
}
```

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

### Hero Badge Custom Animation Settings

Source: https://www.prismui.tech/docs/components/hero-badge

Provides an example of how to implement custom entrance animations for elements within the Hero Badge component using Framer Motion, controlling opacity and vertical position.

```jsx
import { motion } from "framer-motion"

<motion.div
  initial={{ opacity: 0, y: -20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{
    duration: 0.8,
    ease: [0.16, 1, 0.3, 1]
  }}
>
  {/* ... badge content ... */}
</motion.div>
```

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

### WordReveal: Custom Styling Example

Source: https://www.prismui.tech/docs/components/word-reveal

Illustrates how to apply custom CSS classes to the WordReveal component to modify its appearance, such as text size, font weight, and color. This enables seamless integration with your project's design system.

```javascript
<WordReveal
  text="Custom styled animation"
  className="text-2xl md:text-4xl font-light text-emerald-100"
/>
```

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

### Custom Animation Settings for PopoverContent

Source: https://www.prismui.tech/docs/components/popover

Shows how to customize the animation of the `PopoverContent` component using Framer Motion props. This example applies `initial`, `animate`, `exit`, and `transition` props for a smooth fade-in and slide-up effect.

```react
<PopoverContent
  initial={{ opacity: 0, y: -8 }}
  animate={{ opacity: 1, y: 0 }}
  exit={{ opacity: 0, y: -8 }}
  transition={{ duration: 0.2 }}
>
  {/* ... */}
</PopoverContent>
```

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

### Customizing Action Button Variants and Styles

Source: https://www.prismui.tech/docs/components/action-button

Demonstrates how to apply custom variants, sizes, and additional CSS classes to the Action Button component. This example shows a 'destructive' variant with a larger size and bold font weight.

```javascript
<ActionButton
  variant="destructive"
  size="lg"
  className="font-bold"
  isPending={isPending}
>
  Delete Account
</ActionButton>
```

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

### Customizing Action Button Loading Indicator

Source: https://www.prismui.tech/docs/components/action-button

Shows how to customize the loading indicator within the Action Button component using CSS variables. This example specifically adjusts the spinner size for a more tailored visual experience.

```javascript
<ActionButton
  isPending={isPending}
  className="[--spinner-size:1.5rem]"
>
  Process
</ActionButton>
```

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

### Floating Action Panel Multiple Modes Example

Source: https://www.prismui.tech/docs/components/floating-action-panel

Illustrates how to use the Floating Action Panel with different modes, specifically 'actions' and 'note'. It shows conditional rendering of content based on the panel's current mode, allowing for distinct UI elements like action buttons or a form with a textarea.

```javascript
<FloatingActionPanelRoot>
  {({ mode }) => (
    <>
      <FloatingActionPanelTrigger title="Actions" mode="actions">
        Actions
      </FloatingActionPanelTrigger>
      <FloatingActionPanelTrigger title="Add Note" mode="note">
        Add Note
      </FloatingActionPanelTrigger>
      <FloatingActionPanelContent>
        {mode === "actions" ? (
          <div className="space-y-1 p-2">
            {/* Action buttons */}
          </div>
        ) : (
          <FloatingActionPanelForm onSubmit={handleNoteSubmit}>
            <FloatingActionPanelTextarea className="h-24" />
            {/* Submit button */}
          </FloatingActionPanelForm>
        )}
      </FloatingActionPanelContent>
    </>
  )}
</FloatingActionPanelRoot>
```

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

### Customizing Expandable Card Styling

Source: https://www.prismui.tech/docs/components/expandable-card

Provides an example of how to apply custom CSS classes to the card component for styling. This allows for control over width, maximum width, cursor behavior, and transition effects like hover shadows.

```TypeScript
<Card className="w-full max-w-md cursor-pointer transition-all duration-300 hover:shadow-lg">
  {/* ... */}
</Card>
```

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

### Timeline Component Usage (React)

Source: https://www.prismui.tech/docs/components/timeline

Demonstrates how to import and use the Timeline component from Prism UI. It shows the structure of the `items` prop, which includes date, title, description, and an optional icon. The example also highlights customization props like `initialCount`, `showMoreText`, `showLessText`, `dotClassName`, and `lineClassName`.

```jsx
import { Timeline } from "@/components/prismui/timeline"

export default function Example() {
  return (
    <Timeline
      items={[
        {
          date: "2024-01-07",
          title: "New Feature",
          description: "Added dark mode support",
          href: "/changelog/dark-mode",
          icon: <Sparkles className="h-3 w-3" />,
        },
        {
          date: "2024-01-05",
          title: "Bug Fix",
          description: "Fixed mobile navigation",
          href: "/changelog/mobile-nav",
          icon: <Code className="h-3 w-3" />,
        }
      ]}
      initialCount={3}
      showMoreText="Load More"
      showLessText="Show Less"
      dotClassName="bg-gradient-to-b from-background to-muted ring-1 ring-border"
      lineClassName="border-l border-border"
    />
  )
}
```

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

### Prism UI Pricing Section Dependencies

Source: https://www.prismui.tech/docs/sections/pricing

Lists the project dependencies required for the Pricing Section component, including UI components, animation libraries, and utility packages.

```json
{
  "dependencies": [
    "@/components/section",
    "@/components/ui/button",
    "@/components/ui/label",
    "@/components/ui/switch",
    "framer-motion",
    "canvas-confetti",
    "@number-flow/react"
  ]
}
```

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

### Basic Hero Component Usage

Source: https://www.prismui.tech/docs/components/hero

Demonstrates the fundamental way to import and render the Hero component with essential content configuration, including title, description, and primary action.

```typescript
import { Hero } from "@/components/prismui/hero"

export default function Example() {
  return (
    <Hero
      content={{
        title: "Welcome to",
        titleHighlight: "my website",
        description: "A beautiful landing page built with PrismUI.",
        primaryAction: {
          href: "/get-started",
          text: "Get Started",
        },
      }}
    />
  );
}
```

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

### Open Source Component Usage

Source: https://www.prismui.tech/docs/components/open-source

Demonstrates how to import and use the Open Source component from Prism UI. It shows basic integration with required props like repository name and default stats.

```jsx
import OpenSource from "@/components/prismui/open-source"

export default function Example() {
  return (
    <OpenSource
      repository="username/repository"
      defaultStats={{
        stars: 0,
        contributors: []
      }}
    />
  )
}
```

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

### Tweet Card Compact Mode Example

Source: https://www.prismui.tech/docs/components/tweet-card

Demonstrates enabling compact mode for the Tweet Card, which reduces its vertical space for a more condensed display.

```jsx
import TweetCard from '@prismui/tweet-card';

function Page() {
  return (
    <TweetCard id="1743790000000000000" compact />
  );
}
```

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

### Tweet Card Hidden Media Example

Source: https://www.prismui.tech/docs/components/tweet-card

Illustrates how to hide any attached media (photos or videos) within the Tweet Card using the `hideMedia` prop.

```jsx
import TweetCard from '@prismui/tweet-card';

function Page() {
  return (
    <TweetCard id="1743790000000000000" hideMedia />
  );
}
```

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

### Hero Badge Basic Usage

Source: https://www.prismui.tech/docs/components/hero-badge

Demonstrates the fundamental implementation of the Hero Badge component, including importing necessary modules and rendering the badge with text, an icon, and an end icon.

```jsx
import { HeroBadge } from "@/components/prismui/hero-badge"
import { Icons } from "@/components/icons"

export default function Example() {
  return (
    <HeroBadge
      href="/docs"
      text="New! PrismUI Components"
      icon={<Icons.logo className="h-4 w-4" />}
      endIcon={<Icons.chevronRight className="h-4 w-4" />}
    />
  )
}
```

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

### Enhanced Button Basic Usage

Source: https://www.prismui.tech/docs/components/enhanced-button

Demonstrates the fundamental usage of the Enhanced Button component. It shows how to set the variant, size, include an icon with specified position, and attach an onClick event handler.

```typescript
import EnhancedButton from "@/components/ui/enhanced-button"
import { Heart } from "lucide-react"

export default function Example() {
  return (
    <EnhancedButton
      variant="primary"
      size="md"
      icon={<Heart className="w-4 h-4" />}
      iconPosition="left"
      onClick={() => console.log("clicked")}
    >
      Click Me
    </EnhancedButton>
  )
}
```

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

### Tweet Card X Icon Variant Example

Source: https://www.prismui.tech/docs/components/tweet-card

Shows how to use the `iconVariant` prop to display the 'X' logo instead of the traditional Twitter bird logo.

```jsx
import TweetCard from '@prismui/tweet-card';

function Page() {
  return (
    <TweetCard id="1743790000000000000" iconVariant="x" />
  );
}
```

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

### Hero Component with Pill and Preview

Source: https://www.prismui.tech/docs/components/hero

Illustrates advanced usage of the Hero component by including a clickable pill element and a custom preview section, enhancing engagement and visual appeal.

```typescript
<Hero
  pill={{
    text: "New Feature!",
    href: "/features",
  }}
  content={{
    title: "Introducing",
    titleHighlight: "new features",
    description: "Check out our latest updates and improvements.",
    primaryAction: {
      href: "/features",
      text: "Learn More",
      icon: <Icons.book className="h-4 w-4" />,
    },
    secondaryAction: {
      href: "/docs",
      text: "Documentation",
      icon: <Icons.component className="h-4 w-4" />,
    },
  }}
  preview={<YourPreviewComponent />}
/>
```

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

### Enhanced Button Loading State

Source: https://www.prismui.tech/docs/components/enhanced-button

Illustrates how to implement the loading state for the Enhanced Button. This example uses React's useState hook to manage the loading status and displays custom text while processing.

```typescript
import { useState } from "react"
import EnhancedButton from "@/components/ui/enhanced-button"

export default function Example() {
  const [isLoading, setIsLoading] = useState(false)

  const handleClick = () => {
    setIsLoading(true)
    setTimeout(() => setIsLoading(false), 2000)
  }

  return (
    <EnhancedButton
      onClick={handleClick}
      isLoading={isLoading}
      loadingText="Processing..."
    >
      Submit
    </EnhancedButton>
  )
}
```

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

### FloatingActionPanelRoot API

Source: https://www.prismui.tech/docs/components/floating-action-panel

Defines the root component for the Floating Action Panel. It accepts a render function that receives the panel context, allowing for custom rendering logic. Additional CSS classes can be applied for styling.

```APIDOC
FloatingActionPanelRoot:
  props:
    children: (context: PanelContext) => ReactNode
      description: Render function that receives the panel context.
      type: Function
    className: string
      description: Additional CSS classes to apply to the component.
      type: string
```

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

### Custom Trigger Styles for PopoverTrigger

Source: https://www.prismui.tech/docs/components/popover

Demonstrates how to apply custom styling to the `PopoverTrigger` component using the `className` prop. This example styles the trigger as a flex container with a gap, padding, and includes an icon alongside text.

```react
<PopoverTrigger
  variant="outline"
  className="flex items-center gap-2 px-4 py-2"
>
  <Icon className="h-4 w-4" />
  <span>Custom Trigger</span>
</PopoverTrigger>
```

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

### Basic Action Button Usage in React

Source: https://www.prismui.tech/docs/components/action-button

Demonstrates the fundamental usage of the Action Button component for handling asynchronous operations with a loading state. It shows how to manage the `isPending` prop to provide visual feedback during data fetching or form submissions.

```javascript
import { ActionButton } from "@/components/prismui/action-button"
import { useState } from "react"

export default function Example() {
  const [isPending, setIsPending] = useState(false)

  async function handleSubmit() {
    setIsPending(true)
    // Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 1500))
    setIsPending(false)
  }

  return (
    <ActionButton onClick={handleSubmit} isPending={isPending}>
      Submit Form
    </ActionButton>
  )
}
```

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

### Action Button with Leading Icon

Source: https://www.prismui.tech/docs/components/action-button

Provides an example of how to include an icon alongside the button's text content in the Action Button component. This enhances usability by visually indicating the action, such as saving changes.

```javascript
<ActionButton isPending={isPending}>
  <Save className="mr-2 h-4 w-4" />
  Save Changes
</ActionButton>
```

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

### ButtonGroup Component API

Source: https://www.prismui.tech/docs/components/button-group

API documentation for the ButtonGroup component, detailing its available props for customization and functionality.

```APIDOC
ButtonGroup
  Props:
    size: "default" | "sm" | "lg" | "icon"
      Description: The size of the button group. Affects padding and font size of contained buttons.
      Default: "default"
    separated: boolean
      Description: If true, adds spacing between buttons within the group.
      Default: false
    className: string
      Description: Additional CSS classes to apply to the ButtonGroup container. Useful for custom styling.
    children: React.ReactNode
      Description: The content of the ButtonGroup, typically an array of Button components.
```

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

### Import and Use Hero Component

Source: https://www.prismui.tech/docs/sections/hero

This snippet demonstrates how to import the Hero component into your application and render it. You can optionally pass children to the Hero component, which will be rendered within the 3D card section.

```tsx
import Hero from "@/components/sections/hero"

export default function Page() {
  return (
    <Hero>
      {/* Optional child content for the 3D card section */}
    </Hero>
  )
}

```

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

### Customizing DisplayCards Layout

Source: https://www.prismui.tech/docs/components/display-cards

Explains how to adjust the positioning and layout of cards using CSS classes. This example uses Tailwind CSS classes to offset cards, creating a custom visual arrangement.

```TypeScript
<div className="max-w-4xl mx-auto">
  <DisplayCards
    cards={[
      {
        className: "translate-x-8 translate-y-8",
        title: "Custom Position",
      },
    ]}
  />
</div>
```

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

### Open Source Component with Custom Loading State

Source: https://www.prismui.tech/docs/components/open-source

Provides guidance on implementing a custom loading state for the Open Source component using React Suspense. This enhances the user experience during data fetching.

```jsx
<Suspense fallback={<YourCustomLoadingComponent />}>
  <OpenSource {...props} />
</Suspense>
```

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

### Open Source Component with GitHub Token

Source: https://www.prismui.tech/docs/components/open-source

Shows how to provide a GitHub token to the Open Source component for enhanced data fetching or authentication. The token should be securely managed, e.g., via environment variables.

```jsx
<OpenSource
  repository="username/repository"
  githubToken={process.env.GITHUB_TOKEN}
  defaultStats={{
    stars: 0,
    contributors: []
  }}
/>
```

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

### PrismUI Open Source Component Props

Source: https://www.prismui.tech/docs/components/open-source

Defines the configurable properties for the PrismUI Open Source component, enabling integration with GitHub repositories to display statistics and custom content.

```APIDOC
OpenSourceComponent:
  Props:
    repository: string
      Description: The GitHub repository in the format "owner/repo". This is a required parameter.
      Default: Required

    githubToken: string
      Description: An optional GitHub OAuth token for making authenticated API requests. This can help bypass rate limits.
      Default: undefined

    title: string
      Description: Custom text to display as the main title for the component.
      Default: "Proudly open-source"

    description: string
      Description: Custom text to display as a subtitle or description below the title.
      Default: "Our source code is available..."

    buttonText: string
      Description: Custom text for the call-to-action button, typically linking to the GitHub repository.
      Default: "Star on GitHub"

    className: string
      Description: Additional CSS classes to apply to the component for custom styling.
      Default: undefined

  Features:
    - Real-time GitHub stats
    - Animated star count
    - Contributor avatars with hover effects
    - Responsive layout
    - Custom content support
    - GitHub API integration
    - Error handling
    - Loading states
    - TypeScript support
    - SSR compatibility
    - Accessibility features

  Notes:
    - Built with Framer Motion for smooth animations
    - Server Component with client-side fallback
    - Automatic data fetching with caching
    - Responsive design with mobile-first approach
    - SSR compatible with "use client" directive
    - Optimized performance with proper suspense boundaries
    - ARIA attributes for accessibility
    - Rate limit aware with proper error handling
```

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

### Open Source Component with Custom Content

Source: https://www.prismui.tech/docs/components/open-source

Illustrates how to customize the text content of the Open Source component, including the title, description, and button text, to match specific project branding or messaging.

```jsx
<OpenSource
  repository="username/repository"
  title="Custom Title"
  description="Your custom description here"
  buttonText="Custom Button Text"
  defaultStats={{
    stars: 0,
    contributors: []
  }}
/>
```

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

### Customizing Expandable Card Badge Colors

Source: https://www.prismui.tech/docs/components/expandable-card

Shows how to dynamically set the color of a status badge based on the project's progress. This example uses conditional styling to change the background and text color of the badge to indicate 'Completed' or 'In Progress' status.

```TypeScript
<Badge
  variant="secondary"
  className={
    progress === 100
      ? "bg-green-100 text-green-600"
      : "bg-blue-100 text-blue-600"
  }
>
  {progress === 100 ? "Completed" : "In Progress"}
</Badge>
```

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

### NumberFlow with Currency Formatting

Source: https://www.prismui.tech/docs/components/number-flow

Shows how to format numbers as currency using the `format` prop with `style: 'currency'` and `currency: 'USD'`. Includes custom animation timing.

```javascript
<NumberFlow
  value={1234.56}
  format={{
    style: 'currency',
    currency: 'USD',
    minimumFractionDigits: 0
  }}
  transformTiming={{
    duration: 500,
    easing: 'ease-out'
  }}
/>
```
Tokens:
Raw