# UI TripleD

> Production-ready UI components, blocks, and full pages available in shadcn/ui and Base UI, powered by Framer Motion. Copy-paste components — not an installable npm package.

**Last Updated:** 2026-08-27T22:59:15.617Z

- Components come in **shadcn/ui**, **Base UI**, and **Carbon** variants (the suffix in the name indicates the style system, e.g. `-shadcnui`, `-baseui`, `-carbon`)
- **Copy-paste model** — browse the docs, preview a component, then copy its code directly into your project
- Built with **React 19**, **Next.js 16**, **TypeScript**, **Tailwind CSS 4**, and **Framer Motion**
- Also offers a **Landing Builder** (drag & drop shadcn/ui blocks into landing pages), **Background Builder** (shader & Aurora backgrounds), and **Grid Generator** (Tailwind CSS grids)

## Docs

- [Component Gallery](https://ui.tripled.work/components): Browse all components, blocks, and pages with live previews
- [GitHub Repository](https://github.com/moumen-soliman/uitripled): Source code, issues, and discussions
- [Contributing Guide](https://github.com/moumen-soliman/uitripled/blob/main/CONTRIBUTING.md): How to contribute to UI TripleD

## Components

### Accessible Image Slider Card

**Page:** [https://ui.tripled.work/components/image-slider-card-shadcnui](https://ui.tripled.work/components/image-slider-card-shadcnui)

```tsx
"use client"

import * as React from "react"

import { AccessibleImageSliderCard } from "@uitripled/react-shadcn/src/components/components/cards/image-slider-card.tsx"

export function AccessibleImageSliderCardDemo() {
  return (
    <AccessibleImageSliderCard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/image-slider-card-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="image-slider-card-shadcnui" title="@uitripled/react-shadcn/src/components/components/cards/image-slider-card.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { AccessibleImageSliderCard } from "@uitripled/react-shadcn/src/components/components/cards/image-slider-card.tsx"
```

```tsx showLineNumbers
<AccessibleImageSliderCard />
```

## Component Details

- **Category**: cards


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { AccessibleImageSliderCard } from "@uitripled/react-shadcn/src/components/components/cards/image-slider-card.tsx"

export function BasicExample() {
  return (
    <AccessibleImageSliderCard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### AI Chat Interface

**Page:** [https://ui.tripled.work/components/ai-chat-interface-shadcnui](https://ui.tripled.work/components/ai-chat-interface-shadcnui)

```tsx
"use client"

import * as React from "react"

import { AIChatInterface } from "@uitripled/react-shadcn/src/components/components/chat/ai-chat-interface.tsx"

export function AIChatInterfaceDemo() {
  return (
    <AIChatInterface />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/ai-chat-interface-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `AI Chat Interface` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="ai-chat-interface-shadcnui" title="@uitripled/react-shadcn/src/components/components/chat/ai-chat-interface.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { AIChatInterface } from "@uitripled/react-shadcn/src/components/components/chat/ai-chat-interface.tsx"
```

```tsx showLineNumbers
<AIChatInterface />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { AIChatInterface } from "@uitripled/react-shadcn/src/components/components/chat/ai-chat-interface.tsx"

export function BasicExample() {
  return (
    <AIChatInterface />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### AI Glow Input

**Page:** [https://ui.tripled.work/components/ai-glow-input-shadcnui](https://ui.tripled.work/components/ai-glow-input-shadcnui)

```tsx
"use client"

import * as React from "react"

import { AIGlowInput } from "@uitripled/react-shadcn/src/components/motion-core/ai-glow-input.tsx"

export function AIGlowInputDemo() {
  return (
    <AIGlowInput />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/ai-glow-input-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `AI Glow Input` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="ai-glow-input-shadcnui" title="@uitripled/react-shadcn/src/components/motion-core/ai-glow-input.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { AIGlowInput } from "@uitripled/react-shadcn/src/components/motion-core/ai-glow-input.tsx"
```

```tsx showLineNumbers
<AIGlowInput />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { AIGlowInput } from "@uitripled/react-shadcn/src/components/motion-core/ai-glow-input.tsx"

export function BasicExample() {
  return (
    <AIGlowInput />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### AI Loading Skeleton

**Page:** [https://ui.tripled.work/components/ai-loading-skeleton-shadcnui](https://ui.tripled.work/components/ai-loading-skeleton-shadcnui)

```tsx
"use client"

import * as React from "react"

import { AILoadingSkeleton } from "@uitripled/react-shadcn/src/components/motion-core/ai-loading-skeleton.tsx"

export function AILoadingSkeletonDemo() {
  return (
    <AILoadingSkeleton />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/ai-loading-skeleton-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `AI Loading Skeleton` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="ai-loading-skeleton-shadcnui" title="@uitripled/react-shadcn/src/components/motion-core/ai-loading-skeleton.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { AILoadingSkeleton } from "@uitripled/react-shadcn/src/components/motion-core/ai-loading-skeleton.tsx"
```

```tsx showLineNumbers
<AILoadingSkeleton />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { AILoadingSkeleton } from "@uitripled/react-shadcn/src/components/motion-core/ai-loading-skeleton.tsx"

export function BasicExample() {
  return (
    <AILoadingSkeleton />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### AI Response Typing Stream

**Page:** [https://ui.tripled.work/components/ai-response-typing-shadcnui](https://ui.tripled.work/components/ai-response-typing-shadcnui)

```tsx
"use client"

import * as React from "react"

import { AIResponseTypingStream } from "@uitripled/react-shadcn/src/components/motion-core/ai-response-typing.tsx"

export function AIResponseTypingStreamDemo() {
  return (
    <AIResponseTypingStream />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/ai-response-typing-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `AI Response Typing Stream` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="ai-response-typing-shadcnui" title="@uitripled/react-shadcn/src/components/motion-core/ai-response-typing.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { AIResponseTypingStream } from "@uitripled/react-shadcn/src/components/motion-core/ai-response-typing.tsx"
```

```tsx showLineNumbers
<AIResponseTypingStream />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { AIResponseTypingStream } from "@uitripled/react-shadcn/src/components/motion-core/ai-response-typing.tsx"

export function BasicExample() {
  return (
    <AIResponseTypingStream />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Animated Accordion

**Page:** [https://ui.tripled.work/components/animated-accordion-shadcnui](https://ui.tripled.work/components/animated-accordion-shadcnui)

```tsx
"use client"

import * as React from "react"

import { AnimatedAccordion } from "@uitripled/react-shadcn/src/components/disclosure/animated-accordion.tsx"

export function AnimatedAccordionDemo() {
  return (
    <AnimatedAccordion />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/animated-accordion-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Animated Accordion` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="animated-accordion-shadcnui" title="@uitripled/react-shadcn/src/components/disclosure/animated-accordion.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { AnimatedAccordion } from "@uitripled/react-shadcn/src/components/disclosure/animated-accordion.tsx"
```

```tsx showLineNumbers
<AnimatedAccordion />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { AnimatedAccordion } from "@uitripled/react-shadcn/src/components/disclosure/animated-accordion.tsx"

export function BasicExample() {
  return (
    <AnimatedAccordion />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Animated Card Stack

**Page:** [https://ui.tripled.work/components/animated-card-stack-baseui](https://ui.tripled.work/components/animated-card-stack-baseui)

```tsx
"use client"

import * as React from "react"

import { AnimatedCardStack } from "@uitripled/react-baseui/src/components/cards/baseui/animated-card-stack-baseui.tsx"

export function AnimatedCardStackDemo() {
  return (
    <AnimatedCardStack />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/animated-card-stack-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Animated Card Stack` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="animated-card-stack-baseui" title="@uitripled/react-baseui/src/components/cards/baseui/animated-card-stack-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { AnimatedCardStack } from "@uitripled/react-baseui/src/components/cards/baseui/animated-card-stack-baseui.tsx"
```

```tsx showLineNumbers
<AnimatedCardStack />
```

## Component Details

- **Category**: cards


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { AnimatedCardStack } from "@uitripled/react-baseui/src/components/cards/baseui/animated-card-stack-baseui.tsx"

export function BasicExample() {
  return (
    <AnimatedCardStack />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Animated Card Stack

**Page:** [https://ui.tripled.work/components/animated-card-stack-shadcnui](https://ui.tripled.work/components/animated-card-stack-shadcnui)

```tsx
"use client"

import * as React from "react"

import { AnimatedCardStack } from "@uitripled/react-shadcn/src/components/components/cards/shadcnui/animated-card-stack.tsx"

export function AnimatedCardStackDemo() {
  return (
    <AnimatedCardStack />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/animated-card-stack-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="animated-card-stack-shadcnui" title="@uitripled/react-shadcn/src/components/components/cards/shadcnui/animated-card-stack.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { AnimatedCardStack } from "@uitripled/react-shadcn/src/components/components/cards/shadcnui/animated-card-stack.tsx"
```

```tsx showLineNumbers
<AnimatedCardStack />
```

## Component Details

- **Category**: cards


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { AnimatedCardStack } from "@uitripled/react-shadcn/src/components/components/cards/shadcnui/animated-card-stack.tsx"

export function BasicExample() {
  return (
    <AnimatedCardStack />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Animated Checkbox

**Page:** [https://ui.tripled.work/components/animated-checkbox-shadcnui](https://ui.tripled.work/components/animated-checkbox-shadcnui)

```tsx
"use client"

import * as React from "react"

import { AnimatedCheckbox } from "@uitripled/react-shadcn/src/components/forms/animated-checkbox.tsx"

export function AnimatedCheckboxDemo() {
  return (
    <AnimatedCheckbox />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/animated-checkbox-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Animated Checkbox` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="animated-checkbox-shadcnui" title="@uitripled/react-shadcn/src/components/forms/animated-checkbox.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { AnimatedCheckbox } from "@uitripled/react-shadcn/src/components/forms/animated-checkbox.tsx"
```

```tsx showLineNumbers
<AnimatedCheckbox />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { AnimatedCheckbox } from "@uitripled/react-shadcn/src/components/forms/animated-checkbox.tsx"

export function BasicExample() {
  return (
    <AnimatedCheckbox />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Animated Dialog

**Page:** [https://ui.tripled.work/components/animated-dialog-shadcnui](https://ui.tripled.work/components/animated-dialog-shadcnui)

```tsx
"use client"

import * as React from "react"

import { AnimatedDialog } from "@uitripled/react-shadcn/src/components/modals/animated-dialog.tsx"

export function AnimatedDialogDemo() {
  return (
    <AnimatedDialog />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/animated-dialog-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Animated Dialog` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="animated-dialog-shadcnui" title="@uitripled/react-shadcn/src/components/modals/animated-dialog.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { AnimatedDialog } from "@uitripled/react-shadcn/src/components/modals/animated-dialog.tsx"
```

```tsx showLineNumbers
<AnimatedDialog />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { AnimatedDialog } from "@uitripled/react-shadcn/src/components/modals/animated-dialog.tsx"

export function BasicExample() {
  return (
    <AnimatedDialog />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Animated List

**Page:** [https://ui.tripled.work/components/animated-list-shadcnui](https://ui.tripled.work/components/animated-list-shadcnui)

```tsx
"use client"

import * as React from "react"

import { AnimatedList } from "@uitripled/react-shadcn/src/components/components/lists/animated-list.tsx"

export function AnimatedListDemo() {
  return (
    <AnimatedList />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/animated-list-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Animated List` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="animated-list-shadcnui" title="@uitripled/react-shadcn/src/components/components/lists/animated-list.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { AnimatedList } from "@uitripled/react-shadcn/src/components/components/lists/animated-list.tsx"
```

```tsx showLineNumbers
<AnimatedList />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { AnimatedList } from "@uitripled/react-shadcn/src/components/components/lists/animated-list.tsx"

export function BasicExample() {
  return (
    <AnimatedList />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Animated Navbar

**Page:** [https://ui.tripled.work/components/animated-navbar-shadcnui](https://ui.tripled.work/components/animated-navbar-shadcnui)

```tsx
"use client"

import * as React from "react"

import { AnimatedNavbar } from "@uitripled/react-shadcn/src/components/navigation/animated-navbar.tsx"

export function AnimatedNavbarDemo() {
  return (
    <AnimatedNavbar />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/animated-navbar-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Animated Navbar` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="animated-navbar-shadcnui" title="@uitripled/react-shadcn/src/components/navigation/animated-navbar.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { AnimatedNavbar } from "@uitripled/react-shadcn/src/components/navigation/animated-navbar.tsx"
```

```tsx showLineNumbers
<AnimatedNavbar />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `lucide-react`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { AnimatedNavbar } from "@uitripled/react-shadcn/src/components/navigation/animated-navbar.tsx"

export function BasicExample() {
  return (
    <AnimatedNavbar />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Animated Pagination

**Page:** [https://ui.tripled.work/components/animated-pagination-shadcnui](https://ui.tripled.work/components/animated-pagination-shadcnui)

```tsx
"use client"

import * as React from "react"

import { AnimatedPagination } from "@uitripled/react-shadcn/src/components/navigation/animated-pagination.tsx"

export function AnimatedPaginationDemo() {
  return (
    <AnimatedPagination />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/animated-pagination-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Animated Pagination` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="animated-pagination-shadcnui" title="@uitripled/react-shadcn/src/components/navigation/animated-pagination.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { AnimatedPagination } from "@uitripled/react-shadcn/src/components/navigation/animated-pagination.tsx"
```

```tsx showLineNumbers
<AnimatedPagination />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `lucide-react`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { AnimatedPagination } from "@uitripled/react-shadcn/src/components/navigation/animated-pagination.tsx"

export function BasicExample() {
  return (
    <AnimatedPagination />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Animated Profile Menu

**Page:** [https://ui.tripled.work/components/animated-profile-menu-shadcnui](https://ui.tripled.work/components/animated-profile-menu-shadcnui)

```tsx
"use client"

import * as React from "react"

import { AnimatedProfileMenu } from "@uitripled/react-shadcn/src/components/navigation/animated-profile-menu.tsx"

export function AnimatedProfileMenuDemo() {
  return (
    <AnimatedProfileMenu />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/animated-profile-menu-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Animated Profile Menu` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="animated-profile-menu-shadcnui" title="@uitripled/react-shadcn/src/components/navigation/animated-profile-menu.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { AnimatedProfileMenu } from "@uitripled/react-shadcn/src/components/navigation/animated-profile-menu.tsx"
```

```tsx showLineNumbers
<AnimatedProfileMenu />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `lucide-react`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { AnimatedProfileMenu } from "@uitripled/react-shadcn/src/components/navigation/animated-profile-menu.tsx"

export function BasicExample() {
  return (
    <AnimatedProfileMenu />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Animated Radio

**Page:** [https://ui.tripled.work/components/animated-radio-shadcnui](https://ui.tripled.work/components/animated-radio-shadcnui)

```tsx
"use client"

import * as React from "react"

import { AnimatedRadio } from "@uitripled/react-shadcn/src/components/forms/animated-radio.tsx"

export function AnimatedRadioDemo() {
  return (
    <AnimatedRadio />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/animated-radio-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Animated Radio` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="animated-radio-shadcnui" title="@uitripled/react-shadcn/src/components/forms/animated-radio.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { AnimatedRadio } from "@uitripled/react-shadcn/src/components/forms/animated-radio.tsx"
```

```tsx showLineNumbers
<AnimatedRadio />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { AnimatedRadio } from "@uitripled/react-shadcn/src/components/forms/animated-radio.tsx"

export function BasicExample() {
  return (
    <AnimatedRadio />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Animated Select

**Page:** [https://ui.tripled.work/components/animated-select-shadcnui](https://ui.tripled.work/components/animated-select-shadcnui)

```tsx
"use client"

import * as React from "react"

import { AnimatedSelect } from "@uitripled/react-shadcn/src/components/forms/animated-select.tsx"

export function AnimatedSelectDemo() {
  return (
    <AnimatedSelect />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/animated-select-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Animated Select` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="animated-select-shadcnui" title="@uitripled/react-shadcn/src/components/forms/animated-select.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { AnimatedSelect } from "@uitripled/react-shadcn/src/components/forms/animated-select.tsx"
```

```tsx showLineNumbers
<AnimatedSelect />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { AnimatedSelect } from "@uitripled/react-shadcn/src/components/forms/animated-select.tsx"

export function BasicExample() {
  return (
    <AnimatedSelect />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Animated Sidebar

**Page:** [https://ui.tripled.work/components/animated-sidebar-shadcnui](https://ui.tripled.work/components/animated-sidebar-shadcnui)

```tsx
"use client"

import * as React from "react"

import { AnimatedSidebar } from "@uitripled/react-shadcn/src/components/navigation/animated-sidebar.tsx"

export function AnimatedSidebarDemo() {
  return (
    <AnimatedSidebar />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/animated-sidebar-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Animated Sidebar` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="animated-sidebar-shadcnui" title="@uitripled/react-shadcn/src/components/navigation/animated-sidebar.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { AnimatedSidebar } from "@uitripled/react-shadcn/src/components/navigation/animated-sidebar.tsx"
```

```tsx showLineNumbers
<AnimatedSidebar />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `lucide-react`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { AnimatedSidebar } from "@uitripled/react-shadcn/src/components/navigation/animated-sidebar.tsx"

export function BasicExample() {
  return (
    <AnimatedSidebar />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Animated Tabs

**Page:** [https://ui.tripled.work/components/animated-tabs-shadcnui](https://ui.tripled.work/components/animated-tabs-shadcnui)

```tsx
"use client"

import * as React from "react"

import { AnimatedTabs } from "@uitripled/react-shadcn/src/components/components/tabs/animated-tabs.tsx"

export function AnimatedTabsDemo() {
  return (
    <AnimatedTabs />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/animated-tabs-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Animated Tabs` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="animated-tabs-shadcnui" title="@uitripled/react-shadcn/src/components/components/tabs/animated-tabs.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { AnimatedTabs } from "@uitripled/react-shadcn/src/components/components/tabs/animated-tabs.tsx"
```

```tsx showLineNumbers
<AnimatedTabs />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { AnimatedTabs } from "@uitripled/react-shadcn/src/components/components/tabs/animated-tabs.tsx"

export function BasicExample() {
  return (
    <AnimatedTabs />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Animated Tooltip

**Page:** [https://ui.tripled.work/components/animated-tooltip-shadcnui](https://ui.tripled.work/components/animated-tooltip-shadcnui)

```tsx
"use client"

import * as React from "react"

import { AnimatedTooltip } from "@uitripled/react-shadcn/src/components/tooltips/animated-tooltip.tsx"

export function AnimatedTooltipDemo() {
  return (
    <AnimatedTooltip />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/animated-tooltip-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Animated Tooltip` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="animated-tooltip-shadcnui" title="@uitripled/react-shadcn/src/components/tooltips/animated-tooltip.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { AnimatedTooltip } from "@uitripled/react-shadcn/src/components/tooltips/animated-tooltip.tsx"
```

```tsx showLineNumbers
<AnimatedTooltip />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `lucide-react`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { AnimatedTooltip } from "@uitripled/react-shadcn/src/components/tooltips/animated-tooltip.tsx"

export function BasicExample() {
  return (
    <AnimatedTooltip />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Avatar Group

**Page:** [https://ui.tripled.work/components/avatar-group-shadcnui](https://ui.tripled.work/components/avatar-group-shadcnui)

```tsx
"use client"

import * as React from "react"

import { AvatarGroup } from "@uitripled/react-shadcn/src/components/avatars/avatar-group.tsx"

export function AvatarGroupDemo() {
  return (
    <AvatarGroup />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/avatar-group-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Avatar Group` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="avatar-group-shadcnui" title="@uitripled/react-shadcn/src/components/avatars/avatar-group.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { AvatarGroup } from "@uitripled/react-shadcn/src/components/avatars/avatar-group.tsx"
```

```tsx showLineNumbers
<AvatarGroup />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { AvatarGroup } from "@uitripled/react-shadcn/src/components/avatars/avatar-group.tsx"

export function BasicExample() {
  return (
    <AvatarGroup />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Blog Typography

**Page:** [https://ui.tripled.work/components/blog-typography-shadcnui](https://ui.tripled.work/components/blog-typography-shadcnui)

```tsx
"use client"

import * as React from "react"

import { BlogTypography } from "@uitripled/react-shadcn/src/components/components/blog/blog-typography.tsx"

export function BlogTypographyDemo() {
  return (
    <BlogTypography />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/blog-typography-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Blog Typography` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="blog-typography-shadcnui" title="@uitripled/react-shadcn/src/components/components/blog/blog-typography.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { BlogTypography } from "@uitripled/react-shadcn/src/components/components/blog/blog-typography.tsx"
```

```tsx showLineNumbers
<BlogTypography />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { BlogTypography } from "@uitripled/react-shadcn/src/components/components/blog/blog-typography.tsx"

export function BasicExample() {
  return (
    <BlogTypography />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Bottom Modal

**Page:** [https://ui.tripled.work/components/bottom-modal](https://ui.tripled.work/components/bottom-modal)

```tsx
"use client"

import * as React from "react"

import { BottomModal } from "@uitripled/react-shadcn/src/components/modals/bottom-modal.tsx"

export function BottomModalDemo() {
  return (
    <BottomModal />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/bottom-modal
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="bottom-modal" title="@uitripled/react-shadcn/src/components/modals/bottom-modal.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { BottomModal } from "@uitripled/react-shadcn/src/components/modals/bottom-modal.tsx"
```

```tsx showLineNumbers
<BottomModal />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { BottomModal } from "@uitripled/react-shadcn/src/components/modals/bottom-modal.tsx"

export function BasicExample() {
  return (
    <BottomModal />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Browse Folder

**Page:** [https://ui.tripled.work/components/browse-folder-baseui](https://ui.tripled.work/components/browse-folder-baseui)

```tsx
"use client"

import * as React from "react"

import { BrowseFolder } from "@uitripled/react-baseui/src/components/sections/browse-folder-baseui.tsx"

export function BrowseFolderDemo() {
  return (
    <BrowseFolder />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/browse-folder-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Browse Folder` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="browse-folder-baseui" title="@uitripled/react-baseui/src/components/sections/browse-folder-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { BrowseFolder } from "@uitripled/react-baseui/src/components/sections/browse-folder-baseui.tsx"
```

```tsx showLineNumbers
<BrowseFolder />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { BrowseFolder } from "@uitripled/react-baseui/src/components/sections/browse-folder-baseui.tsx"

export function BasicExample() {
  return (
    <BrowseFolder />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Browse Folder

**Page:** [https://ui.tripled.work/components/browse-folder-shadcnui](https://ui.tripled.work/components/browse-folder-shadcnui)

```tsx
"use client"

import * as React from "react"

import { BrowseFolder } from "@uitripled/react-shadcn/src/components/sections/browse-folder.tsx"

export function BrowseFolderDemo() {
  return (
    <BrowseFolder />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/browse-folder-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Browse Folder` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="browse-folder-shadcnui" title="@uitripled/react-shadcn/src/components/sections/browse-folder.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { BrowseFolder } from "@uitripled/react-shadcn/src/components/sections/browse-folder.tsx"
```

```tsx showLineNumbers
<BrowseFolder />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { BrowseFolder } from "@uitripled/react-shadcn/src/components/sections/browse-folder.tsx"

export function BasicExample() {
  return (
    <BrowseFolder />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Cards Slider

**Page:** [https://ui.tripled.work/components/cards-slider-shadcnui](https://ui.tripled.work/components/cards-slider-shadcnui)

```tsx
"use client"

import * as React from "react"

import { CardsSlider } from "@uitripled/react-shadcn/src/components/components/sliders/cards-slider.tsx"

export function CardsSliderDemo() {
  return (
    <CardsSlider />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/cards-slider-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="cards-slider-shadcnui" title="@uitripled/react-shadcn/src/components/components/sliders/cards-slider.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { CardsSlider } from "@uitripled/react-shadcn/src/components/components/sliders/cards-slider.tsx"
```

```tsx showLineNumbers
<CardsSlider />
```

## Component Details

- **Category**: cards


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { CardsSlider } from "@uitripled/react-shadcn/src/components/components/sliders/cards-slider.tsx"

export function BasicExample() {
  return (
    <CardsSlider />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Chat App

**Page:** [https://ui.tripled.work/components/chat-app-shadcnui](https://ui.tripled.work/components/chat-app-shadcnui)

```tsx
"use client"

import * as React from "react"

import { ChatApp } from "@uitripled/react-shadcn/src/components/components/chat/chat-app.tsx"

export function ChatAppDemo() {
  return (
    <ChatApp />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/chat-app-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Chat App` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="chat-app-shadcnui" title="@uitripled/react-shadcn/src/components/components/chat/chat-app.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { ChatApp } from "@uitripled/react-shadcn/src/components/components/chat/chat-app.tsx"
```

```tsx showLineNumbers
<ChatApp />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { ChatApp } from "@uitripled/react-shadcn/src/components/components/chat/chat-app.tsx"

export function BasicExample() {
  return (
    <ChatApp />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Cinema Ticket

**Page:** [https://ui.tripled.work/components/cinema-ticket-baseui](https://ui.tripled.work/components/cinema-ticket-baseui)

```tsx
"use client"

import * as React from "react"

import { CinemaTicket } from "@uitripled/react-baseui/src/components/sections/cinema-ticket-baseui.tsx"

export function CinemaTicketDemo() {
  return (
    <CinemaTicket />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/cinema-ticket-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Cinema Ticket` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="cinema-ticket-baseui" title="@uitripled/react-baseui/src/components/sections/cinema-ticket-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { CinemaTicket } from "@uitripled/react-baseui/src/components/sections/cinema-ticket-baseui.tsx"
```

```tsx showLineNumbers
<CinemaTicket />
```

## Component Details

- **Category**: cards


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { CinemaTicket } from "@uitripled/react-baseui/src/components/sections/cinema-ticket-baseui.tsx"

export function BasicExample() {
  return (
    <CinemaTicket />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Cinema Ticket

**Page:** [https://ui.tripled.work/components/cinema-ticket-shadcnui](https://ui.tripled.work/components/cinema-ticket-shadcnui)

```tsx
"use client"

import * as React from "react"

import { CinemaTicket } from "@uitripled/react-shadcn/src/components/sections/cinema-ticket.tsx"

export function CinemaTicketDemo() {
  return (
    <CinemaTicket />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/cinema-ticket-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="cinema-ticket-shadcnui" title="@uitripled/react-shadcn/src/components/sections/cinema-ticket.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { CinemaTicket } from "@uitripled/react-shadcn/src/components/sections/cinema-ticket.tsx"
```

```tsx showLineNumbers
<CinemaTicket />
```

## Component Details

- **Category**: cards


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { CinemaTicket } from "@uitripled/react-shadcn/src/components/sections/cinema-ticket.tsx"

export function BasicExample() {
  return (
    <CinemaTicket />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Command Palette

**Page:** [https://ui.tripled.work/components/command-palette-shadcnui](https://ui.tripled.work/components/command-palette-shadcnui)

```tsx
"use client"

import * as React from "react"

import { CommandPalette } from "@uitripled/react-shadcn/src/components/search/command-palette.tsx"

export function CommandPaletteDemo() {
  return (
    <CommandPalette />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/command-palette-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Command Palette` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="command-palette-shadcnui" title="@uitripled/react-shadcn/src/components/search/command-palette.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { CommandPalette } from "@uitripled/react-shadcn/src/components/search/command-palette.tsx"
```

```tsx showLineNumbers
<CommandPalette />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { CommandPalette } from "@uitripled/react-shadcn/src/components/search/command-palette.tsx"

export function BasicExample() {
  return (
    <CommandPalette />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Comment Thread

**Page:** [https://ui.tripled.work/components/comment-thread-shadcnui](https://ui.tripled.work/components/comment-thread-shadcnui)

```tsx
"use client"

import * as React from "react"

import { CommentThread } from "@uitripled/react-shadcn/src/components/components/comments/comment-thread.tsx"

export function CommentThreadDemo() {
  return (
    <CommentThread />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/comment-thread-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Comment Thread` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="comment-thread-shadcnui" title="@uitripled/react-shadcn/src/components/components/comments/comment-thread.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { CommentThread } from "@uitripled/react-shadcn/src/components/components/comments/comment-thread.tsx"
```

```tsx showLineNumbers
<CommentThread />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { CommentThread } from "@uitripled/react-shadcn/src/components/components/comments/comment-thread.tsx"

export function BasicExample() {
  return (
    <CommentThread />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Conference Ticket

**Page:** [https://ui.tripled.work/components/conference-ticket-baseui](https://ui.tripled.work/components/conference-ticket-baseui)

```tsx
"use client"

import * as React from "react"

import { ConferenceTicket } from "@uitripled/react-baseui/src/components/sections/conference-ticket-baseui.tsx"

export function ConferenceTicketDemo() {
  return (
    <ConferenceTicket />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/conference-ticket-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Conference Ticket` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="conference-ticket-baseui" title="@uitripled/react-baseui/src/components/sections/conference-ticket-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { ConferenceTicket } from "@uitripled/react-baseui/src/components/sections/conference-ticket-baseui.tsx"
```

```tsx showLineNumbers
<ConferenceTicket />
```

## Component Details

- **Category**: cards


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { ConferenceTicket } from "@uitripled/react-baseui/src/components/sections/conference-ticket-baseui.tsx"

export function BasicExample() {
  return (
    <ConferenceTicket />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Conference Ticket

**Page:** [https://ui.tripled.work/components/conference-ticket-shadcnui](https://ui.tripled.work/components/conference-ticket-shadcnui)

```tsx
"use client"

import * as React from "react"

import { ConferenceTicket } from "@uitripled/react-shadcn/src/components/sections/conference-ticket.tsx"

export function ConferenceTicketDemo() {
  return (
    <ConferenceTicket />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/conference-ticket-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="conference-ticket-shadcnui" title="@uitripled/react-shadcn/src/components/sections/conference-ticket.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { ConferenceTicket } from "@uitripled/react-shadcn/src/components/sections/conference-ticket.tsx"
```

```tsx showLineNumbers
<ConferenceTicket />
```

## Component Details

- **Category**: cards


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { ConferenceTicket } from "@uitripled/react-shadcn/src/components/sections/conference-ticket.tsx"

export function BasicExample() {
  return (
    <ConferenceTicket />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Context Menu

**Page:** [https://ui.tripled.work/components/context-menu-shadcnui](https://ui.tripled.work/components/context-menu-shadcnui)

```tsx
"use client"

import * as React from "react"

import { ContextMenu } from "@uitripled/react-shadcn/src/components/navigation/context-menu.tsx"

export function ContextMenuDemo() {
  return (
    <ContextMenu />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/context-menu-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Context Menu` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="context-menu-shadcnui" title="@uitripled/react-shadcn/src/components/navigation/context-menu.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { ContextMenu } from "@uitripled/react-shadcn/src/components/navigation/context-menu.tsx"
```

```tsx showLineNumbers
<ContextMenu />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `lucide-react`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { ContextMenu } from "@uitripled/react-shadcn/src/components/navigation/context-menu.tsx"

export function BasicExample() {
  return (
    <ContextMenu />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Context Menu Bubble

**Page:** [https://ui.tripled.work/components/context-menu-bubble-shadcnui](https://ui.tripled.work/components/context-menu-bubble-shadcnui)

```tsx
"use client"

import * as React from "react"

import { ContextMenuBubble } from "@uitripled/react-shadcn/src/components/motion-core/context-menu-bubble.tsx"

export function ContextMenuBubbleDemo() {
  return (
    <ContextMenuBubble />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/context-menu-bubble-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Context Menu Bubble` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="context-menu-bubble-shadcnui" title="@uitripled/react-shadcn/src/components/motion-core/context-menu-bubble.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { ContextMenuBubble } from "@uitripled/react-shadcn/src/components/motion-core/context-menu-bubble.tsx"
```

```tsx showLineNumbers
<ContextMenuBubble />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { ContextMenuBubble } from "@uitripled/react-shadcn/src/components/motion-core/context-menu-bubble.tsx"

export function BasicExample() {
  return (
    <ContextMenuBubble />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Course Content Page

**Page:** [https://ui.tripled.work/components/course-content-page-shadcnui](https://ui.tripled.work/components/course-content-page-shadcnui)

```tsx
"use client"

import * as React from "react"

import { CourseContentPage } from "@uitripled/react-shadcn/src/components/components/course-content/course-content-page.tsx"

export function CourseContentPageDemo() {
  return (
    <CourseContentPage />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/course-content-page-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Course Content Page` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="course-content-page-shadcnui" title="@uitripled/react-shadcn/src/components/components/course-content/course-content-page.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { CourseContentPage } from "@uitripled/react-shadcn/src/components/components/course-content/course-content-page.tsx"
```

```tsx showLineNumbers
<CourseContentPage />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { CourseContentPage } from "@uitripled/react-shadcn/src/components/components/course-content/course-content-page.tsx"

export function BasicExample() {
  return (
    <CourseContentPage />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Credit Card

**Page:** [https://ui.tripled.work/components/credit-card-baseui](https://ui.tripled.work/components/credit-card-baseui)

```tsx
"use client"

import * as React from "react"

import { CreditCard } from "@uitripled/react-baseui/src/components/cards/baseui/credit-card-baseui.tsx"

export function CreditCardDemo() {
  return (
    <CreditCard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/credit-card-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Credit Card` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="credit-card-baseui" title="@uitripled/react-baseui/src/components/cards/baseui/credit-card-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { CreditCard } from "@uitripled/react-baseui/src/components/cards/baseui/credit-card-baseui.tsx"
```

```tsx showLineNumbers
<CreditCard />
```

## Component Details

- **Category**: cards


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { CreditCard } from "@uitripled/react-baseui/src/components/cards/baseui/credit-card-baseui.tsx"

export function BasicExample() {
  return (
    <CreditCard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Credit Card

**Page:** [https://ui.tripled.work/components/credit-card-shadcnui](https://ui.tripled.work/components/credit-card-shadcnui)

```tsx
"use client"

import * as React from "react"

import { CreditCard } from "@uitripled/react-shadcn/src/components/components/cards/shadcnui/credit-card.tsx"

export function CreditCardDemo() {
  return (
    <CreditCard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/credit-card-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="credit-card-shadcnui" title="@uitripled/react-shadcn/src/components/components/cards/shadcnui/credit-card.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { CreditCard } from "@uitripled/react-shadcn/src/components/components/cards/shadcnui/credit-card.tsx"
```

```tsx showLineNumbers
<CreditCard />
```

## Component Details

- **Category**: cards


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { CreditCard } from "@uitripled/react-shadcn/src/components/components/cards/shadcnui/credit-card.tsx"

export function BasicExample() {
  return (
    <CreditCard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Currency Converter Card

**Page:** [https://ui.tripled.work/components/currency-converter-card-baseui](https://ui.tripled.work/components/currency-converter-card-baseui)

```tsx
"use client"

import * as React from "react"

import { CurrencyConverterCard } from "@uitripled/react-baseui/src/components/sections/currency-converter-card-baseui.tsx"

export function CurrencyConverterCardDemo() {
  return (
    <CurrencyConverterCard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/currency-converter-card-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Currency Converter Card` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="currency-converter-card-baseui" title="@uitripled/react-baseui/src/components/sections/currency-converter-card-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { CurrencyConverterCard } from "@uitripled/react-baseui/src/components/sections/currency-converter-card-baseui.tsx"
```

```tsx showLineNumbers
<CurrencyConverterCard />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { CurrencyConverterCard } from "@uitripled/react-baseui/src/components/sections/currency-converter-card-baseui.tsx"

export function BasicExample() {
  return (
    <CurrencyConverterCard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Currency Converter Card

**Page:** [https://ui.tripled.work/components/currency-converter-card-shadcnui](https://ui.tripled.work/components/currency-converter-card-shadcnui)

```tsx
"use client"

import * as React from "react"

import { CurrencyConverterCard } from "@uitripled/react-shadcn/src/components/sections/currency-converter-card.tsx"

export function CurrencyConverterCardDemo() {
  return (
    <CurrencyConverterCard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/currency-converter-card-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Currency Converter Card` component uses the following components. Make sure you have them installed in your project.

- button
- card

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="currency-converter-card-shadcnui" title="@uitripled/react-shadcn/src/components/sections/currency-converter-card.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { CurrencyConverterCard } from "@uitripled/react-shadcn/src/components/sections/currency-converter-card.tsx"
```

```tsx showLineNumbers
<CurrencyConverterCard />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button
- card

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { CurrencyConverterCard } from "@uitripled/react-shadcn/src/components/sections/currency-converter-card.tsx"

export function BasicExample() {
  return (
    <CurrencyConverterCard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)
- [card](/docs/components/card)

---

### Detail Task Card

**Page:** [https://ui.tripled.work/components/detail-task-card-baseui](https://ui.tripled.work/components/detail-task-card-baseui)

```tsx
"use client"

import * as React from "react"

import { DetailTaskCard } from "@uitripled/react-baseui/src/components/cards/baseui/detail-task-baseui.tsx"

export function DetailTaskCardDemo() {
  return (
    <DetailTaskCard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/detail-task-card-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Detail Task Card` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="detail-task-card-baseui" title="@uitripled/react-baseui/src/components/cards/baseui/detail-task-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { DetailTaskCard } from "@uitripled/react-baseui/src/components/cards/baseui/detail-task-baseui.tsx"
```

```tsx showLineNumbers
<DetailTaskCard />
```

## Component Details

- **Category**: cards


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { DetailTaskCard } from "@uitripled/react-baseui/src/components/cards/baseui/detail-task-baseui.tsx"

export function BasicExample() {
  return (
    <DetailTaskCard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Detail Task Card

**Page:** [https://ui.tripled.work/components/detail-task-card-shadcnui](https://ui.tripled.work/components/detail-task-card-shadcnui)

```tsx
"use client"

import * as React from "react"

import { DetailTaskCard } from "@uitripled/react-shadcn/src/components/components/cards/shadcnui/detail-task.tsx"

export function DetailTaskCardDemo() {
  return (
    <DetailTaskCard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/detail-task-card-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="detail-task-card-shadcnui" title="@uitripled/react-shadcn/src/components/components/cards/shadcnui/detail-task.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { DetailTaskCard } from "@uitripled/react-shadcn/src/components/components/cards/shadcnui/detail-task.tsx"
```

```tsx showLineNumbers
<DetailTaskCard />
```

## Component Details

- **Category**: cards


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { DetailTaskCard } from "@uitripled/react-shadcn/src/components/components/cards/shadcnui/detail-task.tsx"

export function BasicExample() {
  return (
    <DetailTaskCard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Drag-to-Confirm Slider

**Page:** [https://ui.tripled.work/components/drag-to-confirm-slider-shadcnui](https://ui.tripled.work/components/drag-to-confirm-slider-shadcnui)

```tsx
"use client"

import * as React from "react"

import { Drag-to-ConfirmSlider } from "@uitripled/react-shadcn/src/components/motion-core/drag-to-confirm-slider.tsx"

export function Drag-to-ConfirmSliderDemo() {
  return (
    <Drag-to-ConfirmSlider />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/drag-to-confirm-slider-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Drag-to-Confirm Slider` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="drag-to-confirm-slider-shadcnui" title="@uitripled/react-shadcn/src/components/motion-core/drag-to-confirm-slider.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { Drag-to-ConfirmSlider } from "@uitripled/react-shadcn/src/components/motion-core/drag-to-confirm-slider.tsx"
```

```tsx showLineNumbers
<Drag-to-ConfirmSlider />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { Drag-to-ConfirmSlider } from "@uitripled/react-shadcn/src/components/motion-core/drag-to-confirm-slider.tsx"

export function BasicExample() {
  return (
    <Drag-to-ConfirmSlider />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Draggable List

**Page:** [https://ui.tripled.work/components/draggable-list-shadcnui](https://ui.tripled.work/components/draggable-list-shadcnui)

```tsx
"use client"

import * as React from "react"

import { DraggableList } from "@uitripled/react-shadcn/src/components/components/lists/draggable-list.tsx"

export function DraggableListDemo() {
  return (
    <DraggableList />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/draggable-list-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Draggable List` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="draggable-list-shadcnui" title="@uitripled/react-shadcn/src/components/components/lists/draggable-list.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { DraggableList } from "@uitripled/react-shadcn/src/components/components/lists/draggable-list.tsx"
```

```tsx showLineNumbers
<DraggableList />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { DraggableList } from "@uitripled/react-shadcn/src/components/components/lists/draggable-list.tsx"

export function BasicExample() {
  return (
    <DraggableList />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Ecommerce Highlight Card

**Page:** [https://ui.tripled.work/components/ecommerce-highlight-card-baseui](https://ui.tripled.work/components/ecommerce-highlight-card-baseui)

```tsx
"use client"

import * as React from "react"

import { EcommerceHighlightCard } from "@uitripled/react-baseui/src/components/cards/baseui/ecommerce-highlight-card-baseui.tsx"

export function EcommerceHighlightCardDemo() {
  return (
    <EcommerceHighlightCard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/ecommerce-highlight-card-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Ecommerce Highlight Card` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="ecommerce-highlight-card-baseui" title="@uitripled/react-baseui/src/components/cards/baseui/ecommerce-highlight-card-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { EcommerceHighlightCard } from "@uitripled/react-baseui/src/components/cards/baseui/ecommerce-highlight-card-baseui.tsx"
```

```tsx showLineNumbers
<EcommerceHighlightCard />
```

## Component Details

- **Category**: cards


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { EcommerceHighlightCard } from "@uitripled/react-baseui/src/components/cards/baseui/ecommerce-highlight-card-baseui.tsx"

export function BasicExample() {
  return (
    <EcommerceHighlightCard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Ecommerce Highlight Card

**Page:** [https://ui.tripled.work/components/ecommerce-highlight-card-shadcnui](https://ui.tripled.work/components/ecommerce-highlight-card-shadcnui)

```tsx
"use client"

import * as React from "react"

import { EcommerceHighlightCard } from "@uitripled/react-shadcn/src/components/components/cards/shadcnui/ecommerce-highlight-card.tsx"

export function EcommerceHighlightCardDemo() {
  return (
    <EcommerceHighlightCard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/ecommerce-highlight-card-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="ecommerce-highlight-card-shadcnui" title="@uitripled/react-shadcn/src/components/components/cards/shadcnui/ecommerce-highlight-card.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { EcommerceHighlightCard } from "@uitripled/react-shadcn/src/components/components/cards/shadcnui/ecommerce-highlight-card.tsx"
```

```tsx showLineNumbers
<EcommerceHighlightCard />
```

## Component Details

- **Category**: cards


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { EcommerceHighlightCard } from "@uitripled/react-shadcn/src/components/components/cards/shadcnui/ecommerce-highlight-card.tsx"

export function BasicExample() {
  return (
    <EcommerceHighlightCard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Expanding Search Dock

**Page:** [https://ui.tripled.work/components/expanding-search-dock-shadcnui](https://ui.tripled.work/components/expanding-search-dock-shadcnui)

```tsx
"use client"

import * as React from "react"

import { ExpandingSearchDock } from "@uitripled/react-shadcn/src/components/motion-core/expanding-search-dock.tsx"

export function ExpandingSearchDockDemo() {
  return (
    <ExpandingSearchDock />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/expanding-search-dock-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Expanding Search Dock` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="expanding-search-dock-shadcnui" title="@uitripled/react-shadcn/src/components/motion-core/expanding-search-dock.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { ExpandingSearchDock } from "@uitripled/react-shadcn/src/components/motion-core/expanding-search-dock.tsx"
```

```tsx showLineNumbers
<ExpandingSearchDock />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { ExpandingSearchDock } from "@uitripled/react-shadcn/src/components/motion-core/expanding-search-dock.tsx"

export function BasicExample() {
  return (
    <ExpandingSearchDock />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Fade & Slide Modal

**Page:** [https://ui.tripled.work/components/fade-slide-modal-shadcnui](https://ui.tripled.work/components/fade-slide-modal-shadcnui)

```tsx
"use client"

import * as React from "react"

import { Fade&SlideModal } from "@uitripled/react-shadcn/src/components/components/modal/fade-slide.tsx"

export function Fade&SlideModalDemo() {
  return (
    <Fade&SlideModal />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/fade-slide-modal-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Fade & Slide Modal` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="fade-slide-modal-shadcnui" title="@uitripled/react-shadcn/src/components/components/modal/fade-slide.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { Fade&SlideModal } from "@uitripled/react-shadcn/src/components/components/modal/fade-slide.tsx"
```

```tsx showLineNumbers
<Fade&SlideModal />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { Fade&SlideModal } from "@uitripled/react-shadcn/src/components/components/modal/fade-slide.tsx"

export function BasicExample() {
  return (
    <Fade&SlideModal />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Floating Chat Widget

**Page:** [https://ui.tripled.work/components/floating-chat-widget-shadcnui](https://ui.tripled.work/components/floating-chat-widget-shadcnui)

```tsx
"use client"

import * as React from "react"

import { FloatingChatWidget } from "@uitripled/react-shadcn/src/components/components/chat/floating-chat-widget.tsx"

export function FloatingChatWidgetDemo() {
  return (
    <FloatingChatWidget />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/floating-chat-widget-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Floating Chat Widget` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="floating-chat-widget-shadcnui" title="@uitripled/react-shadcn/src/components/components/chat/floating-chat-widget.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { FloatingChatWidget } from "@uitripled/react-shadcn/src/components/components/chat/floating-chat-widget.tsx"
```

```tsx showLineNumbers
<FloatingChatWidget />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { FloatingChatWidget } from "@uitripled/react-shadcn/src/components/components/chat/floating-chat-widget.tsx"

export function BasicExample() {
  return (
    <FloatingChatWidget />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Floating Label Input

**Page:** [https://ui.tripled.work/components/floating-label-input-shadcnui](https://ui.tripled.work/components/floating-label-input-shadcnui)

```tsx
"use client"

import * as React from "react"

import { FloatingLabelInput } from "@uitripled/react-shadcn/src/components/components/inputs/floating-label-input.tsx"

export function FloatingLabelInputDemo() {
  return (
    <FloatingLabelInput />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/floating-label-input-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Floating Label Input` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="floating-label-input-shadcnui" title="@uitripled/react-shadcn/src/components/components/inputs/floating-label-input.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { FloatingLabelInput } from "@uitripled/react-shadcn/src/components/components/inputs/floating-label-input.tsx"
```

```tsx showLineNumbers
<FloatingLabelInput />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { FloatingLabelInput } from "@uitripled/react-shadcn/src/components/components/inputs/floating-label-input.tsx"

export function BasicExample() {
  return (
    <FloatingLabelInput />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Fluid Modal Transition

**Page:** [https://ui.tripled.work/components/fluid-modal-transition-shadcnui](https://ui.tripled.work/components/fluid-modal-transition-shadcnui)

```tsx
"use client"

import * as React from "react"

import { FluidModalTransition } from "@uitripled/react-shadcn/src/components/motion-core/fluid-modal-transition.tsx"

export function FluidModalTransitionDemo() {
  return (
    <FluidModalTransition />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/fluid-modal-transition-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Fluid Modal Transition` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="fluid-modal-transition-shadcnui" title="@uitripled/react-shadcn/src/components/motion-core/fluid-modal-transition.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { FluidModalTransition } from "@uitripled/react-shadcn/src/components/motion-core/fluid-modal-transition.tsx"
```

```tsx showLineNumbers
<FluidModalTransition />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { FluidModalTransition } from "@uitripled/react-shadcn/src/components/motion-core/fluid-modal-transition.tsx"

export function BasicExample() {
  return (
    <FluidModalTransition />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Folder Animation

**Page:** [https://ui.tripled.work/components/folder-animation-carbon](https://ui.tripled.work/components/folder-animation-carbon)

```tsx
"use client"

import * as React from "react"

import { FolderAnimation } from "@uitripled/react-carbon/src/components/native/folder-animation-carbon.tsx"

export function FolderAnimationDemo() {
  return (
    <FolderAnimation />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/folder-animation-carbon
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="folder-animation-carbon" title="@uitripled/react-carbon/src/components/native/folder-animation-carbon.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { FolderAnimation } from "@uitripled/react-carbon/src/components/native/folder-animation-carbon.tsx"
```

```tsx showLineNumbers
<FolderAnimation />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { FolderAnimation } from "@uitripled/react-carbon/src/components/native/folder-animation-carbon.tsx"

export function BasicExample() {
  return (
    <FolderAnimation />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Glass Account Settings Card

**Page:** [https://ui.tripled.work/components/glass-account-settings-card-shadcnui](https://ui.tripled.work/components/glass-account-settings-card-shadcnui)

```tsx
"use client"

import * as React from "react"

import { GlassAccountSettingsCard } from "@uitripled/react-shadcn/src/components/components/forms/glass-account-settings.tsx"

export function GlassAccountSettingsCardDemo() {
  return (
    <GlassAccountSettingsCard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/glass-account-settings-card-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Glass Account Settings Card` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="glass-account-settings-card-shadcnui" title="@uitripled/react-shadcn/src/components/components/forms/glass-account-settings.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GlassAccountSettingsCard } from "@uitripled/react-shadcn/src/components/components/forms/glass-account-settings.tsx"
```

```tsx showLineNumbers
<GlassAccountSettingsCard />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GlassAccountSettingsCard } from "@uitripled/react-shadcn/src/components/components/forms/glass-account-settings.tsx"

export function BasicExample() {
  return (
    <GlassAccountSettingsCard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Glass Blog Card

**Page:** [https://ui.tripled.work/components/glass-blog-card-baseui](https://ui.tripled.work/components/glass-blog-card-baseui)

```tsx
"use client"

import * as React from "react"

import { GlassBlogCard } from "@uitripled/react-baseui/src/components/cards/baseui/glass-blog-card-baseui.tsx"

export function GlassBlogCardDemo() {
  return (
    <GlassBlogCard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/glass-blog-card-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Glass Blog Card` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="glass-blog-card-baseui" title="@uitripled/react-baseui/src/components/cards/baseui/glass-blog-card-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GlassBlogCard } from "@uitripled/react-baseui/src/components/cards/baseui/glass-blog-card-baseui.tsx"
```

```tsx showLineNumbers
<GlassBlogCard />
```

## Component Details

- **Category**: cards


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GlassBlogCard } from "@uitripled/react-baseui/src/components/cards/baseui/glass-blog-card-baseui.tsx"

export function BasicExample() {
  return (
    <GlassBlogCard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Glass Blog Card

**Page:** [https://ui.tripled.work/components/glass-blog-card-shadcnui](https://ui.tripled.work/components/glass-blog-card-shadcnui)

```tsx
"use client"

import * as React from "react"

import { GlassBlogCard } from "@uitripled/react-shadcn/src/components/components/cards/shadcnui/glass-blog-card.tsx"

export function GlassBlogCardDemo() {
  return (
    <GlassBlogCard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/glass-blog-card-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="glass-blog-card-shadcnui" title="@uitripled/react-shadcn/src/components/components/cards/shadcnui/glass-blog-card.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GlassBlogCard } from "@uitripled/react-shadcn/src/components/components/cards/shadcnui/glass-blog-card.tsx"
```

```tsx showLineNumbers
<GlassBlogCard />
```

## Component Details

- **Category**: cards


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GlassBlogCard } from "@uitripled/react-shadcn/src/components/components/cards/shadcnui/glass-blog-card.tsx"

export function BasicExample() {
  return (
    <GlassBlogCard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Glass Checkout Card

**Page:** [https://ui.tripled.work/components/glass-checkout-card-baseui](https://ui.tripled.work/components/glass-checkout-card-baseui)

```tsx
"use client"

import * as React from "react"

import { GlassCheckoutCard } from "@uitripled/react-baseui/src/components/cards/baseui/glass-checkout-card-baseui.tsx"

export function GlassCheckoutCardDemo() {
  return (
    <GlassCheckoutCard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/glass-checkout-card-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Glass Checkout Card` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="glass-checkout-card-baseui" title="@uitripled/react-baseui/src/components/cards/baseui/glass-checkout-card-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GlassCheckoutCard } from "@uitripled/react-baseui/src/components/cards/baseui/glass-checkout-card-baseui.tsx"
```

```tsx showLineNumbers
<GlassCheckoutCard />
```

## Component Details

- **Category**: cards


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GlassCheckoutCard } from "@uitripled/react-baseui/src/components/cards/baseui/glass-checkout-card-baseui.tsx"

export function BasicExample() {
  return (
    <GlassCheckoutCard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Glass Checkout Card

**Page:** [https://ui.tripled.work/components/glass-checkout-card-shadcnui](https://ui.tripled.work/components/glass-checkout-card-shadcnui)

```tsx
"use client"

import * as React from "react"

import { GlassCheckoutCard } from "@uitripled/react-shadcn/src/components/components/cards/shadcnui/glass-checkout-card.tsx"

export function GlassCheckoutCardDemo() {
  return (
    <GlassCheckoutCard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/glass-checkout-card-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="glass-checkout-card-shadcnui" title="@uitripled/react-shadcn/src/components/components/cards/shadcnui/glass-checkout-card.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GlassCheckoutCard } from "@uitripled/react-shadcn/src/components/components/cards/shadcnui/glass-checkout-card.tsx"
```

```tsx showLineNumbers
<GlassCheckoutCard />
```

## Component Details

- **Category**: cards


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GlassCheckoutCard } from "@uitripled/react-shadcn/src/components/components/cards/shadcnui/glass-checkout-card.tsx"

export function BasicExample() {
  return (
    <GlassCheckoutCard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Glass Forgot Password Card

**Page:** [https://ui.tripled.work/components/glass-forgot-password-card-shadcnui](https://ui.tripled.work/components/glass-forgot-password-card-shadcnui)

```tsx
"use client"

import * as React from "react"

import { GlassForgotPasswordCard } from "@uitripled/react-shadcn/src/components/components/forms/glass-forgot-password.tsx"

export function GlassForgotPasswordCardDemo() {
  return (
    <GlassForgotPasswordCard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/glass-forgot-password-card-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Glass Forgot Password Card` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="glass-forgot-password-card-shadcnui" title="@uitripled/react-shadcn/src/components/components/forms/glass-forgot-password.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GlassForgotPasswordCard } from "@uitripled/react-shadcn/src/components/components/forms/glass-forgot-password.tsx"
```

```tsx showLineNumbers
<GlassForgotPasswordCard />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GlassForgotPasswordCard } from "@uitripled/react-shadcn/src/components/components/forms/glass-forgot-password.tsx"

export function BasicExample() {
  return (
    <GlassForgotPasswordCard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Glass Order Summary

**Page:** [https://ui.tripled.work/components/glass-order-summary-baseui](https://ui.tripled.work/components/glass-order-summary-baseui)

```tsx
"use client"

import * as React from "react"

import { GlassOrderSummary } from "@uitripled/react-baseui/src/components/cards/baseui/glass-order-summary-baseui.tsx"

export function GlassOrderSummaryDemo() {
  return (
    <GlassOrderSummary />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/glass-order-summary-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Glass Order Summary` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="glass-order-summary-baseui" title="@uitripled/react-baseui/src/components/cards/baseui/glass-order-summary-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GlassOrderSummary } from "@uitripled/react-baseui/src/components/cards/baseui/glass-order-summary-baseui.tsx"
```

```tsx showLineNumbers
<GlassOrderSummary />
```

## Component Details

- **Category**: cards


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GlassOrderSummary } from "@uitripled/react-baseui/src/components/cards/baseui/glass-order-summary-baseui.tsx"

export function BasicExample() {
  return (
    <GlassOrderSummary />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Glass Order Summary

**Page:** [https://ui.tripled.work/components/glass-order-summary-shadcnui](https://ui.tripled.work/components/glass-order-summary-shadcnui)

```tsx
"use client"

import * as React from "react"

import { GlassOrderSummary } from "@uitripled/react-shadcn/src/components/components/cards/shadcnui/glass-order-summary.tsx"

export function GlassOrderSummaryDemo() {
  return (
    <GlassOrderSummary />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/glass-order-summary-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="glass-order-summary-shadcnui" title="@uitripled/react-shadcn/src/components/components/cards/shadcnui/glass-order-summary.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GlassOrderSummary } from "@uitripled/react-shadcn/src/components/components/cards/shadcnui/glass-order-summary.tsx"
```

```tsx showLineNumbers
<GlassOrderSummary />
```

## Component Details

- **Category**: cards


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GlassOrderSummary } from "@uitripled/react-shadcn/src/components/components/cards/shadcnui/glass-order-summary.tsx"

export function BasicExample() {
  return (
    <GlassOrderSummary />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Glass Profile Settings Card

**Page:** [https://ui.tripled.work/components/glass-profile-settings-card-shadcnui](https://ui.tripled.work/components/glass-profile-settings-card-shadcnui)

```tsx
"use client"

import * as React from "react"

import { GlassProfileSettingsCard } from "@uitripled/react-shadcn/src/components/components/forms/glass-profile-settings.tsx"

export function GlassProfileSettingsCardDemo() {
  return (
    <GlassProfileSettingsCard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/glass-profile-settings-card-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Glass Profile Settings Card` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="glass-profile-settings-card-shadcnui" title="@uitripled/react-shadcn/src/components/components/forms/glass-profile-settings.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GlassProfileSettingsCard } from "@uitripled/react-shadcn/src/components/components/forms/glass-profile-settings.tsx"
```

```tsx showLineNumbers
<GlassProfileSettingsCard />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GlassProfileSettingsCard } from "@uitripled/react-shadcn/src/components/components/forms/glass-profile-settings.tsx"

export function BasicExample() {
  return (
    <GlassProfileSettingsCard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Glass Sign-In Card

**Page:** [https://ui.tripled.work/components/glass-sign-in-card-shadcnui](https://ui.tripled.work/components/glass-sign-in-card-shadcnui)

```tsx
"use client"

import * as React from "react"

import { GlassSign-InCard } from "@uitripled/react-shadcn/src/components/components/forms/glass-sign-in.tsx"

export function GlassSign-InCardDemo() {
  return (
    <GlassSign-InCard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/glass-sign-in-card-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Glass Sign-In Card` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="glass-sign-in-card-shadcnui" title="@uitripled/react-shadcn/src/components/components/forms/glass-sign-in.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GlassSign-InCard } from "@uitripled/react-shadcn/src/components/components/forms/glass-sign-in.tsx"
```

```tsx showLineNumbers
<GlassSign-InCard />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GlassSign-InCard } from "@uitripled/react-shadcn/src/components/components/forms/glass-sign-in.tsx"

export function BasicExample() {
  return (
    <GlassSign-InCard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Glass Sign-Up Card

**Page:** [https://ui.tripled.work/components/glass-sign-up-card-shadcnui](https://ui.tripled.work/components/glass-sign-up-card-shadcnui)

```tsx
"use client"

import * as React from "react"

import { GlassSign-UpCard } from "@uitripled/react-shadcn/src/components/components/forms/glass-sign-up.tsx"

export function GlassSign-UpCardDemo() {
  return (
    <GlassSign-UpCard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/glass-sign-up-card-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Glass Sign-Up Card` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="glass-sign-up-card-shadcnui" title="@uitripled/react-shadcn/src/components/components/forms/glass-sign-up.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GlassSign-UpCard } from "@uitripled/react-shadcn/src/components/components/forms/glass-sign-up.tsx"
```

```tsx showLineNumbers
<GlassSign-UpCard />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GlassSign-UpCard } from "@uitripled/react-shadcn/src/components/components/forms/glass-sign-up.tsx"

export function BasicExample() {
  return (
    <GlassSign-UpCard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Glass Verification Code Card

**Page:** [https://ui.tripled.work/components/glass-verification-code-card-shadcnui](https://ui.tripled.work/components/glass-verification-code-card-shadcnui)

```tsx
"use client"

import * as React from "react"

import { GlassVerificationCodeCard } from "@uitripled/react-shadcn/src/components/components/forms/glass-verification-code.tsx"

export function GlassVerificationCodeCardDemo() {
  return (
    <GlassVerificationCodeCard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/glass-verification-code-card-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Glass Verification Code Card` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="glass-verification-code-card-shadcnui" title="@uitripled/react-shadcn/src/components/components/forms/glass-verification-code.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GlassVerificationCodeCard } from "@uitripled/react-shadcn/src/components/components/forms/glass-verification-code.tsx"
```

```tsx showLineNumbers
<GlassVerificationCodeCard />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GlassVerificationCodeCard } from "@uitripled/react-shadcn/src/components/components/forms/glass-verification-code.tsx"

export function BasicExample() {
  return (
    <GlassVerificationCodeCard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Glass Wallet Card

**Page:** [https://ui.tripled.work/components/glass-wallet-card-baseui](https://ui.tripled.work/components/glass-wallet-card-baseui)

```tsx
"use client"

import * as React from "react"

import { GlassWalletCard } from "@uitripled/react-baseui/src/components/cards/baseui/glass-wallet-card-baseui.tsx"

export function GlassWalletCardDemo() {
  return (
    <GlassWalletCard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/glass-wallet-card-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Glass Wallet Card` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="glass-wallet-card-baseui" title="@uitripled/react-baseui/src/components/cards/baseui/glass-wallet-card-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GlassWalletCard } from "@uitripled/react-baseui/src/components/cards/baseui/glass-wallet-card-baseui.tsx"
```

```tsx showLineNumbers
<GlassWalletCard />
```

## Component Details

- **Category**: cards


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GlassWalletCard } from "@uitripled/react-baseui/src/components/cards/baseui/glass-wallet-card-baseui.tsx"

export function BasicExample() {
  return (
    <GlassWalletCard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Glass Wallet Card

**Page:** [https://ui.tripled.work/components/glass-wallet-card-shadcnui](https://ui.tripled.work/components/glass-wallet-card-shadcnui)

```tsx
"use client"

import * as React from "react"

import { GlassWalletCard } from "@uitripled/react-shadcn/src/components/components/cards/shadcnui/glass-wallet-card.tsx"

export function GlassWalletCardDemo() {
  return (
    <GlassWalletCard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/glass-wallet-card-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="glass-wallet-card-shadcnui" title="@uitripled/react-shadcn/src/components/components/cards/shadcnui/glass-wallet-card.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GlassWalletCard } from "@uitripled/react-shadcn/src/components/components/cards/shadcnui/glass-wallet-card.tsx"
```

```tsx showLineNumbers
<GlassWalletCard />
```

## Component Details

- **Category**: cards


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GlassWalletCard } from "@uitripled/react-shadcn/src/components/components/cards/shadcnui/glass-wallet-card.tsx"

export function BasicExample() {
  return (
    <GlassWalletCard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Glassmorphism Statistics Card

**Page:** [https://ui.tripled.work/components/glassmorphism-statistics-card-baseui](https://ui.tripled.work/components/glassmorphism-statistics-card-baseui)

```tsx
"use client"

import * as React from "react"

import { GlassmorphismStatisticsCard } from "@uitripled/react-baseui/src/components/sections/glassmorphism-statistics-card-baseui.tsx"

export function GlassmorphismStatisticsCardDemo() {
  return (
    <GlassmorphismStatisticsCard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/glassmorphism-statistics-card-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Glassmorphism Statistics Card` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="glassmorphism-statistics-card-baseui" title="@uitripled/react-baseui/src/components/sections/glassmorphism-statistics-card-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GlassmorphismStatisticsCard } from "@uitripled/react-baseui/src/components/sections/glassmorphism-statistics-card-baseui.tsx"
```

```tsx showLineNumbers
<GlassmorphismStatisticsCard />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GlassmorphismStatisticsCard } from "@uitripled/react-baseui/src/components/sections/glassmorphism-statistics-card-baseui.tsx"

export function BasicExample() {
  return (
    <GlassmorphismStatisticsCard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Glassmorphism Statistics Card

**Page:** [https://ui.tripled.work/components/glassmorphism-statistics-card-shadcnui](https://ui.tripled.work/components/glassmorphism-statistics-card-shadcnui)

```tsx
"use client"

import * as React from "react"

import { GlassmorphismStatisticsCard } from "@uitripled/react-shadcn/src/components/sections/glassmorphism-statistics-card.tsx"

export function GlassmorphismStatisticsCardDemo() {
  return (
    <GlassmorphismStatisticsCard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/glassmorphism-statistics-card-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Glassmorphism Statistics Card` component uses the following components. Make sure you have them installed in your project.

- button
- card

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="glassmorphism-statistics-card-shadcnui" title="@uitripled/react-shadcn/src/components/sections/glassmorphism-statistics-card.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GlassmorphismStatisticsCard } from "@uitripled/react-shadcn/src/components/sections/glassmorphism-statistics-card.tsx"
```

```tsx showLineNumbers
<GlassmorphismStatisticsCard />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button
- card

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GlassmorphismStatisticsCard } from "@uitripled/react-shadcn/src/components/sections/glassmorphism-statistics-card.tsx"

export function BasicExample() {
  return (
    <GlassmorphismStatisticsCard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)
- [card](/docs/components/card)

---

### Hover Expand Card

**Page:** [https://ui.tripled.work/components/hover-expand-card-baseui](https://ui.tripled.work/components/hover-expand-card-baseui)

```tsx
"use client"

import * as React from "react"

import { HoverExpandCard } from "@uitripled/react-baseui/src/components/cards/baseui/hover-expand-baseui.tsx"

export function HoverExpandCardDemo() {
  return (
    <HoverExpandCard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/hover-expand-card-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Hover Expand Card` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="hover-expand-card-baseui" title="@uitripled/react-baseui/src/components/cards/baseui/hover-expand-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { HoverExpandCard } from "@uitripled/react-baseui/src/components/cards/baseui/hover-expand-baseui.tsx"
```

```tsx showLineNumbers
<HoverExpandCard />
```

## Component Details

- **Category**: cards


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { HoverExpandCard } from "@uitripled/react-baseui/src/components/cards/baseui/hover-expand-baseui.tsx"

export function BasicExample() {
  return (
    <HoverExpandCard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Hover Expand Card

**Page:** [https://ui.tripled.work/components/hover-expand-card-shadcnui](https://ui.tripled.work/components/hover-expand-card-shadcnui)

```tsx
"use client"

import * as React from "react"

import { HoverExpandCard } from "@uitripled/react-shadcn/src/components/components/cards/shadcnui/hover-expand.tsx"

export function HoverExpandCardDemo() {
  return (
    <HoverExpandCard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/hover-expand-card-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="hover-expand-card-shadcnui" title="@uitripled/react-shadcn/src/components/components/cards/shadcnui/hover-expand.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { HoverExpandCard } from "@uitripled/react-shadcn/src/components/components/cards/shadcnui/hover-expand.tsx"
```

```tsx showLineNumbers
<HoverExpandCard />
```

## Component Details

- **Category**: cards


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { HoverExpandCard } from "@uitripled/react-shadcn/src/components/components/cards/shadcnui/hover-expand.tsx"

export function BasicExample() {
  return (
    <HoverExpandCard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Interactive Resume Card

**Page:** [https://ui.tripled.work/components/resume-card-baseui](https://ui.tripled.work/components/resume-card-baseui)

```tsx
"use client"

import * as React from "react"

import { InteractiveResumeCard } from "@uitripled/react-baseui/src/components/resumes/baseui/resume-card-baseui.tsx"

export function InteractiveResumeCardDemo() {
  return (
    <InteractiveResumeCard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/resume-card-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Interactive Resume Card` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="resume-card-baseui" title="@uitripled/react-baseui/src/components/resumes/baseui/resume-card-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { InteractiveResumeCard } from "@uitripled/react-baseui/src/components/resumes/baseui/resume-card-baseui.tsx"
```

```tsx showLineNumbers
<InteractiveResumeCard />
```

## Component Details

- **Category**: resumes


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { InteractiveResumeCard } from "@uitripled/react-baseui/src/components/resumes/baseui/resume-card-baseui.tsx"

export function BasicExample() {
  return (
    <InteractiveResumeCard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Interactive Resume Card

**Page:** [https://ui.tripled.work/components/resume-card-shadcnui](https://ui.tripled.work/components/resume-card-shadcnui)

```tsx
"use client"

import * as React from "react"

import { InteractiveResumeCard } from "@uitripled/react-shadcn/src/components/components/resumes/shadcnui/resume-card.tsx"

export function InteractiveResumeCardDemo() {
  return (
    <InteractiveResumeCard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/resume-card-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="resume-card-shadcnui" title="@uitripled/react-shadcn/src/components/components/resumes/shadcnui/resume-card.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { InteractiveResumeCard } from "@uitripled/react-shadcn/src/components/components/resumes/shadcnui/resume-card.tsx"
```

```tsx showLineNumbers
<InteractiveResumeCard />
```

## Component Details

- **Category**: resumes


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { InteractiveResumeCard } from "@uitripled/react-shadcn/src/components/components/resumes/shadcnui/resume-card.tsx"

export function BasicExample() {
  return (
    <InteractiveResumeCard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Interactive Timeline

**Page:** [https://ui.tripled.work/components/interactive-timeline-shadcnui](https://ui.tripled.work/components/interactive-timeline-shadcnui)

```tsx
"use client"

import * as React from "react"

import { InteractiveTimeline } from "@uitripled/react-shadcn/src/components/motion-core/interactive-timeline.tsx"

export function InteractiveTimelineDemo() {
  return (
    <InteractiveTimeline />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/interactive-timeline-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Interactive Timeline` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="interactive-timeline-shadcnui" title="@uitripled/react-shadcn/src/components/motion-core/interactive-timeline.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { InteractiveTimeline } from "@uitripled/react-shadcn/src/components/motion-core/interactive-timeline.tsx"
```

```tsx showLineNumbers
<InteractiveTimeline />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { InteractiveTimeline } from "@uitripled/react-shadcn/src/components/motion-core/interactive-timeline.tsx"

export function BasicExample() {
  return (
    <InteractiveTimeline />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Mac Searchbar

**Page:** [https://ui.tripled.work/components/mac-searchbar-shadcnui](https://ui.tripled.work/components/mac-searchbar-shadcnui)

```tsx
"use client"

import * as React from "react"

import { MacSearchbar } from "@uitripled/react-shadcn/src/components/search/mac-searchbar.tsx"

export function MacSearchbarDemo() {
  return (
    <MacSearchbar />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/mac-searchbar-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Mac Searchbar` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="mac-searchbar-shadcnui" title="@uitripled/react-shadcn/src/components/search/mac-searchbar.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { MacSearchbar } from "@uitripled/react-shadcn/src/components/search/mac-searchbar.tsx"
```

```tsx showLineNumbers
<MacSearchbar />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { MacSearchbar } from "@uitripled/react-shadcn/src/components/search/mac-searchbar.tsx"

export function BasicExample() {
  return (
    <MacSearchbar />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Magnetic Avatar Group

**Page:** [https://ui.tripled.work/components/magnetic-avatar-group-shadcnui](https://ui.tripled.work/components/magnetic-avatar-group-shadcnui)

```tsx
"use client"

import * as React from "react"

import { MagneticAvatarGroup } from "@uitripled/react-shadcn/src/components/motion-core/magnetic-avatar-group.tsx"

export function MagneticAvatarGroupDemo() {
  return (
    <MagneticAvatarGroup />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/magnetic-avatar-group-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Magnetic Avatar Group` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="magnetic-avatar-group-shadcnui" title="@uitripled/react-shadcn/src/components/motion-core/magnetic-avatar-group.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { MagneticAvatarGroup } from "@uitripled/react-shadcn/src/components/motion-core/magnetic-avatar-group.tsx"
```

```tsx showLineNumbers
<MagneticAvatarGroup />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { MagneticAvatarGroup } from "@uitripled/react-shadcn/src/components/motion-core/magnetic-avatar-group.tsx"

export function BasicExample() {
  return (
    <MagneticAvatarGroup />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Messenger

**Page:** [https://ui.tripled.work/components/messenger-shadcnui](https://ui.tripled.work/components/messenger-shadcnui)

```tsx
"use client"

import * as React from "react"

import { Messenger } from "@uitripled/react-shadcn/src/components/components/chat/messenger.tsx"

export function MessengerDemo() {
  return (
    <Messenger />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/messenger-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Messenger` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="messenger-shadcnui" title="@uitripled/react-shadcn/src/components/components/chat/messenger.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { Messenger } from "@uitripled/react-shadcn/src/components/components/chat/messenger.tsx"
```

```tsx showLineNumbers
<Messenger />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { Messenger } from "@uitripled/react-shadcn/src/components/components/chat/messenger.tsx"

export function BasicExample() {
  return (
    <Messenger />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Minimal Resume

**Page:** [https://ui.tripled.work/components/minimal-resume-baseui](https://ui.tripled.work/components/minimal-resume-baseui)

```tsx
"use client"

import * as React from "react"

import { MinimalResume } from "@uitripled/react-baseui/src/components/resumes/baseui/minimal-resume-baseui.tsx"

export function MinimalResumeDemo() {
  return (
    <MinimalResume />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/minimal-resume-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Minimal Resume` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="minimal-resume-baseui" title="@uitripled/react-baseui/src/components/resumes/baseui/minimal-resume-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { MinimalResume } from "@uitripled/react-baseui/src/components/resumes/baseui/minimal-resume-baseui.tsx"
```

```tsx showLineNumbers
<MinimalResume />
```

## Component Details

- **Category**: resumes


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { MinimalResume } from "@uitripled/react-baseui/src/components/resumes/baseui/minimal-resume-baseui.tsx"

export function BasicExample() {
  return (
    <MinimalResume />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Minimal Resume

**Page:** [https://ui.tripled.work/components/minimal-resume-shadcnui](https://ui.tripled.work/components/minimal-resume-shadcnui)

```tsx
"use client"

import * as React from "react"

import { MinimalResume } from "@uitripled/react-shadcn/src/components/components/resumes/shadcnui/minimal-resume.tsx"

export function MinimalResumeDemo() {
  return (
    <MinimalResume />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/minimal-resume-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="minimal-resume-shadcnui" title="@uitripled/react-shadcn/src/components/components/resumes/shadcnui/minimal-resume.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { MinimalResume } from "@uitripled/react-shadcn/src/components/components/resumes/shadcnui/minimal-resume.tsx"
```

```tsx showLineNumbers
<MinimalResume />
```

## Component Details

- **Category**: resumes


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { MinimalResume } from "@uitripled/react-shadcn/src/components/components/resumes/shadcnui/minimal-resume.tsx"

export function BasicExample() {
  return (
    <MinimalResume />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Multiple Accounts Switcher

**Page:** [https://ui.tripled.work/components/multiple-accounts-shadcnui](https://ui.tripled.work/components/multiple-accounts-shadcnui)

```tsx
"use client"

import * as React from "react"

import { MultipleAccountsSwitcher } from "@uitripled/react-shadcn/src/components/components/account-switcher/multiple-accounts.tsx"

export function MultipleAccountsSwitcherDemo() {
  return (
    <MultipleAccountsSwitcher />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/multiple-accounts-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Multiple Accounts Switcher` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="multiple-accounts-shadcnui" title="@uitripled/react-shadcn/src/components/components/account-switcher/multiple-accounts.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { MultipleAccountsSwitcher } from "@uitripled/react-shadcn/src/components/components/account-switcher/multiple-accounts.tsx"
```

```tsx showLineNumbers
<MultipleAccountsSwitcher />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { MultipleAccountsSwitcher } from "@uitripled/react-shadcn/src/components/components/account-switcher/multiple-accounts.tsx"

export function BasicExample() {
  return (
    <MultipleAccountsSwitcher />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Native Action Dropdown

**Page:** [https://ui.tripled.work/components/native-action-dropdown-baseui](https://ui.tripled.work/components/native-action-dropdown-baseui)

```tsx
"use client"

import * as React from "react"

import { NativeActionDropdown } from "@uitripled/react-baseui/src/components/native/native-action-dropdown-baseui.tsx"

export function NativeActionDropdownDemo() {
  return (
    <NativeActionDropdown />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-action-dropdown-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Native Action Dropdown` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-action-dropdown-baseui" title="@uitripled/react-baseui/src/components/native/native-action-dropdown-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeActionDropdown } from "@uitripled/react-baseui/src/components/native/native-action-dropdown-baseui.tsx"
```

```tsx showLineNumbers
<NativeActionDropdown />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeActionDropdown } from "@uitripled/react-baseui/src/components/native/native-action-dropdown-baseui.tsx"

export function BasicExample() {
  return (
    <NativeActionDropdown />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Native Action Dropdown

**Page:** [https://ui.tripled.work/components/native-action-dropdown-shadcnui](https://ui.tripled.work/components/native-action-dropdown-shadcnui)

```tsx
"use client"

import * as React from "react"

import { NativeActionDropdown } from "@uitripled/react-shadcn/src/components/native/native-action-dropdown-shadcnui.tsx"

export function NativeActionDropdownDemo() {
  return (
    <NativeActionDropdown />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-action-dropdown-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-action-dropdown-shadcnui" title="@uitripled/react-shadcn/src/components/native/native-action-dropdown-shadcnui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeActionDropdown } from "@uitripled/react-shadcn/src/components/native/native-action-dropdown-shadcnui.tsx"
```

```tsx showLineNumbers
<NativeActionDropdown />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeActionDropdown } from "@uitripled/react-shadcn/src/components/native/native-action-dropdown-shadcnui.tsx"

export function BasicExample() {
  return (
    <NativeActionDropdown />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Native Avatar Expand

**Page:** [https://ui.tripled.work/components/native-avatar-expand-baseui](https://ui.tripled.work/components/native-avatar-expand-baseui)

```tsx
"use client"

import * as React from "react"

import { NativeAvatarExpand } from "@uitripled/react-baseui/src/components/native/native-avatar-expand-baseui.tsx"

export function NativeAvatarExpandDemo() {
  return (
    <NativeAvatarExpand />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-avatar-expand-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Native Avatar Expand` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-avatar-expand-baseui" title="@uitripled/react-baseui/src/components/native/native-avatar-expand-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeAvatarExpand } from "@uitripled/react-baseui/src/components/native/native-avatar-expand-baseui.tsx"
```

```tsx showLineNumbers
<NativeAvatarExpand />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeAvatarExpand } from "@uitripled/react-baseui/src/components/native/native-avatar-expand-baseui.tsx"

export function BasicExample() {
  return (
    <NativeAvatarExpand />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Native Avatar Expand

**Page:** [https://ui.tripled.work/components/native-avatar-expand-shadcnui](https://ui.tripled.work/components/native-avatar-expand-shadcnui)

```tsx
"use client"

import * as React from "react"

import { NativeAvatarExpand } from "@uitripled/react-shadcn/src/components/native/native-avatar-expand-shadcnui.tsx"

export function NativeAvatarExpandDemo() {
  return (
    <NativeAvatarExpand />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-avatar-expand-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-avatar-expand-shadcnui" title="@uitripled/react-shadcn/src/components/native/native-avatar-expand-shadcnui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeAvatarExpand } from "@uitripled/react-shadcn/src/components/native/native-avatar-expand-shadcnui.tsx"
```

```tsx showLineNumbers
<NativeAvatarExpand />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeAvatarExpand } from "@uitripled/react-shadcn/src/components/native/native-avatar-expand-shadcnui.tsx"

export function BasicExample() {
  return (
    <NativeAvatarExpand />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Native Avatar With Name

**Page:** [https://ui.tripled.work/components/native-avatar-with-name-baseui](https://ui.tripled.work/components/native-avatar-with-name-baseui)

```tsx
"use client"

import * as React from "react"

import { NativeAvatarWithName } from "@uitripled/react-baseui/src/components/native/native-avatar-with-name-baseui.tsx"

export function NativeAvatarWithNameDemo() {
  return (
    <NativeAvatarWithName />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-avatar-with-name-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Native Avatar With Name` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-avatar-with-name-baseui" title="@uitripled/react-baseui/src/components/native/native-avatar-with-name-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeAvatarWithName } from "@uitripled/react-baseui/src/components/native/native-avatar-with-name-baseui.tsx"
```

```tsx showLineNumbers
<NativeAvatarWithName />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeAvatarWithName } from "@uitripled/react-baseui/src/components/native/native-avatar-with-name-baseui.tsx"

export function BasicExample() {
  return (
    <NativeAvatarWithName />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Native Avatar With Name

**Page:** [https://ui.tripled.work/components/native-avatar-with-name-shadcnui](https://ui.tripled.work/components/native-avatar-with-name-shadcnui)

```tsx
"use client"

import * as React from "react"

import { NativeAvatarWithName } from "@uitripled/react-shadcn/src/components/native/native-avatar-with-name-shadcnui.tsx"

export function NativeAvatarWithNameDemo() {
  return (
    <NativeAvatarWithName />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-avatar-with-name-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-avatar-with-name-shadcnui" title="@uitripled/react-shadcn/src/components/native/native-avatar-with-name-shadcnui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeAvatarWithName } from "@uitripled/react-shadcn/src/components/native/native-avatar-with-name-shadcnui.tsx"
```

```tsx showLineNumbers
<NativeAvatarWithName />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeAvatarWithName } from "@uitripled/react-shadcn/src/components/native/native-avatar-with-name-shadcnui.tsx"

export function BasicExample() {
  return (
    <NativeAvatarWithName />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Native Badge

**Page:** [https://ui.tripled.work/components/native-badge](https://ui.tripled.work/components/native-badge)

```tsx
"use client"

import * as React from "react"

import { NativeBadge } from "@uitripled/react-carbon/src/components/native/native-badge-carbon.tsx"

export function NativeBadgeDemo() {
  return (
    <NativeBadge />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-badge
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-badge" title="@uitripled/react-carbon/src/components/native/native-badge-carbon.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeBadge } from "@uitripled/react-carbon/src/components/native/native-badge-carbon.tsx"
```

```tsx showLineNumbers
<NativeBadge />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeBadge } from "@uitripled/react-carbon/src/components/native/native-badge-carbon.tsx"

export function BasicExample() {
  return (
    <NativeBadge />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Native Badge

**Page:** [https://ui.tripled.work/components/native-badge-carbon](https://ui.tripled.work/components/native-badge-carbon)

```tsx
"use client"

import * as React from "react"

import { NativeBadge } from "@uitripled/react-carbon/src/components/native/native-badge-carbon.tsx"

export function NativeBadgeDemo() {
  return (
    <NativeBadge />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-badge-carbon
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-badge-carbon" title="@uitripled/react-carbon/src/components/native/native-badge-carbon.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeBadge } from "@uitripled/react-carbon/src/components/native/native-badge-carbon.tsx"
```

```tsx showLineNumbers
<NativeBadge />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeBadge } from "@uitripled/react-carbon/src/components/native/native-badge-carbon.tsx"

export function BasicExample() {
  return (
    <NativeBadge />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Native Button

**Page:** [https://ui.tripled.work/components/native-button-baseui](https://ui.tripled.work/components/native-button-baseui)

```tsx
"use client"

import * as React from "react"

import { NativeButton } from "@uitripled/react-baseui/src/components/native/native-button-baseui.tsx"

export function NativeButtonDemo() {
  return (
    <NativeButton />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-button-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Native Button` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-button-baseui" title="@uitripled/react-baseui/src/components/native/native-button-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeButton } from "@uitripled/react-baseui/src/components/native/native-button-baseui.tsx"
```

```tsx showLineNumbers
<NativeButton />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeButton } from "@uitripled/react-baseui/src/components/native/native-button-baseui.tsx"

export function BasicExample() {
  return (
    <NativeButton />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Native Button

**Page:** [https://ui.tripled.work/components/native-button-shadcnui](https://ui.tripled.work/components/native-button-shadcnui)

```tsx
"use client"

import * as React from "react"

import { NativeButton } from "@uitripled/react-shadcn/src/components/native/native-button-shadcnui.tsx"

export function NativeButtonDemo() {
  return (
    <NativeButton />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-button-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-button-shadcnui" title="@uitripled/react-shadcn/src/components/native/native-button-shadcnui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeButton } from "@uitripled/react-shadcn/src/components/native/native-button-shadcnui.tsx"
```

```tsx showLineNumbers
<NativeButton />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeButton } from "@uitripled/react-shadcn/src/components/native/native-button-shadcnui.tsx"

export function BasicExample() {
  return (
    <NativeButton />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Native Counter Up

**Page:** [https://ui.tripled.work/components/native-counter-up](https://ui.tripled.work/components/native-counter-up)

```tsx
"use client"

import * as React from "react"

import { NativeCounterUp } from "@uitripled/react-carbon/src/components/native/native-counter-up-carbon.tsx"

export function NativeCounterUpDemo() {
  return (
    <NativeCounterUp />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-counter-up
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-counter-up" title="@uitripled/react-carbon/src/components/native/native-counter-up-carbon.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeCounterUp } from "@uitripled/react-carbon/src/components/native/native-counter-up-carbon.tsx"
```

```tsx showLineNumbers
<NativeCounterUp />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeCounterUp } from "@uitripled/react-carbon/src/components/native/native-counter-up-carbon.tsx"

export function BasicExample() {
  return (
    <NativeCounterUp />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Native Counter Up

**Page:** [https://ui.tripled.work/components/native-counter-up-carbon](https://ui.tripled.work/components/native-counter-up-carbon)

```tsx
"use client"

import * as React from "react"

import { NativeCounterUp } from "@uitripled/react-carbon/src/components/native/native-counter-up-carbon.tsx"

export function NativeCounterUpDemo() {
  return (
    <NativeCounterUp />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-counter-up-carbon
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-counter-up-carbon" title="@uitripled/react-carbon/src/components/native/native-counter-up-carbon.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeCounterUp } from "@uitripled/react-carbon/src/components/native/native-counter-up-carbon.tsx"
```

```tsx showLineNumbers
<NativeCounterUp />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeCounterUp } from "@uitripled/react-carbon/src/components/native/native-counter-up-carbon.tsx"

export function BasicExample() {
  return (
    <NativeCounterUp />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Native Delete

**Page:** [https://ui.tripled.work/components/native-delete-baseui](https://ui.tripled.work/components/native-delete-baseui)

```tsx
"use client"

import * as React from "react"

import { NativeDelete } from "@uitripled/react-baseui/src/components/native/native-delete-baseui.tsx"

export function NativeDeleteDemo() {
  return (
    <NativeDelete />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-delete-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Native Delete` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-delete-baseui" title="@uitripled/react-baseui/src/components/native/native-delete-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeDelete } from "@uitripled/react-baseui/src/components/native/native-delete-baseui.tsx"
```

```tsx showLineNumbers
<NativeDelete />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeDelete } from "@uitripled/react-baseui/src/components/native/native-delete-baseui.tsx"

export function BasicExample() {
  return (
    <NativeDelete />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Native Delete

**Page:** [https://ui.tripled.work/components/native-delete-shadcnui](https://ui.tripled.work/components/native-delete-shadcnui)

```tsx
"use client"

import * as React from "react"

import { NativeDelete } from "@uitripled/react-shadcn/src/components/native/native-delete-shadcnui.tsx"

export function NativeDeleteDemo() {
  return (
    <NativeDelete />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-delete-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-delete-shadcnui" title="@uitripled/react-shadcn/src/components/native/native-delete-shadcnui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeDelete } from "@uitripled/react-shadcn/src/components/native/native-delete-shadcnui.tsx"
```

```tsx showLineNumbers
<NativeDelete />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeDelete } from "@uitripled/react-shadcn/src/components/native/native-delete-shadcnui.tsx"

export function BasicExample() {
  return (
    <NativeDelete />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Native Dialog

**Page:** [https://ui.tripled.work/components/native-dialog-baseui](https://ui.tripled.work/components/native-dialog-baseui)

```tsx
"use client"

import * as React from "react"

import { NativeDialog } from "@uitripled/react-baseui/src/components/native/native-dialog-baseui.tsx"

export function NativeDialogDemo() {
  return (
    <NativeDialog />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-dialog-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Native Dialog` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-dialog-baseui" title="@uitripled/react-baseui/src/components/native/native-dialog-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeDialog } from "@uitripled/react-baseui/src/components/native/native-dialog-baseui.tsx"
```

```tsx showLineNumbers
<NativeDialog />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeDialog } from "@uitripled/react-baseui/src/components/native/native-dialog-baseui.tsx"

export function BasicExample() {
  return (
    <NativeDialog />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Native Dialog

**Page:** [https://ui.tripled.work/components/native-dialog-shadcnui](https://ui.tripled.work/components/native-dialog-shadcnui)

```tsx
"use client"

import * as React from "react"

import { NativeDialog } from "@uitripled/react-shadcn/src/components/native/native-dialog-shadcnui.tsx"

export function NativeDialogDemo() {
  return (
    <NativeDialog />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-dialog-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-dialog-shadcnui" title="@uitripled/react-shadcn/src/components/native/native-dialog-shadcnui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeDialog } from "@uitripled/react-shadcn/src/components/native/native-dialog-shadcnui.tsx"
```

```tsx showLineNumbers
<NativeDialog />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeDialog } from "@uitripled/react-shadcn/src/components/native/native-dialog-shadcnui.tsx"

export function BasicExample() {
  return (
    <NativeDialog />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Native Flip Text

**Page:** [https://ui.tripled.work/components/native-flip-text](https://ui.tripled.work/components/native-flip-text)

```tsx
"use client"

import * as React from "react"

import { NativeFlipText } from "@uitripled/react-carbon/src/components/native/native-flip-text-carbon.tsx"

export function NativeFlipTextDemo() {
  return (
    <NativeFlipText />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-flip-text
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-flip-text" title="@uitripled/react-carbon/src/components/native/native-flip-text-carbon.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeFlipText } from "@uitripled/react-carbon/src/components/native/native-flip-text-carbon.tsx"
```

```tsx showLineNumbers
<NativeFlipText />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeFlipText } from "@uitripled/react-carbon/src/components/native/native-flip-text-carbon.tsx"

export function BasicExample() {
  return (
    <NativeFlipText />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Native Flip Text

**Page:** [https://ui.tripled.work/components/native-flip-text-baseui](https://ui.tripled.work/components/native-flip-text-baseui)

```tsx
"use client"

import * as React from "react"

import { NativeFlipText } from "@uitripled/react-baseui/src/components/native/native-flip-text-baseui.tsx"

export function NativeFlipTextDemo() {
  return (
    <NativeFlipText />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-flip-text-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Native Flip Text` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-flip-text-baseui" title="@uitripled/react-baseui/src/components/native/native-flip-text-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeFlipText } from "@uitripled/react-baseui/src/components/native/native-flip-text-baseui.tsx"
```

```tsx showLineNumbers
<NativeFlipText />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeFlipText } from "@uitripled/react-baseui/src/components/native/native-flip-text-baseui.tsx"

export function BasicExample() {
  return (
    <NativeFlipText />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Native Flip Text

**Page:** [https://ui.tripled.work/components/native-flip-text-carbon](https://ui.tripled.work/components/native-flip-text-carbon)

```tsx
"use client"

import * as React from "react"

import { NativeFlipText } from "@uitripled/react-carbon/src/components/native/native-flip-text-carbon.tsx"

export function NativeFlipTextDemo() {
  return (
    <NativeFlipText />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-flip-text-carbon
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-flip-text-carbon" title="@uitripled/react-carbon/src/components/native/native-flip-text-carbon.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeFlipText } from "@uitripled/react-carbon/src/components/native/native-flip-text-carbon.tsx"
```

```tsx showLineNumbers
<NativeFlipText />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeFlipText } from "@uitripled/react-carbon/src/components/native/native-flip-text-carbon.tsx"

export function BasicExample() {
  return (
    <NativeFlipText />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Native Flip Text

**Page:** [https://ui.tripled.work/components/native-flip-text-shadcnui](https://ui.tripled.work/components/native-flip-text-shadcnui)

```tsx
"use client"

import * as React from "react"

import { NativeFlipText } from "@uitripled/react-carbon/src/components/native/native-flip-text-carbon.tsx"

export function NativeFlipTextDemo() {
  return (
    <NativeFlipText />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-flip-text-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-flip-text-shadcnui" title="@uitripled/react-carbon/src/components/native/native-flip-text-carbon.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeFlipText } from "@uitripled/react-carbon/src/components/native/native-flip-text-carbon.tsx"
```

```tsx showLineNumbers
<NativeFlipText />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeFlipText } from "@uitripled/react-carbon/src/components/native/native-flip-text-carbon.tsx"

export function BasicExample() {
  return (
    <NativeFlipText />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Native Follow Cursor

**Page:** [https://ui.tripled.work/components/native-follow-cursor](https://ui.tripled.work/components/native-follow-cursor)

```tsx
"use client"

import * as React from "react"

import { NativeFollowCursor } from "@uitripled/react-carbon/src/components/native/native-follow-cursor-carbon.tsx"

export function NativeFollowCursorDemo() {
  return (
    <NativeFollowCursor />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-follow-cursor
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-follow-cursor" title="@uitripled/react-carbon/src/components/native/native-follow-cursor-carbon.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeFollowCursor } from "@uitripled/react-carbon/src/components/native/native-follow-cursor-carbon.tsx"
```

```tsx showLineNumbers
<NativeFollowCursor />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeFollowCursor } from "@uitripled/react-carbon/src/components/native/native-follow-cursor-carbon.tsx"

export function BasicExample() {
  return (
    <NativeFollowCursor />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Native Follow Cursor

**Page:** [https://ui.tripled.work/components/native-follow-cursor-carbon](https://ui.tripled.work/components/native-follow-cursor-carbon)

```tsx
"use client"

import * as React from "react"

import { NativeFollowCursor } from "@uitripled/react-carbon/src/components/native/native-follow-cursor-carbon.tsx"

export function NativeFollowCursorDemo() {
  return (
    <NativeFollowCursor />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-follow-cursor-carbon
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-follow-cursor-carbon" title="@uitripled/react-carbon/src/components/native/native-follow-cursor-carbon.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeFollowCursor } from "@uitripled/react-carbon/src/components/native/native-follow-cursor-carbon.tsx"
```

```tsx showLineNumbers
<NativeFollowCursor />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeFollowCursor } from "@uitripled/react-carbon/src/components/native/native-follow-cursor-carbon.tsx"

export function BasicExample() {
  return (
    <NativeFollowCursor />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Native Hover Card

**Page:** [https://ui.tripled.work/components/native-hover-card-baseui](https://ui.tripled.work/components/native-hover-card-baseui)

```tsx
"use client"

import * as React from "react"

import { NativeHoverCard } from "@uitripled/react-baseui/src/components/native/native-hover-card-baseui.tsx"

export function NativeHoverCardDemo() {
  return (
    <NativeHoverCard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-hover-card-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Native Hover Card` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-hover-card-baseui" title="@uitripled/react-baseui/src/components/native/native-hover-card-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeHoverCard } from "@uitripled/react-baseui/src/components/native/native-hover-card-baseui.tsx"
```

```tsx showLineNumbers
<NativeHoverCard />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeHoverCard } from "@uitripled/react-baseui/src/components/native/native-hover-card-baseui.tsx"

export function BasicExample() {
  return (
    <NativeHoverCard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Native Hover Card

**Page:** [https://ui.tripled.work/components/native-hover-card-shadcnui](https://ui.tripled.work/components/native-hover-card-shadcnui)

```tsx
"use client"

import * as React from "react"

import { NativeHoverCard } from "@uitripled/react-shadcn/src/components/native/native-hover-card-shadcnui.tsx"

export function NativeHoverCardDemo() {
  return (
    <NativeHoverCard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-hover-card-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-hover-card-shadcnui" title="@uitripled/react-shadcn/src/components/native/native-hover-card-shadcnui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeHoverCard } from "@uitripled/react-shadcn/src/components/native/native-hover-card-shadcnui.tsx"
```

```tsx showLineNumbers
<NativeHoverCard />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeHoverCard } from "@uitripled/react-shadcn/src/components/native/native-hover-card-shadcnui.tsx"

export function BasicExample() {
  return (
    <NativeHoverCard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Native Image Checkbox

**Page:** [https://ui.tripled.work/components/native-image-checkbox-baseui](https://ui.tripled.work/components/native-image-checkbox-baseui)

```tsx
"use client"

import * as React from "react"

import { NativeImageCheckbox } from "@uitripled/react-baseui/src/components/native/native-image-checkbox-baseui.tsx"

export function NativeImageCheckboxDemo() {
  return (
    <NativeImageCheckbox />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-image-checkbox-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Native Image Checkbox` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-image-checkbox-baseui" title="@uitripled/react-baseui/src/components/native/native-image-checkbox-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeImageCheckbox } from "@uitripled/react-baseui/src/components/native/native-image-checkbox-baseui.tsx"
```

```tsx showLineNumbers
<NativeImageCheckbox />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeImageCheckbox } from "@uitripled/react-baseui/src/components/native/native-image-checkbox-baseui.tsx"

export function BasicExample() {
  return (
    <NativeImageCheckbox />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Native Image Checkbox

**Page:** [https://ui.tripled.work/components/native-image-checkbox-carbon](https://ui.tripled.work/components/native-image-checkbox-carbon)

```tsx
"use client"

import * as React from "react"

import { NativeImageCheckbox } from "@uitripled/react-carbon/src/components/native/native-image-checkbox-carbon.tsx"

export function NativeImageCheckboxDemo() {
  return (
    <NativeImageCheckbox />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-image-checkbox-carbon
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-image-checkbox-carbon" title="@uitripled/react-carbon/src/components/native/native-image-checkbox-carbon.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeImageCheckbox } from "@uitripled/react-carbon/src/components/native/native-image-checkbox-carbon.tsx"
```

```tsx showLineNumbers
<NativeImageCheckbox />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeImageCheckbox } from "@uitripled/react-carbon/src/components/native/native-image-checkbox-carbon.tsx"

export function BasicExample() {
  return (
    <NativeImageCheckbox />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Native Image Checkbox

**Page:** [https://ui.tripled.work/components/native-image-checkbox-shadcnui](https://ui.tripled.work/components/native-image-checkbox-shadcnui)

```tsx
"use client"

import * as React from "react"

import { NativeImageCheckbox } from "@uitripled/react-shadcn/src/components/native/native-image-checkbox-shadcnui.tsx"

export function NativeImageCheckboxDemo() {
  return (
    <NativeImageCheckbox />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-image-checkbox-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-image-checkbox-shadcnui" title="@uitripled/react-shadcn/src/components/native/native-image-checkbox-shadcnui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeImageCheckbox } from "@uitripled/react-shadcn/src/components/native/native-image-checkbox-shadcnui.tsx"
```

```tsx showLineNumbers
<NativeImageCheckbox />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeImageCheckbox } from "@uitripled/react-shadcn/src/components/native/native-image-checkbox-shadcnui.tsx"

export function BasicExample() {
  return (
    <NativeImageCheckbox />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Native Likes Counter

**Page:** [https://ui.tripled.work/components/native-likes-counter-baseui](https://ui.tripled.work/components/native-likes-counter-baseui)

```tsx
"use client"

import * as React from "react"

import { NativeLikesCounter } from "@uitripled/react-baseui/src/components/native/native-likes-counter-baseui.tsx"

export function NativeLikesCounterDemo() {
  return (
    <NativeLikesCounter />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-likes-counter-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Native Likes Counter` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-likes-counter-baseui" title="@uitripled/react-baseui/src/components/native/native-likes-counter-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeLikesCounter } from "@uitripled/react-baseui/src/components/native/native-likes-counter-baseui.tsx"
```

```tsx showLineNumbers
<NativeLikesCounter />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeLikesCounter } from "@uitripled/react-baseui/src/components/native/native-likes-counter-baseui.tsx"

export function BasicExample() {
  return (
    <NativeLikesCounter />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Native Likes Counter

**Page:** [https://ui.tripled.work/components/native-likes-counter-shadcnui](https://ui.tripled.work/components/native-likes-counter-shadcnui)

```tsx
"use client"

import * as React from "react"

import { NativeLikesCounter } from "@uitripled/react-shadcn/src/components/native/native-likes-counter-shadcnui.tsx"

export function NativeLikesCounterDemo() {
  return (
    <NativeLikesCounter />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-likes-counter-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-likes-counter-shadcnui" title="@uitripled/react-shadcn/src/components/native/native-likes-counter-shadcnui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeLikesCounter } from "@uitripled/react-shadcn/src/components/native/native-likes-counter-shadcnui.tsx"
```

```tsx showLineNumbers
<NativeLikesCounter />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeLikesCounter } from "@uitripled/react-shadcn/src/components/native/native-likes-counter-shadcnui.tsx"

export function BasicExample() {
  return (
    <NativeLikesCounter />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Native Liquid Button

**Page:** [https://ui.tripled.work/components/native-liquid-button-baseui](https://ui.tripled.work/components/native-liquid-button-baseui)

```tsx
"use client"

import * as React from "react"

import { NativeLiquidButton } from "@uitripled/react-baseui/src/components/native/native-liquid-button-baseui.tsx"

export function NativeLiquidButtonDemo() {
  return (
    <NativeLiquidButton />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-liquid-button-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Native Liquid Button` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-liquid-button-baseui" title="@uitripled/react-baseui/src/components/native/native-liquid-button-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeLiquidButton } from "@uitripled/react-baseui/src/components/native/native-liquid-button-baseui.tsx"
```

```tsx showLineNumbers
<NativeLiquidButton />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeLiquidButton } from "@uitripled/react-baseui/src/components/native/native-liquid-button-baseui.tsx"

export function BasicExample() {
  return (
    <NativeLiquidButton />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Native Liquid Button

**Page:** [https://ui.tripled.work/components/native-liquid-button-shadcnui](https://ui.tripled.work/components/native-liquid-button-shadcnui)

```tsx
"use client"

import * as React from "react"

import { NativeLiquidButton } from "@uitripled/react-shadcn/src/components/native/native-liquid-button-shadcnui.tsx"

export function NativeLiquidButtonDemo() {
  return (
    <NativeLiquidButton />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-liquid-button-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-liquid-button-shadcnui" title="@uitripled/react-shadcn/src/components/native/native-liquid-button-shadcnui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeLiquidButton } from "@uitripled/react-shadcn/src/components/native/native-liquid-button-shadcnui.tsx"
```

```tsx showLineNumbers
<NativeLiquidButton />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeLiquidButton } from "@uitripled/react-shadcn/src/components/native/native-liquid-button-shadcnui.tsx"

export function BasicExample() {
  return (
    <NativeLiquidButton />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Native Magnetic

**Page:** [https://ui.tripled.work/components/native-magnetic](https://ui.tripled.work/components/native-magnetic)

```tsx
"use client"

import * as React from "react"

import { NativeMagnetic } from "@uitripled/react-carbon/src/components/native/native-magnetic-carbon.tsx"

export function NativeMagneticDemo() {
  return (
    <NativeMagnetic />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-magnetic
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-magnetic" title="@uitripled/react-carbon/src/components/native/native-magnetic-carbon.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeMagnetic } from "@uitripled/react-carbon/src/components/native/native-magnetic-carbon.tsx"
```

```tsx showLineNumbers
<NativeMagnetic />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeMagnetic } from "@uitripled/react-carbon/src/components/native/native-magnetic-carbon.tsx"

export function BasicExample() {
  return (
    <NativeMagnetic />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Native Magnetic

**Page:** [https://ui.tripled.work/components/native-magnetic-baseui](https://ui.tripled.work/components/native-magnetic-baseui)

```tsx
"use client"

import * as React from "react"

import { NativeMagnetic } from "@uitripled/react-baseui/src/components/native/native-magnetic-baseui.tsx"

export function NativeMagneticDemo() {
  return (
    <NativeMagnetic />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-magnetic-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Native Magnetic` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-magnetic-baseui" title="@uitripled/react-baseui/src/components/native/native-magnetic-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeMagnetic } from "@uitripled/react-baseui/src/components/native/native-magnetic-baseui.tsx"
```

```tsx showLineNumbers
<NativeMagnetic />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeMagnetic } from "@uitripled/react-baseui/src/components/native/native-magnetic-baseui.tsx"

export function BasicExample() {
  return (
    <NativeMagnetic />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Native Magnetic

**Page:** [https://ui.tripled.work/components/native-magnetic-carbon](https://ui.tripled.work/components/native-magnetic-carbon)

```tsx
"use client"

import * as React from "react"

import { NativeMagnetic } from "@uitripled/react-carbon/src/components/native/native-magnetic-carbon.tsx"

export function NativeMagneticDemo() {
  return (
    <NativeMagnetic />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-magnetic-carbon
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-magnetic-carbon" title="@uitripled/react-carbon/src/components/native/native-magnetic-carbon.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeMagnetic } from "@uitripled/react-carbon/src/components/native/native-magnetic-carbon.tsx"
```

```tsx showLineNumbers
<NativeMagnetic />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeMagnetic } from "@uitripled/react-carbon/src/components/native/native-magnetic-carbon.tsx"

export function BasicExample() {
  return (
    <NativeMagnetic />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Native Magnetic

**Page:** [https://ui.tripled.work/components/native-magnetic-shadcnui](https://ui.tripled.work/components/native-magnetic-shadcnui)

```tsx
"use client"

import * as React from "react"

import { NativeMagnetic } from "@uitripled/react-shadcn/src/components/native/native-magnetic-shadcnui.tsx"

export function NativeMagneticDemo() {
  return (
    <NativeMagnetic />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-magnetic-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-magnetic-shadcnui" title="@uitripled/react-shadcn/src/components/native/native-magnetic-shadcnui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeMagnetic } from "@uitripled/react-shadcn/src/components/native/native-magnetic-shadcnui.tsx"
```

```tsx showLineNumbers
<NativeMagnetic />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeMagnetic } from "@uitripled/react-shadcn/src/components/native/native-magnetic-shadcnui.tsx"

export function BasicExample() {
  return (
    <NativeMagnetic />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Native Marquee

**Page:** [https://ui.tripled.work/components/native-marquee-baseui](https://ui.tripled.work/components/native-marquee-baseui)

```tsx
"use client"

import * as React from "react"

import { NativeMarquee } from "@uitripled/react-baseui/src/components/native/native-marquee-baseui.tsx"

export function NativeMarqueeDemo() {
  return (
    <NativeMarquee />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-marquee-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Native Marquee` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-marquee-baseui" title="@uitripled/react-baseui/src/components/native/native-marquee-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeMarquee } from "@uitripled/react-baseui/src/components/native/native-marquee-baseui.tsx"
```

```tsx showLineNumbers
<NativeMarquee />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeMarquee } from "@uitripled/react-baseui/src/components/native/native-marquee-baseui.tsx"

export function BasicExample() {
  return (
    <NativeMarquee />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Native Marquee

**Page:** [https://ui.tripled.work/components/native-marquee-shadcnui](https://ui.tripled.work/components/native-marquee-shadcnui)

```tsx
"use client"

import * as React from "react"

import { NativeMarquee } from "@uitripled/react-shadcn/src/components/native/native-marquee-shadcnui.tsx"

export function NativeMarqueeDemo() {
  return (
    <NativeMarquee />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-marquee-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-marquee-shadcnui" title="@uitripled/react-shadcn/src/components/native/native-marquee-shadcnui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeMarquee } from "@uitripled/react-shadcn/src/components/native/native-marquee-shadcnui.tsx"
```

```tsx showLineNumbers
<NativeMarquee />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeMarquee } from "@uitripled/react-shadcn/src/components/native/native-marquee-shadcnui.tsx"

export function BasicExample() {
  return (
    <NativeMarquee />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Native Morphing Button

**Page:** [https://ui.tripled.work/components/native-morphing-button-baseui](https://ui.tripled.work/components/native-morphing-button-baseui)

```tsx
"use client"

import * as React from "react"

import { NativeMorphingButton } from "@uitripled/react-baseui/src/components/native/native-morphing-button-baseui.tsx"

export function NativeMorphingButtonDemo() {
  return (
    <NativeMorphingButton />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-morphing-button-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Native Morphing Button` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-morphing-button-baseui" title="@uitripled/react-baseui/src/components/native/native-morphing-button-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeMorphingButton } from "@uitripled/react-baseui/src/components/native/native-morphing-button-baseui.tsx"
```

```tsx showLineNumbers
<NativeMorphingButton />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeMorphingButton } from "@uitripled/react-baseui/src/components/native/native-morphing-button-baseui.tsx"

export function BasicExample() {
  return (
    <NativeMorphingButton />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Native Morphing Button

**Page:** [https://ui.tripled.work/components/native-morphing-button-carbon](https://ui.tripled.work/components/native-morphing-button-carbon)

```tsx
"use client"

import * as React from "react"

import { NativeMorphingButton } from "@uitripled/react-carbon/src/components/native/native-morphing-button-carbon.tsx"

export function NativeMorphingButtonDemo() {
  return (
    <NativeMorphingButton />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-morphing-button-carbon
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-morphing-button-carbon" title="@uitripled/react-carbon/src/components/native/native-morphing-button-carbon.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeMorphingButton } from "@uitripled/react-carbon/src/components/native/native-morphing-button-carbon.tsx"
```

```tsx showLineNumbers
<NativeMorphingButton />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeMorphingButton } from "@uitripled/react-carbon/src/components/native/native-morphing-button-carbon.tsx"

export function BasicExample() {
  return (
    <NativeMorphingButton />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Native Morphing Button

**Page:** [https://ui.tripled.work/components/native-morphing-button-shadcnui](https://ui.tripled.work/components/native-morphing-button-shadcnui)

```tsx
"use client"

import * as React from "react"

import { NativeMorphingButton } from "@uitripled/react-shadcn/src/components/native/native-morphing-button-shadcnui.tsx"

export function NativeMorphingButtonDemo() {
  return (
    <NativeMorphingButton />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-morphing-button-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-morphing-button-shadcnui" title="@uitripled/react-shadcn/src/components/native/native-morphing-button-shadcnui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeMorphingButton } from "@uitripled/react-shadcn/src/components/native/native-morphing-button-shadcnui.tsx"
```

```tsx showLineNumbers
<NativeMorphingButton />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeMorphingButton } from "@uitripled/react-shadcn/src/components/native/native-morphing-button-shadcnui.tsx"

export function BasicExample() {
  return (
    <NativeMorphingButton />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Native Nested List

**Page:** [https://ui.tripled.work/components/native-nested-list-baseui](https://ui.tripled.work/components/native-nested-list-baseui)

```tsx
"use client"

import * as React from "react"

import { NativeNestedList } from "@uitripled/react-baseui/src/components/native/native-nested-list-baseui.tsx"

export function NativeNestedListDemo() {
  return (
    <NativeNestedList />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-nested-list-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Native Nested List` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-nested-list-baseui" title="@uitripled/react-baseui/src/components/native/native-nested-list-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeNestedList } from "@uitripled/react-baseui/src/components/native/native-nested-list-baseui.tsx"
```

```tsx showLineNumbers
<NativeNestedList />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeNestedList } from "@uitripled/react-baseui/src/components/native/native-nested-list-baseui.tsx"

export function BasicExample() {
  return (
    <NativeNestedList />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Native Nested List

**Page:** [https://ui.tripled.work/components/native-nested-list-shadcnui](https://ui.tripled.work/components/native-nested-list-shadcnui)

```tsx
"use client"

import * as React from "react"

import { NativeNestedList } from "@uitripled/react-shadcn/src/components/native/native-nested-list-shadcnui.tsx"

export function NativeNestedListDemo() {
  return (
    <NativeNestedList />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-nested-list-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-nested-list-shadcnui" title="@uitripled/react-shadcn/src/components/native/native-nested-list-shadcnui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeNestedList } from "@uitripled/react-shadcn/src/components/native/native-nested-list-shadcnui.tsx"
```

```tsx showLineNumbers
<NativeNestedList />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeNestedList } from "@uitripled/react-shadcn/src/components/native/native-nested-list-shadcnui.tsx"

export function BasicExample() {
  return (
    <NativeNestedList />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Native Notch

**Page:** [https://ui.tripled.work/components/native-notch-baseui](https://ui.tripled.work/components/native-notch-baseui)

```tsx
"use client"

import * as React from "react"

import { NativeNotch } from "@uitripled/react-baseui/src/components/native/native-notch-baseui.tsx"

export function NativeNotchDemo() {
  return (
    <NativeNotch />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-notch-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Native Notch` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-notch-baseui" title="@uitripled/react-baseui/src/components/native/native-notch-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeNotch } from "@uitripled/react-baseui/src/components/native/native-notch-baseui.tsx"
```

```tsx showLineNumbers
<NativeNotch />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeNotch } from "@uitripled/react-baseui/src/components/native/native-notch-baseui.tsx"

export function BasicExample() {
  return (
    <NativeNotch />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Native Notch

**Page:** [https://ui.tripled.work/components/native-notch-shadcnui](https://ui.tripled.work/components/native-notch-shadcnui)

```tsx
"use client"

import * as React from "react"

import { NativeNotch } from "@uitripled/react-shadcn/src/components/native/native-notch-shadcnui.tsx"

export function NativeNotchDemo() {
  return (
    <NativeNotch />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-notch-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-notch-shadcnui" title="@uitripled/react-shadcn/src/components/native/native-notch-shadcnui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeNotch } from "@uitripled/react-shadcn/src/components/native/native-notch-shadcnui.tsx"
```

```tsx showLineNumbers
<NativeNotch />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeNotch } from "@uitripled/react-shadcn/src/components/native/native-notch-shadcnui.tsx"

export function BasicExample() {
  return (
    <NativeNotch />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Native Notification Bell

**Page:** [https://ui.tripled.work/components/native-notification-bell-baseui](https://ui.tripled.work/components/native-notification-bell-baseui)

```tsx
"use client"

import * as React from "react"

import { NativeNotificationBell } from "@uitripled/react-baseui/src/components/native/native-notification-bell-baseui.tsx"

export function NativeNotificationBellDemo() {
  return (
    <NativeNotificationBell />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-notification-bell-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Native Notification Bell` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-notification-bell-baseui" title="@uitripled/react-baseui/src/components/native/native-notification-bell-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeNotificationBell } from "@uitripled/react-baseui/src/components/native/native-notification-bell-baseui.tsx"
```

```tsx showLineNumbers
<NativeNotificationBell />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeNotificationBell } from "@uitripled/react-baseui/src/components/native/native-notification-bell-baseui.tsx"

export function BasicExample() {
  return (
    <NativeNotificationBell />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Native Notification Bell

**Page:** [https://ui.tripled.work/components/native-notification-bell-carbon](https://ui.tripled.work/components/native-notification-bell-carbon)

```tsx
"use client"

import * as React from "react"

import { NativeNotificationBell } from "@uitripled/react-carbon/src/components/native/native-notification-bell-carbon.tsx"

export function NativeNotificationBellDemo() {
  return (
    <NativeNotificationBell />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-notification-bell-carbon
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-notification-bell-carbon" title="@uitripled/react-carbon/src/components/native/native-notification-bell-carbon.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeNotificationBell } from "@uitripled/react-carbon/src/components/native/native-notification-bell-carbon.tsx"
```

```tsx showLineNumbers
<NativeNotificationBell />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeNotificationBell } from "@uitripled/react-carbon/src/components/native/native-notification-bell-carbon.tsx"

export function BasicExample() {
  return (
    <NativeNotificationBell />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Native Notification Bell

**Page:** [https://ui.tripled.work/components/native-notification-bell-shadcnui](https://ui.tripled.work/components/native-notification-bell-shadcnui)

```tsx
"use client"

import * as React from "react"

import { NativeNotificationBell } from "@uitripled/react-shadcn/src/components/native/native-notification-bell-shadcnui.tsx"

export function NativeNotificationBellDemo() {
  return (
    <NativeNotificationBell />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-notification-bell-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-notification-bell-shadcnui" title="@uitripled/react-shadcn/src/components/native/native-notification-bell-shadcnui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeNotificationBell } from "@uitripled/react-shadcn/src/components/native/native-notification-bell-shadcnui.tsx"
```

```tsx showLineNumbers
<NativeNotificationBell />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeNotificationBell } from "@uitripled/react-shadcn/src/components/native/native-notification-bell-shadcnui.tsx"

export function BasicExample() {
  return (
    <NativeNotificationBell />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Native Profile Notch

**Page:** [https://ui.tripled.work/components/native-profile-notch-baseui](https://ui.tripled.work/components/native-profile-notch-baseui)

```tsx
"use client"

import * as React from "react"

import { NativeProfileNotch } from "@uitripled/react-baseui/src/components/native/native-profile-notch-baseui.tsx"

export function NativeProfileNotchDemo() {
  return (
    <NativeProfileNotch />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-profile-notch-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Native Profile Notch` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-profile-notch-baseui" title="@uitripled/react-baseui/src/components/native/native-profile-notch-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeProfileNotch } from "@uitripled/react-baseui/src/components/native/native-profile-notch-baseui.tsx"
```

```tsx showLineNumbers
<NativeProfileNotch />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeProfileNotch } from "@uitripled/react-baseui/src/components/native/native-profile-notch-baseui.tsx"

export function BasicExample() {
  return (
    <NativeProfileNotch />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Native Profile Notch

**Page:** [https://ui.tripled.work/components/native-profile-notch-shadcnui](https://ui.tripled.work/components/native-profile-notch-shadcnui)

```tsx
"use client"

import * as React from "react"

import { NativeProfileNotch } from "@uitripled/react-shadcn/src/components/native/native-profile-notch-shadcnui.tsx"

export function NativeProfileNotchDemo() {
  return (
    <NativeProfileNotch />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-profile-notch-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-profile-notch-shadcnui" title="@uitripled/react-shadcn/src/components/native/native-profile-notch-shadcnui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeProfileNotch } from "@uitripled/react-shadcn/src/components/native/native-profile-notch-shadcnui.tsx"
```

```tsx showLineNumbers
<NativeProfileNotch />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeProfileNotch } from "@uitripled/react-shadcn/src/components/native/native-profile-notch-shadcnui.tsx"

export function BasicExample() {
  return (
    <NativeProfileNotch />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Native Start Now

**Page:** [https://ui.tripled.work/components/native-start-now-baseui](https://ui.tripled.work/components/native-start-now-baseui)

```tsx
"use client"

import * as React from "react"

import { NativeStartNow } from "@uitripled/react-baseui/src/components/native/native-start-now-baseui.tsx"

export function NativeStartNowDemo() {
  return (
    <NativeStartNow />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-start-now-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Native Start Now` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-start-now-baseui" title="@uitripled/react-baseui/src/components/native/native-start-now-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeStartNow } from "@uitripled/react-baseui/src/components/native/native-start-now-baseui.tsx"
```

```tsx showLineNumbers
<NativeStartNow />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeStartNow } from "@uitripled/react-baseui/src/components/native/native-start-now-baseui.tsx"

export function BasicExample() {
  return (
    <NativeStartNow />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Native Start Now

**Page:** [https://ui.tripled.work/components/native-start-now-shadcnui](https://ui.tripled.work/components/native-start-now-shadcnui)

```tsx
"use client"

import * as React from "react"

import { NativeStartNow } from "@uitripled/react-shadcn/src/components/native/native-start-now-shadcnui.tsx"

export function NativeStartNowDemo() {
  return (
    <NativeStartNow />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-start-now-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-start-now-shadcnui" title="@uitripled/react-shadcn/src/components/native/native-start-now-shadcnui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeStartNow } from "@uitripled/react-shadcn/src/components/native/native-start-now-shadcnui.tsx"
```

```tsx showLineNumbers
<NativeStartNow />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeStartNow } from "@uitripled/react-shadcn/src/components/native/native-start-now-shadcnui.tsx"

export function BasicExample() {
  return (
    <NativeStartNow />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Native Tabs

**Page:** [https://ui.tripled.work/components/native-tabs-baseui](https://ui.tripled.work/components/native-tabs-baseui)

```tsx
"use client"

import * as React from "react"

import { NativeTabs } from "@uitripled/react-baseui/src/components/native/native-tabs-baseui.tsx"

export function NativeTabsDemo() {
  return (
    <NativeTabs />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-tabs-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Native Tabs` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-tabs-baseui" title="@uitripled/react-baseui/src/components/native/native-tabs-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeTabs } from "@uitripled/react-baseui/src/components/native/native-tabs-baseui.tsx"
```

```tsx showLineNumbers
<NativeTabs />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeTabs } from "@uitripled/react-baseui/src/components/native/native-tabs-baseui.tsx"

export function BasicExample() {
  return (
    <NativeTabs />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Native Tabs

**Page:** [https://ui.tripled.work/components/native-tabs-carbon](https://ui.tripled.work/components/native-tabs-carbon)

```tsx
"use client"

import * as React from "react"

import { NativeTabs } from "@uitripled/react-carbon/src/components/native/native-tabs-carbon.tsx"

export function NativeTabsDemo() {
  return (
    <NativeTabs />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-tabs-carbon
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-tabs-carbon" title="@uitripled/react-carbon/src/components/native/native-tabs-carbon.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeTabs } from "@uitripled/react-carbon/src/components/native/native-tabs-carbon.tsx"
```

```tsx showLineNumbers
<NativeTabs />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeTabs } from "@uitripled/react-carbon/src/components/native/native-tabs-carbon.tsx"

export function BasicExample() {
  return (
    <NativeTabs />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Native Tabs

**Page:** [https://ui.tripled.work/components/native-tabs-shadcnui](https://ui.tripled.work/components/native-tabs-shadcnui)

```tsx
"use client"

import * as React from "react"

import { NativeTabs } from "@uitripled/react-shadcn/src/components/native/native-tabs-shadcnui.tsx"

export function NativeTabsDemo() {
  return (
    <NativeTabs />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-tabs-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-tabs-shadcnui" title="@uitripled/react-shadcn/src/components/native/native-tabs-shadcnui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeTabs } from "@uitripled/react-shadcn/src/components/native/native-tabs-shadcnui.tsx"
```

```tsx showLineNumbers
<NativeTabs />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeTabs } from "@uitripled/react-shadcn/src/components/native/native-tabs-shadcnui.tsx"

export function BasicExample() {
  return (
    <NativeTabs />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Native Tooltip

**Page:** [https://ui.tripled.work/components/native-tooltip-baseui](https://ui.tripled.work/components/native-tooltip-baseui)

```tsx
"use client"

import * as React from "react"

import { NativeTooltip } from "@uitripled/react-baseui/src/components/native/native-tooltip-baseui.tsx"

export function NativeTooltipDemo() {
  return (
    <NativeTooltip />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-tooltip-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Native Tooltip` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-tooltip-baseui" title="@uitripled/react-baseui/src/components/native/native-tooltip-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeTooltip } from "@uitripled/react-baseui/src/components/native/native-tooltip-baseui.tsx"
```

```tsx showLineNumbers
<NativeTooltip />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeTooltip } from "@uitripled/react-baseui/src/components/native/native-tooltip-baseui.tsx"

export function BasicExample() {
  return (
    <NativeTooltip />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Native Tooltip

**Page:** [https://ui.tripled.work/components/native-tooltip-shadcnui](https://ui.tripled.work/components/native-tooltip-shadcnui)

```tsx
"use client"

import * as React from "react"

import { NativeTooltip } from "@uitripled/react-shadcn/src/components/native/native-tooltip-shadcnui.tsx"

export function NativeTooltipDemo() {
  return (
    <NativeTooltip />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-tooltip-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-tooltip-shadcnui" title="@uitripled/react-shadcn/src/components/native/native-tooltip-shadcnui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeTooltip } from "@uitripled/react-shadcn/src/components/native/native-tooltip-shadcnui.tsx"
```

```tsx showLineNumbers
<NativeTooltip />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeTooltip } from "@uitripled/react-shadcn/src/components/native/native-tooltip-shadcnui.tsx"

export function BasicExample() {
  return (
    <NativeTooltip />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Native Typewriter

**Page:** [https://ui.tripled.work/components/native-typewriter](https://ui.tripled.work/components/native-typewriter)

```tsx
"use client"

import * as React from "react"

import { NativeTypewriter } from "@uitripled/react-carbon/src/components/native/native-typewriter-carbon.tsx"

export function NativeTypewriterDemo() {
  return (
    <NativeTypewriter />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-typewriter
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-typewriter" title="@uitripled/react-carbon/src/components/native/native-typewriter-carbon.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeTypewriter } from "@uitripled/react-carbon/src/components/native/native-typewriter-carbon.tsx"
```

```tsx showLineNumbers
<NativeTypewriter />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeTypewriter } from "@uitripled/react-carbon/src/components/native/native-typewriter-carbon.tsx"

export function BasicExample() {
  return (
    <NativeTypewriter />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Native Typewriter

**Page:** [https://ui.tripled.work/components/native-typewriter-baseui](https://ui.tripled.work/components/native-typewriter-baseui)

```tsx
"use client"

import * as React from "react"

import { NativeTypewriter } from "@uitripled/react-baseui/src/components/native/native-typewriter-baseui.tsx"

export function NativeTypewriterDemo() {
  return (
    <NativeTypewriter />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-typewriter-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Native Typewriter` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-typewriter-baseui" title="@uitripled/react-baseui/src/components/native/native-typewriter-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeTypewriter } from "@uitripled/react-baseui/src/components/native/native-typewriter-baseui.tsx"
```

```tsx showLineNumbers
<NativeTypewriter />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeTypewriter } from "@uitripled/react-baseui/src/components/native/native-typewriter-baseui.tsx"

export function BasicExample() {
  return (
    <NativeTypewriter />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Native Typewriter

**Page:** [https://ui.tripled.work/components/native-typewriter-shadcnui](https://ui.tripled.work/components/native-typewriter-shadcnui)

```tsx
"use client"

import * as React from "react"

import { NativeTypewriter } from "@uitripled/react-carbon/src/components/native/native-typewriter-carbon.tsx"

export function NativeTypewriterDemo() {
  return (
    <NativeTypewriter />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-typewriter-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-typewriter-shadcnui" title="@uitripled/react-carbon/src/components/native/native-typewriter-carbon.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeTypewriter } from "@uitripled/react-carbon/src/components/native/native-typewriter-carbon.tsx"
```

```tsx showLineNumbers
<NativeTypewriter />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeTypewriter } from "@uitripled/react-carbon/src/components/native/native-typewriter-carbon.tsx"

export function BasicExample() {
  return (
    <NativeTypewriter />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Native User Card

**Page:** [https://ui.tripled.work/components/native-user-card-baseui](https://ui.tripled.work/components/native-user-card-baseui)

```tsx
"use client"

import * as React from "react"

import { NativeUserCard } from "@uitripled/react-baseui/src/components/native/native-user-card-baseui.tsx"

export function NativeUserCardDemo() {
  return (
    <NativeUserCard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-user-card-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Native User Card` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-user-card-baseui" title="@uitripled/react-baseui/src/components/native/native-user-card-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeUserCard } from "@uitripled/react-baseui/src/components/native/native-user-card-baseui.tsx"
```

```tsx showLineNumbers
<NativeUserCard />
```

## Component Details

- **Category**: cards


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeUserCard } from "@uitripled/react-baseui/src/components/native/native-user-card-baseui.tsx"

export function BasicExample() {
  return (
    <NativeUserCard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Native User Card

**Page:** [https://ui.tripled.work/components/native-user-card-shadcnui](https://ui.tripled.work/components/native-user-card-shadcnui)

```tsx
"use client"

import * as React from "react"

import { NativeUserCard } from "@uitripled/react-shadcn/src/components/native/native-user-card-shadcnui.tsx"

export function NativeUserCardDemo() {
  return (
    <NativeUserCard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-user-card-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-user-card-shadcnui" title="@uitripled/react-shadcn/src/components/native/native-user-card-shadcnui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeUserCard } from "@uitripled/react-shadcn/src/components/native/native-user-card-shadcnui.tsx"
```

```tsx showLineNumbers
<NativeUserCard />
```

## Component Details

- **Category**: cards


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeUserCard } from "@uitripled/react-shadcn/src/components/native/native-user-card-shadcnui.tsx"

export function BasicExample() {
  return (
    <NativeUserCard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Native Verified Badge

**Page:** [https://ui.tripled.work/components/native-verified-badge-baseui](https://ui.tripled.work/components/native-verified-badge-baseui)

```tsx
"use client"

import * as React from "react"

import { NativeVerifiedBadge } from "@uitripled/react-baseui/src/components/native/native-verified-badge-baseui.tsx"

export function NativeVerifiedBadgeDemo() {
  return (
    <NativeVerifiedBadge />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-verified-badge-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Native Verified Badge` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-verified-badge-baseui" title="@uitripled/react-baseui/src/components/native/native-verified-badge-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeVerifiedBadge } from "@uitripled/react-baseui/src/components/native/native-verified-badge-baseui.tsx"
```

```tsx showLineNumbers
<NativeVerifiedBadge />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeVerifiedBadge } from "@uitripled/react-baseui/src/components/native/native-verified-badge-baseui.tsx"

export function BasicExample() {
  return (
    <NativeVerifiedBadge />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Native Verified Badge

**Page:** [https://ui.tripled.work/components/native-verified-badge-shadcnui](https://ui.tripled.work/components/native-verified-badge-shadcnui)

```tsx
"use client"

import * as React from "react"

import { NativeVerifiedBadge } from "@uitripled/react-shadcn/src/components/native/native-verified-badge-shadcnui.tsx"

export function NativeVerifiedBadgeDemo() {
  return (
    <NativeVerifiedBadge />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/native-verified-badge-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-verified-badge-shadcnui" title="@uitripled/react-shadcn/src/components/native/native-verified-badge-shadcnui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NativeVerifiedBadge } from "@uitripled/react-shadcn/src/components/native/native-verified-badge-shadcnui.tsx"
```

```tsx showLineNumbers
<NativeVerifiedBadge />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NativeVerifiedBadge } from "@uitripled/react-shadcn/src/components/native/native-verified-badge-shadcnui.tsx"

export function BasicExample() {
  return (
    <NativeVerifiedBadge />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### News Feed

**Page:** [https://ui.tripled.work/components/news-feed-shadcnui](https://ui.tripled.work/components/news-feed-shadcnui)

```tsx
"use client"

import * as React from "react"

import { NewsFeed } from "@uitripled/react-shadcn/src/components/components/news-feed/news-feed.tsx"

export function NewsFeedDemo() {
  return (
    <NewsFeed />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/news-feed-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `News Feed` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="news-feed-shadcnui" title="@uitripled/react-shadcn/src/components/components/news-feed/news-feed.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NewsFeed } from "@uitripled/react-shadcn/src/components/components/news-feed/news-feed.tsx"
```

```tsx showLineNumbers
<NewsFeed />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NewsFeed } from "@uitripled/react-shadcn/src/components/components/news-feed/news-feed.tsx"

export function BasicExample() {
  return (
    <NewsFeed />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Notification Center

**Page:** [https://ui.tripled.work/components/notification-center-shadcnui](https://ui.tripled.work/components/notification-center-shadcnui)

```tsx
"use client"

import * as React from "react"

import { NotificationCenter } from "@uitripled/react-shadcn/src/components/components/notifications/notification-center.tsx"

export function NotificationCenterDemo() {
  return (
    <NotificationCenter />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/notification-center-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Notification Center` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="notification-center-shadcnui" title="@uitripled/react-shadcn/src/components/components/notifications/notification-center.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NotificationCenter } from "@uitripled/react-shadcn/src/components/components/notifications/notification-center.tsx"
```

```tsx showLineNumbers
<NotificationCenter />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NotificationCenter } from "@uitripled/react-shadcn/src/components/components/notifications/notification-center.tsx"

export function BasicExample() {
  return (
    <NotificationCenter />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Password Input

**Page:** [https://ui.tripled.work/components/password-input-shadcnui](https://ui.tripled.work/components/password-input-shadcnui)

```tsx
"use client"

import * as React from "react"

import { PasswordInput } from "@uitripled/react-shadcn/src/components/inputs/password-input.tsx"

export function PasswordInputDemo() {
  return (
    <PasswordInput />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/password-input-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Password Input` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="password-input-shadcnui" title="@uitripled/react-shadcn/src/components/inputs/password-input.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { PasswordInput } from "@uitripled/react-shadcn/src/components/inputs/password-input.tsx"
```

```tsx showLineNumbers
<PasswordInput />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { PasswordInput } from "@uitripled/react-shadcn/src/components/inputs/password-input.tsx"

export function BasicExample() {
  return (
    <PasswordInput />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Professional Resume

**Page:** [https://ui.tripled.work/components/professional-resume-baseui](https://ui.tripled.work/components/professional-resume-baseui)

```tsx
"use client"

import * as React from "react"

import { ProfessionalResume } from "@uitripled/react-baseui/src/components/resumes/baseui/professional-resume-baseui.tsx"

export function ProfessionalResumeDemo() {
  return (
    <ProfessionalResume />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/professional-resume-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Professional Resume` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="professional-resume-baseui" title="@uitripled/react-baseui/src/components/resumes/baseui/professional-resume-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { ProfessionalResume } from "@uitripled/react-baseui/src/components/resumes/baseui/professional-resume-baseui.tsx"
```

```tsx showLineNumbers
<ProfessionalResume />
```

## Component Details

- **Category**: resumes


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { ProfessionalResume } from "@uitripled/react-baseui/src/components/resumes/baseui/professional-resume-baseui.tsx"

export function BasicExample() {
  return (
    <ProfessionalResume />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Professional Resume

**Page:** [https://ui.tripled.work/components/professional-resume-shadcnui](https://ui.tripled.work/components/professional-resume-shadcnui)

```tsx
"use client"

import * as React from "react"

import { ProfessionalResume } from "@uitripled/react-shadcn/src/components/components/resumes/shadcnui/professional-resume.tsx"

export function ProfessionalResumeDemo() {
  return (
    <ProfessionalResume />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/professional-resume-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="professional-resume-shadcnui" title="@uitripled/react-shadcn/src/components/components/resumes/shadcnui/professional-resume.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { ProfessionalResume } from "@uitripled/react-shadcn/src/components/components/resumes/shadcnui/professional-resume.tsx"
```

```tsx showLineNumbers
<ProfessionalResume />
```

## Component Details

- **Category**: resumes


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { ProfessionalResume } from "@uitripled/react-shadcn/src/components/components/resumes/shadcnui/professional-resume.tsx"

export function BasicExample() {
  return (
    <ProfessionalResume />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Project Card

**Page:** [https://ui.tripled.work/components/project-card-baseui](https://ui.tripled.work/components/project-card-baseui)

```tsx
"use client"

import * as React from "react"

import { ProjectCard } from "@uitripled/react-baseui/src/components/cards/baseui/project-card-baseui.tsx"

export function ProjectCardDemo() {
  return (
    <ProjectCard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/project-card-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Project Card` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="project-card-baseui" title="@uitripled/react-baseui/src/components/cards/baseui/project-card-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { ProjectCard } from "@uitripled/react-baseui/src/components/cards/baseui/project-card-baseui.tsx"
```

```tsx showLineNumbers
<ProjectCard />
```

## Component Details

- **Category**: cards


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { ProjectCard } from "@uitripled/react-baseui/src/components/cards/baseui/project-card-baseui.tsx"

export function BasicExample() {
  return (
    <ProjectCard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Project Card

**Page:** [https://ui.tripled.work/components/project-card-shadcnui](https://ui.tripled.work/components/project-card-shadcnui)

```tsx
"use client"

import * as React from "react"

import { ProjectCard } from "@uitripled/react-shadcn/src/components/components/cards/shadcnui/project-card.tsx"

export function ProjectCardDemo() {
  return (
    <ProjectCard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/project-card-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="project-card-shadcnui" title="@uitripled/react-shadcn/src/components/components/cards/shadcnui/project-card.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { ProjectCard } from "@uitripled/react-shadcn/src/components/components/cards/shadcnui/project-card.tsx"
```

```tsx showLineNumbers
<ProjectCard />
```

## Component Details

- **Category**: cards


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { ProjectCard } from "@uitripled/react-shadcn/src/components/components/cards/shadcnui/project-card.tsx"

export function BasicExample() {
  return (
    <ProjectCard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Projects Block

**Page:** [https://ui.tripled.work/components/projects-block-baseui](https://ui.tripled.work/components/projects-block-baseui)

```tsx
"use client"

import * as React from "react"

import { ProjectsBlock } from "@uitripled/react-baseui/src/components/sections/projects-block-baseui.tsx"

export function ProjectsBlockDemo() {
  return (
    <ProjectsBlock />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/projects-block-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Projects Block` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="projects-block-baseui" title="@uitripled/react-baseui/src/components/sections/projects-block-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { ProjectsBlock } from "@uitripled/react-baseui/src/components/sections/projects-block-baseui.tsx"
```

```tsx showLineNumbers
<ProjectsBlock />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { ProjectsBlock } from "@uitripled/react-baseui/src/components/sections/projects-block-baseui.tsx"

export function BasicExample() {
  return (
    <ProjectsBlock />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Projects Block

**Page:** [https://ui.tripled.work/components/projects-block-shadcnui](https://ui.tripled.work/components/projects-block-shadcnui)

```tsx
"use client"

import * as React from "react"

import { ProjectsBlock } from "@uitripled/react-shadcn/src/components/sections/projects-block.tsx"

export function ProjectsBlockDemo() {
  return (
    <ProjectsBlock />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/projects-block-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Projects Block` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="projects-block-shadcnui" title="@uitripled/react-shadcn/src/components/sections/projects-block.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { ProjectsBlock } from "@uitripled/react-shadcn/src/components/sections/projects-block.tsx"
```

```tsx showLineNumbers
<ProjectsBlock />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { ProjectsBlock } from "@uitripled/react-shadcn/src/components/sections/projects-block.tsx"

export function BasicExample() {
  return (
    <ProjectsBlock />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Simple Calendar

**Page:** [https://ui.tripled.work/components/simple-calendar-shadcnui](https://ui.tripled.work/components/simple-calendar-shadcnui)

```tsx
"use client"

import * as React from "react"

import { SimpleCalendar } from "@uitripled/react-shadcn/src/components/forms/simple-calendar.tsx"

export function SimpleCalendarDemo() {
  return (
    <SimpleCalendar />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/simple-calendar-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Simple Calendar` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="simple-calendar-shadcnui" title="@uitripled/react-shadcn/src/components/forms/simple-calendar.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { SimpleCalendar } from "@uitripled/react-shadcn/src/components/forms/simple-calendar.tsx"
```

```tsx showLineNumbers
<SimpleCalendar />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { SimpleCalendar } from "@uitripled/react-shadcn/src/components/forms/simple-calendar.tsx"

export function BasicExample() {
  return (
    <SimpleCalendar />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Smart Hover Card

**Page:** [https://ui.tripled.work/components/smart-hover-card-shadcnui](https://ui.tripled.work/components/smart-hover-card-shadcnui)

```tsx
"use client"

import * as React from "react"

import { SmartHoverCard } from "@uitripled/react-shadcn/src/components/motion-core/smart-hover-card.tsx"

export function SmartHoverCardDemo() {
  return (
    <SmartHoverCard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/smart-hover-card-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Smart Hover Card` component uses the following components. Make sure you have them installed in your project.

- button
- card

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="smart-hover-card-shadcnui" title="@uitripled/react-shadcn/src/components/motion-core/smart-hover-card.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { SmartHoverCard } from "@uitripled/react-shadcn/src/components/motion-core/smart-hover-card.tsx"
```

```tsx showLineNumbers
<SmartHoverCard />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button
- card

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { SmartHoverCard } from "@uitripled/react-shadcn/src/components/motion-core/smart-hover-card.tsx"

export function BasicExample() {
  return (
    <SmartHoverCard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)
- [card](/docs/components/card)

---

### Social Login Button

**Page:** [https://ui.tripled.work/components/social-login-button-baseui](https://ui.tripled.work/components/social-login-button-baseui)

```tsx
"use client"

import * as React from "react"

import { SocialLoginButton } from "@uitripled/react-baseui/src/components/native/social-login-button-baseui.tsx"

export function SocialLoginButtonDemo() {
  return (
    <SocialLoginButton />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/social-login-button-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Social Login Button` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="social-login-button-baseui" title="@uitripled/react-baseui/src/components/native/social-login-button-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { SocialLoginButton } from "@uitripled/react-baseui/src/components/native/social-login-button-baseui.tsx"
```

```tsx showLineNumbers
<SocialLoginButton />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { SocialLoginButton } from "@uitripled/react-baseui/src/components/native/social-login-button-baseui.tsx"

export function BasicExample() {
  return (
    <SocialLoginButton />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Social Login Button

**Page:** [https://ui.tripled.work/components/social-login-button-shadcnui](https://ui.tripled.work/components/social-login-button-shadcnui)

```tsx
"use client"

import * as React from "react"

import { SocialLoginButton } from "@uitripled/react-shadcn/src/components/native/social-login-button-shadcnui.tsx"

export function SocialLoginButtonDemo() {
  return (
    <SocialLoginButton />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/social-login-button-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="social-login-button-shadcnui" title="@uitripled/react-shadcn/src/components/native/social-login-button-shadcnui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { SocialLoginButton } from "@uitripled/react-shadcn/src/components/native/social-login-button-shadcnui.tsx"
```

```tsx showLineNumbers
<SocialLoginButton />
```

## Component Details

- **Category**: native


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { SocialLoginButton } from "@uitripled/react-shadcn/src/components/native/social-login-button-shadcnui.tsx"

export function BasicExample() {
  return (
    <SocialLoginButton />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Stacked Card Carousel

**Page:** [https://ui.tripled.work/components/stacked-card-carousel-shadcnui](https://ui.tripled.work/components/stacked-card-carousel-shadcnui)

```tsx
"use client"

import * as React from "react"

import { StackedCardCarousel } from "@uitripled/react-shadcn/src/components/motion-core/stacked-card-carousel.tsx"

export function StackedCardCarouselDemo() {
  return (
    <StackedCardCarousel />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/stacked-card-carousel-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Stacked Card Carousel` component uses the following components. Make sure you have them installed in your project.

- button
- card

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="stacked-card-carousel-shadcnui" title="@uitripled/react-shadcn/src/components/motion-core/stacked-card-carousel.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { StackedCardCarousel } from "@uitripled/react-shadcn/src/components/motion-core/stacked-card-carousel.tsx"
```

```tsx showLineNumbers
<StackedCardCarousel />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button
- card

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { StackedCardCarousel } from "@uitripled/react-shadcn/src/components/motion-core/stacked-card-carousel.tsx"

export function BasicExample() {
  return (
    <StackedCardCarousel />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)
- [card](/docs/components/card)

---

### Staggered Dropdown

**Page:** [https://ui.tripled.work/components/staggered-dropdown-shadcnui](https://ui.tripled.work/components/staggered-dropdown-shadcnui)

```tsx
"use client"

import * as React from "react"

import { StaggeredDropdown } from "@uitripled/react-shadcn/src/components/components/dropdown/staggered-items.tsx"

export function StaggeredDropdownDemo() {
  return (
    <StaggeredDropdown />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/staggered-dropdown-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Staggered Dropdown` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="staggered-dropdown-shadcnui" title="@uitripled/react-shadcn/src/components/components/dropdown/staggered-items.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { StaggeredDropdown } from "@uitripled/react-shadcn/src/components/components/dropdown/staggered-items.tsx"
```

```tsx showLineNumbers
<StaggeredDropdown />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { StaggeredDropdown } from "@uitripled/react-shadcn/src/components/components/dropdown/staggered-items.tsx"

export function BasicExample() {
  return (
    <StaggeredDropdown />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Standard Resume

**Page:** [https://ui.tripled.work/components/standard-resume-baseui](https://ui.tripled.work/components/standard-resume-baseui)

```tsx
"use client"

import * as React from "react"

import { StandardResume } from "@uitripled/react-baseui/src/components/resumes/baseui/standard-resume-baseui.tsx"

export function StandardResumeDemo() {
  return (
    <StandardResume />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/standard-resume-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Standard Resume` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="standard-resume-baseui" title="@uitripled/react-baseui/src/components/resumes/baseui/standard-resume-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { StandardResume } from "@uitripled/react-baseui/src/components/resumes/baseui/standard-resume-baseui.tsx"
```

```tsx showLineNumbers
<StandardResume />
```

## Component Details

- **Category**: resumes


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { StandardResume } from "@uitripled/react-baseui/src/components/resumes/baseui/standard-resume-baseui.tsx"

export function BasicExample() {
  return (
    <StandardResume />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Standard Resume

**Page:** [https://ui.tripled.work/components/standard-resume-shadcnui](https://ui.tripled.work/components/standard-resume-shadcnui)

```tsx
"use client"

import * as React from "react"

import { StandardResume } from "@uitripled/react-shadcn/src/components/components/resumes/shadcnui/standard-resume.tsx"

export function StandardResumeDemo() {
  return (
    <StandardResume />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/standard-resume-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="standard-resume-shadcnui" title="@uitripled/react-shadcn/src/components/components/resumes/shadcnui/standard-resume.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { StandardResume } from "@uitripled/react-shadcn/src/components/components/resumes/shadcnui/standard-resume.tsx"
```

```tsx showLineNumbers
<StandardResume />
```

## Component Details

- **Category**: resumes


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { StandardResume } from "@uitripled/react-shadcn/src/components/components/resumes/shadcnui/standard-resume.tsx"

export function BasicExample() {
  return (
    <StandardResume />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Synced Lyric Captions

**Page:** [https://ui.tripled.work/components/synced-lyric-captions-shadcnui](https://ui.tripled.work/components/synced-lyric-captions-shadcnui)

```tsx
"use client"

import * as React from "react"

import { SyncedLyricCaptions } from "@uitripled/react-shadcn/src/components/motion-core/synced-lyric-captions.tsx"

export function SyncedLyricCaptionsDemo() {
  return (
    <SyncedLyricCaptions />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/synced-lyric-captions-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Synced Lyric Captions` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="synced-lyric-captions-shadcnui" title="@uitripled/react-shadcn/src/components/motion-core/synced-lyric-captions.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { SyncedLyricCaptions } from "@uitripled/react-shadcn/src/components/motion-core/synced-lyric-captions.tsx"
```

```tsx showLineNumbers
<SyncedLyricCaptions />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { SyncedLyricCaptions } from "@uitripled/react-shadcn/src/components/motion-core/synced-lyric-captions.tsx"

export function BasicExample() {
  return (
    <SyncedLyricCaptions />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Theater Ticket

**Page:** [https://ui.tripled.work/components/theater-ticket-baseui](https://ui.tripled.work/components/theater-ticket-baseui)

```tsx
"use client"

import * as React from "react"

import { TheaterTicket } from "@uitripled/react-baseui/src/components/sections/theater-ticket-baseui.tsx"

export function TheaterTicketDemo() {
  return (
    <TheaterTicket />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/theater-ticket-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Theater Ticket` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="theater-ticket-baseui" title="@uitripled/react-baseui/src/components/sections/theater-ticket-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { TheaterTicket } from "@uitripled/react-baseui/src/components/sections/theater-ticket-baseui.tsx"
```

```tsx showLineNumbers
<TheaterTicket />
```

## Component Details

- **Category**: cards


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { TheaterTicket } from "@uitripled/react-baseui/src/components/sections/theater-ticket-baseui.tsx"

export function BasicExample() {
  return (
    <TheaterTicket />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Theater Ticket

**Page:** [https://ui.tripled.work/components/theater-ticket-shadcnui](https://ui.tripled.work/components/theater-ticket-shadcnui)

```tsx
"use client"

import * as React from "react"

import { TheaterTicket } from "@uitripled/react-shadcn/src/components/sections/theater-ticket.tsx"

export function TheaterTicketDemo() {
  return (
    <TheaterTicket />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/theater-ticket-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="theater-ticket-shadcnui" title="@uitripled/react-shadcn/src/components/sections/theater-ticket.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { TheaterTicket } from "@uitripled/react-shadcn/src/components/sections/theater-ticket.tsx"
```

```tsx showLineNumbers
<TheaterTicket />
```

## Component Details

- **Category**: cards


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { TheaterTicket } from "@uitripled/react-shadcn/src/components/sections/theater-ticket.tsx"

export function BasicExample() {
  return (
    <TheaterTicket />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Volume Component

**Page:** [https://ui.tripled.work/components/volume-component-shadcnui](https://ui.tripled.work/components/volume-component-shadcnui)

```tsx
"use client"

import * as React from "react"

import { VolumeComponent } from "@uitripled/react-shadcn/src/components/components/sliders/volume-component.tsx"

export function VolumeComponentDemo() {
  return (
    <VolumeComponent />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/volume-component-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Volume Component` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="volume-component-shadcnui" title="@uitripled/react-shadcn/src/components/components/sliders/volume-component.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { VolumeComponent } from "@uitripled/react-shadcn/src/components/components/sliders/volume-component.tsx"
```

```tsx showLineNumbers
<VolumeComponent />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { VolumeComponent } from "@uitripled/react-shadcn/src/components/components/sliders/volume-component.tsx"

export function BasicExample() {
  return (
    <VolumeComponent />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Weather Dashboard

**Page:** [https://ui.tripled.work/components/weather-dashboard-shadcnui](https://ui.tripled.work/components/weather-dashboard-shadcnui)

```tsx
"use client"

import * as React from "react"

import { WeatherDashboard } from "@uitripled/react-shadcn/src/components/components/weather/weather-dashboard.tsx"

export function WeatherDashboardDemo() {
  return (
    <WeatherDashboard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/weather-dashboard-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Weather Dashboard` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="weather-dashboard-shadcnui" title="@uitripled/react-shadcn/src/components/components/weather/weather-dashboard.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { WeatherDashboard } from "@uitripled/react-shadcn/src/components/components/weather/weather-dashboard.tsx"
```

```tsx showLineNumbers
<WeatherDashboard />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { WeatherDashboard } from "@uitripled/react-shadcn/src/components/components/weather/weather-dashboard.tsx"

export function BasicExample() {
  return (
    <WeatherDashboard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Web Performance Page

**Page:** [https://ui.tripled.work/components/web-performance-page-shadcnui](https://ui.tripled.work/components/web-performance-page-shadcnui)

```tsx
"use client"

import * as React from "react"

import { WebPerformancePage } from "@uitripled/react-shadcn/src/components/web-performance/web-performance-page.tsx"

export function WebPerformancePageDemo() {
  return (
    <WebPerformancePage />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/web-performance-page-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Web Performance Page` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="web-performance-page-shadcnui" title="@uitripled/react-shadcn/src/components/web-performance/web-performance-page.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { WebPerformancePage } from "@uitripled/react-shadcn/src/components/web-performance/web-performance-page.tsx"
```

```tsx showLineNumbers
<WebPerformancePage />
```

## Component Details

- **Category**: components


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { WebPerformancePage } from "@uitripled/react-shadcn/src/components/web-performance/web-performance-page.tsx"

export function BasicExample() {
  return (
    <WebPerformancePage />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Wizard Form

**Page:** [https://ui.tripled.work/components/wizard-form-shadcnui](https://ui.tripled.work/components/wizard-form-shadcnui)

```tsx
"use client"

import * as React from "react"

import { WizardForm } from "@uitripled/react-shadcn/src/components/forms/wizard-form.tsx"

export function WizardFormDemo() {
  return (
    <WizardForm />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/wizard-form-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="wizard-form-shadcnui" title="@uitripled/react-shadcn/src/components/forms/wizard-form.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { WizardForm } from "@uitripled/react-shadcn/src/components/forms/wizard-form.tsx"
```

```tsx showLineNumbers
<WizardForm />
```

## Component Details

- **Category**: forms


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { WizardForm } from "@uitripled/react-shadcn/src/components/forms/wizard-form.tsx"

export function BasicExample() {
  return (
    <WizardForm />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

## Blocks

### About Us

**Page:** [https://ui.tripled.work/components/about-us-section-baseui](https://ui.tripled.work/components/about-us-section-baseui)

```tsx
"use client"

import * as React from "react"

import { AboutUs } from "@uitripled/react-baseui/src/components/sections/about-us-section-baseui.tsx"

export function AboutUsDemo() {
  return (
    <AboutUs />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/about-us-section-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `About Us` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="about-us-section-baseui" title="@uitripled/react-baseui/src/components/sections/about-us-section-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { AboutUs } from "@uitripled/react-baseui/src/components/sections/about-us-section-baseui.tsx"
```

```tsx showLineNumbers
<AboutUs />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { AboutUs } from "@uitripled/react-baseui/src/components/sections/about-us-section-baseui.tsx"

export function BasicExample() {
  return (
    <AboutUs />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### About Us

**Page:** [https://ui.tripled.work/components/about-us-section-shadcnui](https://ui.tripled.work/components/about-us-section-shadcnui)

```tsx
"use client"

import * as React from "react"

import { AboutUs } from "@uitripled/react-shadcn/src/components/sections/about-us-section.tsx"

export function AboutUsDemo() {
  return (
    <AboutUs />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/about-us-section-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `About Us` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="about-us-section-shadcnui" title="@uitripled/react-shadcn/src/components/sections/about-us-section.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { AboutUs } from "@uitripled/react-shadcn/src/components/sections/about-us-section.tsx"
```

```tsx showLineNumbers
<AboutUs />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { AboutUs } from "@uitripled/react-shadcn/src/components/sections/about-us-section.tsx"

export function BasicExample() {
  return (
    <AboutUs />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Bento Grid Block

**Page:** [https://ui.tripled.work/components/bento-grid-block-baseui](https://ui.tripled.work/components/bento-grid-block-baseui)

```tsx
"use client"

import * as React from "react"

import { BentoGridBlock } from "@uitripled/react-baseui/src/components/sections/bento-grid-block-baseui.tsx"

export function BentoGridBlockDemo() {
  return (
    <BentoGridBlock />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/bento-grid-block-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Bento Grid Block` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="bento-grid-block-baseui" title="@uitripled/react-baseui/src/components/sections/bento-grid-block-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { BentoGridBlock } from "@uitripled/react-baseui/src/components/sections/bento-grid-block-baseui.tsx"
```

```tsx showLineNumbers
<BentoGridBlock />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { BentoGridBlock } from "@uitripled/react-baseui/src/components/sections/bento-grid-block-baseui.tsx"

export function BasicExample() {
  return (
    <BentoGridBlock />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Bento Grid Block

**Page:** [https://ui.tripled.work/components/bento-grid-block-shadcnui](https://ui.tripled.work/components/bento-grid-block-shadcnui)

```tsx
"use client"

import * as React from "react"

import { BentoGridBlock } from "@uitripled/react-shadcn/src/components/sections/bento-grid-block.tsx"

export function BentoGridBlockDemo() {
  return (
    <BentoGridBlock />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/bento-grid-block-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Bento Grid Block` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="bento-grid-block-shadcnui" title="@uitripled/react-shadcn/src/components/sections/bento-grid-block.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { BentoGridBlock } from "@uitripled/react-shadcn/src/components/sections/bento-grid-block.tsx"
```

```tsx showLineNumbers
<BentoGridBlock />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { BentoGridBlock } from "@uitripled/react-shadcn/src/components/sections/bento-grid-block.tsx"

export function BasicExample() {
  return (
    <BentoGridBlock />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Blog Block

**Page:** [https://ui.tripled.work/components/blog-block-baseui](https://ui.tripled.work/components/blog-block-baseui)

```tsx
"use client"

import * as React from "react"

import { BlogBlock } from "@uitripled/react-baseui/src/components/sections/blog-block-baseui.tsx"

export function BlogBlockDemo() {
  return (
    <BlogBlock />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/blog-block-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Blog Block` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="blog-block-baseui" title="@uitripled/react-baseui/src/components/sections/blog-block-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { BlogBlock } from "@uitripled/react-baseui/src/components/sections/blog-block-baseui.tsx"
```

```tsx showLineNumbers
<BlogBlock />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { BlogBlock } from "@uitripled/react-baseui/src/components/sections/blog-block-baseui.tsx"

export function BasicExample() {
  return (
    <BlogBlock />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Blog Block

**Page:** [https://ui.tripled.work/components/blog-block-shadcnui](https://ui.tripled.work/components/blog-block-shadcnui)

```tsx
"use client"

import * as React from "react"

import { BlogBlock } from "@uitripled/react-shadcn/src/components/sections/blog-block.tsx"

export function BlogBlockDemo() {
  return (
    <BlogBlock />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/blog-block-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Blog Block` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="blog-block-shadcnui" title="@uitripled/react-shadcn/src/components/sections/blog-block.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { BlogBlock } from "@uitripled/react-shadcn/src/components/sections/blog-block.tsx"
```

```tsx showLineNumbers
<BlogBlock />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { BlogBlock } from "@uitripled/react-shadcn/src/components/sections/blog-block.tsx"

export function BasicExample() {
  return (
    <BlogBlock />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Contact Block

**Page:** [https://ui.tripled.work/components/contact-block-baseui](https://ui.tripled.work/components/contact-block-baseui)

```tsx
"use client"

import * as React from "react"

import { ContactBlock } from "@uitripled/react-baseui/src/components/sections/contact-block-baseui.tsx"

export function ContactBlockDemo() {
  return (
    <ContactBlock />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/contact-block-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Contact Block` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="contact-block-baseui" title="@uitripled/react-baseui/src/components/sections/contact-block-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { ContactBlock } from "@uitripled/react-baseui/src/components/sections/contact-block-baseui.tsx"
```

```tsx showLineNumbers
<ContactBlock />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { ContactBlock } from "@uitripled/react-baseui/src/components/sections/contact-block-baseui.tsx"

export function BasicExample() {
  return (
    <ContactBlock />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Contact Block

**Page:** [https://ui.tripled.work/components/contact-block-shadcnui](https://ui.tripled.work/components/contact-block-shadcnui)

```tsx
"use client"

import * as React from "react"

import { ContactBlock } from "@uitripled/react-shadcn/src/components/sections/contact-block.tsx"

export function ContactBlockDemo() {
  return (
    <ContactBlock />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/contact-block-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Contact Block` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="contact-block-shadcnui" title="@uitripled/react-shadcn/src/components/sections/contact-block.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { ContactBlock } from "@uitripled/react-shadcn/src/components/sections/contact-block.tsx"
```

```tsx showLineNumbers
<ContactBlock />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { ContactBlock } from "@uitripled/react-shadcn/src/components/sections/contact-block.tsx"

export function BasicExample() {
  return (
    <ContactBlock />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Contact Form

**Page:** [https://ui.tripled.work/components/contact-form-section-baseui](https://ui.tripled.work/components/contact-form-section-baseui)

```tsx
"use client"

import * as React from "react"

import { ContactForm } from "@uitripled/react-baseui/src/components/sections/contact-form-section-baseui.tsx"

export function ContactFormDemo() {
  return (
    <ContactForm />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/contact-form-section-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Contact Form` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="contact-form-section-baseui" title="@uitripled/react-baseui/src/components/sections/contact-form-section-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { ContactForm } from "@uitripled/react-baseui/src/components/sections/contact-form-section-baseui.tsx"
```

```tsx showLineNumbers
<ContactForm />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { ContactForm } from "@uitripled/react-baseui/src/components/sections/contact-form-section-baseui.tsx"

export function BasicExample() {
  return (
    <ContactForm />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Contact Form

**Page:** [https://ui.tripled.work/components/contact-form-section-shadcnui](https://ui.tripled.work/components/contact-form-section-shadcnui)

```tsx
"use client"

import * as React from "react"

import { ContactForm } from "@uitripled/react-shadcn/src/components/sections/contact-form-section.tsx"

export function ContactFormDemo() {
  return (
    <ContactForm />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/contact-form-section-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Contact Form` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="contact-form-section-shadcnui" title="@uitripled/react-shadcn/src/components/sections/contact-form-section.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { ContactForm } from "@uitripled/react-shadcn/src/components/sections/contact-form-section.tsx"
```

```tsx showLineNumbers
<ContactForm />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { ContactForm } from "@uitripled/react-shadcn/src/components/sections/contact-form-section.tsx"

export function BasicExample() {
  return (
    <ContactForm />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### CTA Block

**Page:** [https://ui.tripled.work/components/cta-block-baseui](https://ui.tripled.work/components/cta-block-baseui)

```tsx
"use client"

import * as React from "react"

import { CTABlock } from "@uitripled/react-baseui/src/components/sections/cta-block-baseui.tsx"

export function CTABlockDemo() {
  return (
    <CTABlock />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/cta-block-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `CTA Block` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="cta-block-baseui" title="@uitripled/react-baseui/src/components/sections/cta-block-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { CTABlock } from "@uitripled/react-baseui/src/components/sections/cta-block-baseui.tsx"
```

```tsx showLineNumbers
<CTABlock />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { CTABlock } from "@uitripled/react-baseui/src/components/sections/cta-block-baseui.tsx"

export function BasicExample() {
  return (
    <CTABlock />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### CTA Block

**Page:** [https://ui.tripled.work/components/cta-block-shadcnui](https://ui.tripled.work/components/cta-block-shadcnui)

```tsx
"use client"

import * as React from "react"

import { CTABlock } from "@uitripled/react-shadcn/src/components/sections/cta-block.tsx"

export function CTABlockDemo() {
  return (
    <CTABlock />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/cta-block-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `CTA Block` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="cta-block-shadcnui" title="@uitripled/react-shadcn/src/components/sections/cta-block.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { CTABlock } from "@uitripled/react-shadcn/src/components/sections/cta-block.tsx"
```

```tsx showLineNumbers
<CTABlock />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { CTABlock } from "@uitripled/react-shadcn/src/components/sections/cta-block.tsx"

export function BasicExample() {
  return (
    <CTABlock />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### CTA Hero Block

**Page:** [https://ui.tripled.work/components/cta-hero-block-baseui](https://ui.tripled.work/components/cta-hero-block-baseui)

```tsx
"use client"

import * as React from "react"

import { CTAHeroBlock } from "@uitripled/react-baseui/src/components/sections/cta-hero-block-baseui.tsx"

export function CTAHeroBlockDemo() {
  return (
    <CTAHeroBlock />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/cta-hero-block-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `CTA Hero Block` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="cta-hero-block-baseui" title="@uitripled/react-baseui/src/components/sections/cta-hero-block-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { CTAHeroBlock } from "@uitripled/react-baseui/src/components/sections/cta-hero-block-baseui.tsx"
```

```tsx showLineNumbers
<CTAHeroBlock />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { CTAHeroBlock } from "@uitripled/react-baseui/src/components/sections/cta-hero-block-baseui.tsx"

export function BasicExample() {
  return (
    <CTAHeroBlock />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### CTA Hero Block

**Page:** [https://ui.tripled.work/components/cta-hero-block-shadcnui](https://ui.tripled.work/components/cta-hero-block-shadcnui)

```tsx
"use client"

import * as React from "react"

import { CTAHeroBlock } from "@uitripled/react-shadcn/src/components/sections/cta-hero-block.tsx"

export function CTAHeroBlockDemo() {
  return (
    <CTAHeroBlock />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/cta-hero-block-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `CTA Hero Block` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="cta-hero-block-shadcnui" title="@uitripled/react-shadcn/src/components/sections/cta-hero-block.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { CTAHeroBlock } from "@uitripled/react-shadcn/src/components/sections/cta-hero-block.tsx"
```

```tsx showLineNumbers
<CTAHeroBlock />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { CTAHeroBlock } from "@uitripled/react-shadcn/src/components/sections/cta-hero-block.tsx"

export function BasicExample() {
  return (
    <CTAHeroBlock />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Dashboard

**Page:** [https://ui.tripled.work/components/dashboard-baseui](https://ui.tripled.work/components/dashboard-baseui)

```tsx
"use client"

import * as React from "react"

import { Dashboard } from "@uitripled/react-baseui/src/components/components/stocks-dashboard/dashboard.tsx"

export function DashboardDemo() {
  return (
    <Dashboard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/dashboard-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Dashboard` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="dashboard-baseui" title="@uitripled/react-baseui/src/components/components/stocks-dashboard/dashboard.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { Dashboard } from "@uitripled/react-baseui/src/components/components/stocks-dashboard/dashboard.tsx"
```

```tsx showLineNumbers
<Dashboard />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { Dashboard } from "@uitripled/react-baseui/src/components/components/stocks-dashboard/dashboard.tsx"

export function BasicExample() {
  return (
    <Dashboard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Dashboard

**Page:** [https://ui.tripled.work/components/dashboard-shadcnui](https://ui.tripled.work/components/dashboard-shadcnui)

```tsx
"use client"

import * as React from "react"

import { Dashboard } from "@uitripled/react-shadcn/src/components/components/stocks-dashboard/dashboard.tsx"

export function DashboardDemo() {
  return (
    <Dashboard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/dashboard-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Dashboard` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="dashboard-shadcnui" title="@uitripled/react-shadcn/src/components/components/stocks-dashboard/dashboard.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { Dashboard } from "@uitripled/react-shadcn/src/components/components/stocks-dashboard/dashboard.tsx"
```

```tsx showLineNumbers
<Dashboard />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { Dashboard } from "@uitripled/react-shadcn/src/components/components/stocks-dashboard/dashboard.tsx"

export function BasicExample() {
  return (
    <Dashboard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### FAQ Accordion

**Page:** [https://ui.tripled.work/components/faq-accordion-block-baseui](https://ui.tripled.work/components/faq-accordion-block-baseui)

```tsx
"use client"

import * as React from "react"

import { FAQAccordion } from "@uitripled/react-baseui/src/components/sections/faq-accordion-block-baseui.tsx"

export function FAQAccordionDemo() {
  return (
    <FAQAccordion />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/faq-accordion-block-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `FAQ Accordion` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="faq-accordion-block-baseui" title="@uitripled/react-baseui/src/components/sections/faq-accordion-block-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { FAQAccordion } from "@uitripled/react-baseui/src/components/sections/faq-accordion-block-baseui.tsx"
```

```tsx showLineNumbers
<FAQAccordion />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { FAQAccordion } from "@uitripled/react-baseui/src/components/sections/faq-accordion-block-baseui.tsx"

export function BasicExample() {
  return (
    <FAQAccordion />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### FAQ Accordion

**Page:** [https://ui.tripled.work/components/faq-accordion-block-shadcnui](https://ui.tripled.work/components/faq-accordion-block-shadcnui)

```tsx
"use client"

import * as React from "react"

import { FAQAccordion } from "@uitripled/react-shadcn/src/components/sections/faq-accordion-block.tsx"

export function FAQAccordionDemo() {
  return (
    <FAQAccordion />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/faq-accordion-block-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `FAQ Accordion` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="faq-accordion-block-shadcnui" title="@uitripled/react-shadcn/src/components/sections/faq-accordion-block.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { FAQAccordion } from "@uitripled/react-shadcn/src/components/sections/faq-accordion-block.tsx"
```

```tsx showLineNumbers
<FAQAccordion />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { FAQAccordion } from "@uitripled/react-shadcn/src/components/sections/faq-accordion-block.tsx"

export function BasicExample() {
  return (
    <FAQAccordion />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Feature Cards Grid

**Page:** [https://ui.tripled.work/components/feature-cards-block-baseui](https://ui.tripled.work/components/feature-cards-block-baseui)

```tsx
"use client"

import * as React from "react"

import { FeatureCardsGrid } from "@uitripled/react-baseui/src/components/sections/feature-cards-block-baseui.tsx"

export function FeatureCardsGridDemo() {
  return (
    <FeatureCardsGrid />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/feature-cards-block-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Feature Cards Grid` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="feature-cards-block-baseui" title="@uitripled/react-baseui/src/components/sections/feature-cards-block-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { FeatureCardsGrid } from "@uitripled/react-baseui/src/components/sections/feature-cards-block-baseui.tsx"
```

```tsx showLineNumbers
<FeatureCardsGrid />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { FeatureCardsGrid } from "@uitripled/react-baseui/src/components/sections/feature-cards-block-baseui.tsx"

export function BasicExample() {
  return (
    <FeatureCardsGrid />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Feature Cards Grid

**Page:** [https://ui.tripled.work/components/feature-cards-block-shadcnui](https://ui.tripled.work/components/feature-cards-block-shadcnui)

```tsx
"use client"

import * as React from "react"

import { FeatureCardsGrid } from "@uitripled/react-shadcn/src/components/sections/feature-cards-block.tsx"

export function FeatureCardsGridDemo() {
  return (
    <FeatureCardsGrid />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/feature-cards-block-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Feature Cards Grid` component uses the following components. Make sure you have them installed in your project.

- button
- card

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="feature-cards-block-shadcnui" title="@uitripled/react-shadcn/src/components/sections/feature-cards-block.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { FeatureCardsGrid } from "@uitripled/react-shadcn/src/components/sections/feature-cards-block.tsx"
```

```tsx showLineNumbers
<FeatureCardsGrid />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button
- card

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { FeatureCardsGrid } from "@uitripled/react-shadcn/src/components/sections/feature-cards-block.tsx"

export function BasicExample() {
  return (
    <FeatureCardsGrid />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)
- [card](/docs/components/card)

---

### Feature Comparison Table

**Page:** [https://ui.tripled.work/components/feature-comparison-block-baseui](https://ui.tripled.work/components/feature-comparison-block-baseui)

```tsx
"use client"

import * as React from "react"

import { FeatureComparisonTable } from "@uitripled/react-baseui/src/components/sections/feature-comparison-block-baseui.tsx"

export function FeatureComparisonTableDemo() {
  return (
    <FeatureComparisonTable />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/feature-comparison-block-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Feature Comparison Table` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="feature-comparison-block-baseui" title="@uitripled/react-baseui/src/components/sections/feature-comparison-block-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { FeatureComparisonTable } from "@uitripled/react-baseui/src/components/sections/feature-comparison-block-baseui.tsx"
```

```tsx showLineNumbers
<FeatureComparisonTable />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { FeatureComparisonTable } from "@uitripled/react-baseui/src/components/sections/feature-comparison-block-baseui.tsx"

export function BasicExample() {
  return (
    <FeatureComparisonTable />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Feature Comparison Table

**Page:** [https://ui.tripled.work/components/feature-comparison-block-shadcnui](https://ui.tripled.work/components/feature-comparison-block-shadcnui)

```tsx
"use client"

import * as React from "react"

import { FeatureComparisonTable } from "@uitripled/react-shadcn/src/components/sections/feature-comparison-block.tsx"

export function FeatureComparisonTableDemo() {
  return (
    <FeatureComparisonTable />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/feature-comparison-block-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Feature Comparison Table` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="feature-comparison-block-shadcnui" title="@uitripled/react-shadcn/src/components/sections/feature-comparison-block.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { FeatureComparisonTable } from "@uitripled/react-shadcn/src/components/sections/feature-comparison-block.tsx"
```

```tsx showLineNumbers
<FeatureComparisonTable />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { FeatureComparisonTable } from "@uitripled/react-shadcn/src/components/sections/feature-comparison-block.tsx"

export function BasicExample() {
  return (
    <FeatureComparisonTable />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Footer Block

**Page:** [https://ui.tripled.work/components/footer-block-baseui](https://ui.tripled.work/components/footer-block-baseui)

```tsx
"use client"

import * as React from "react"

import { FooterBlock } from "@uitripled/react-baseui/src/components/sections/footer-block-baseui.tsx"

export function FooterBlockDemo() {
  return (
    <FooterBlock />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/footer-block-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Footer Block` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="footer-block-baseui" title="@uitripled/react-baseui/src/components/sections/footer-block-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { FooterBlock } from "@uitripled/react-baseui/src/components/sections/footer-block-baseui.tsx"
```

```tsx showLineNumbers
<FooterBlock />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { FooterBlock } from "@uitripled/react-baseui/src/components/sections/footer-block-baseui.tsx"

export function BasicExample() {
  return (
    <FooterBlock />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Footer Block

**Page:** [https://ui.tripled.work/components/footer-block-shadcnui](https://ui.tripled.work/components/footer-block-shadcnui)

```tsx
"use client"

import * as React from "react"

import { FooterBlock } from "@uitripled/react-shadcn/src/components/sections/footer-block.tsx"

export function FooterBlockDemo() {
  return (
    <FooterBlock />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/footer-block-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Footer Block` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="footer-block-shadcnui" title="@uitripled/react-shadcn/src/components/sections/footer-block.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { FooterBlock } from "@uitripled/react-shadcn/src/components/sections/footer-block.tsx"
```

```tsx showLineNumbers
<FooterBlock />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { FooterBlock } from "@uitripled/react-shadcn/src/components/sections/footer-block.tsx"

export function BasicExample() {
  return (
    <FooterBlock />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Gallery Grid with Lightbox

**Page:** [https://ui.tripled.work/components/gallery-grid-block-baseui](https://ui.tripled.work/components/gallery-grid-block-baseui)

```tsx
"use client"

import * as React from "react"

import { GalleryGridwithLightbox } from "@uitripled/react-baseui/src/components/sections/gallery-grid-block-baseui.tsx"

export function GalleryGridwithLightboxDemo() {
  return (
    <GalleryGridwithLightbox />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/gallery-grid-block-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Gallery Grid with Lightbox` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="gallery-grid-block-baseui" title="@uitripled/react-baseui/src/components/sections/gallery-grid-block-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GalleryGridwithLightbox } from "@uitripled/react-baseui/src/components/sections/gallery-grid-block-baseui.tsx"
```

```tsx showLineNumbers
<GalleryGridwithLightbox />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GalleryGridwithLightbox } from "@uitripled/react-baseui/src/components/sections/gallery-grid-block-baseui.tsx"

export function BasicExample() {
  return (
    <GalleryGridwithLightbox />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Gallery Grid with Lightbox

**Page:** [https://ui.tripled.work/components/gallery-grid-block-shadcnui](https://ui.tripled.work/components/gallery-grid-block-shadcnui)

```tsx
"use client"

import * as React from "react"

import { GalleryGridwithLightbox } from "@uitripled/react-shadcn/src/components/sections/gallery-grid-block.tsx"

export function GalleryGridwithLightboxDemo() {
  return (
    <GalleryGridwithLightbox />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/gallery-grid-block-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Gallery Grid with Lightbox` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="gallery-grid-block-shadcnui" title="@uitripled/react-shadcn/src/components/sections/gallery-grid-block.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GalleryGridwithLightbox } from "@uitripled/react-shadcn/src/components/sections/gallery-grid-block.tsx"
```

```tsx showLineNumbers
<GalleryGridwithLightbox />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GalleryGridwithLightbox } from "@uitripled/react-shadcn/src/components/sections/gallery-grid-block.tsx"

export function BasicExample() {
  return (
    <GalleryGridwithLightbox />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Glassmorphism CTA

**Page:** [https://ui.tripled.work/components/glassmorphism-cta-block-baseui](https://ui.tripled.work/components/glassmorphism-cta-block-baseui)

```tsx
"use client"

import * as React from "react"

import { GlassmorphismCTA } from "@uitripled/react-baseui/src/components/sections/glassmorphism-cta-block-baseui.tsx"

export function GlassmorphismCTADemo() {
  return (
    <GlassmorphismCTA />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/glassmorphism-cta-block-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Glassmorphism CTA` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="glassmorphism-cta-block-baseui" title="@uitripled/react-baseui/src/components/sections/glassmorphism-cta-block-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GlassmorphismCTA } from "@uitripled/react-baseui/src/components/sections/glassmorphism-cta-block-baseui.tsx"
```

```tsx showLineNumbers
<GlassmorphismCTA />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GlassmorphismCTA } from "@uitripled/react-baseui/src/components/sections/glassmorphism-cta-block-baseui.tsx"

export function BasicExample() {
  return (
    <GlassmorphismCTA />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Glassmorphism CTA

**Page:** [https://ui.tripled.work/components/glassmorphism-cta-block-shadcnui](https://ui.tripled.work/components/glassmorphism-cta-block-shadcnui)

```tsx
"use client"

import * as React from "react"

import { GlassmorphismCTA } from "@uitripled/react-shadcn/src/components/sections/glassmorphism-cta-block.tsx"

export function GlassmorphismCTADemo() {
  return (
    <GlassmorphismCTA />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/glassmorphism-cta-block-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Glassmorphism CTA` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="glassmorphism-cta-block-shadcnui" title="@uitripled/react-shadcn/src/components/sections/glassmorphism-cta-block.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GlassmorphismCTA } from "@uitripled/react-shadcn/src/components/sections/glassmorphism-cta-block.tsx"
```

```tsx showLineNumbers
<GlassmorphismCTA />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GlassmorphismCTA } from "@uitripled/react-shadcn/src/components/sections/glassmorphism-cta-block.tsx"

export function BasicExample() {
  return (
    <GlassmorphismCTA />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Glassmorphism Hero

**Page:** [https://ui.tripled.work/components/glassmorphism-hero-block-baseui](https://ui.tripled.work/components/glassmorphism-hero-block-baseui)

```tsx
"use client"

import * as React from "react"

import { GlassmorphismHero } from "@uitripled/react-baseui/src/components/sections/glassmorphism-hero-block-baseui.tsx"

export function GlassmorphismHeroDemo() {
  return (
    <GlassmorphismHero />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/glassmorphism-hero-block-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Glassmorphism Hero` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="glassmorphism-hero-block-baseui" title="@uitripled/react-baseui/src/components/sections/glassmorphism-hero-block-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GlassmorphismHero } from "@uitripled/react-baseui/src/components/sections/glassmorphism-hero-block-baseui.tsx"
```

```tsx showLineNumbers
<GlassmorphismHero />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GlassmorphismHero } from "@uitripled/react-baseui/src/components/sections/glassmorphism-hero-block-baseui.tsx"

export function BasicExample() {
  return (
    <GlassmorphismHero />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Glassmorphism Hero

**Page:** [https://ui.tripled.work/components/glassmorphism-hero-block-shadcnui](https://ui.tripled.work/components/glassmorphism-hero-block-shadcnui)

```tsx
"use client"

import * as React from "react"

import { GlassmorphismHero } from "@uitripled/react-shadcn/src/components/sections/glassmorphism-hero-block.tsx"

export function GlassmorphismHeroDemo() {
  return (
    <GlassmorphismHero />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/glassmorphism-hero-block-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Glassmorphism Hero` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="glassmorphism-hero-block-shadcnui" title="@uitripled/react-shadcn/src/components/sections/glassmorphism-hero-block.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GlassmorphismHero } from "@uitripled/react-shadcn/src/components/sections/glassmorphism-hero-block.tsx"
```

```tsx showLineNumbers
<GlassmorphismHero />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GlassmorphismHero } from "@uitripled/react-shadcn/src/components/sections/glassmorphism-hero-block.tsx"

export function BasicExample() {
  return (
    <GlassmorphismHero />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Glassmorphism Launch Timeline

**Page:** [https://ui.tripled.work/components/glassmorphism-launch-timeline-block-baseui](https://ui.tripled.work/components/glassmorphism-launch-timeline-block-baseui)

```tsx
"use client"

import * as React from "react"

import { GlassmorphismLaunchTimeline } from "@uitripled/react-baseui/src/components/sections/glassmorphism-launch-timeline-block-baseui.tsx"

export function GlassmorphismLaunchTimelineDemo() {
  return (
    <GlassmorphismLaunchTimeline />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/glassmorphism-launch-timeline-block-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Glassmorphism Launch Timeline` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="glassmorphism-launch-timeline-block-baseui" title="@uitripled/react-baseui/src/components/sections/glassmorphism-launch-timeline-block-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GlassmorphismLaunchTimeline } from "@uitripled/react-baseui/src/components/sections/glassmorphism-launch-timeline-block-baseui.tsx"
```

```tsx showLineNumbers
<GlassmorphismLaunchTimeline />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GlassmorphismLaunchTimeline } from "@uitripled/react-baseui/src/components/sections/glassmorphism-launch-timeline-block-baseui.tsx"

export function BasicExample() {
  return (
    <GlassmorphismLaunchTimeline />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Glassmorphism Launch Timeline

**Page:** [https://ui.tripled.work/components/glassmorphism-launch-timeline-block-shadcnui](https://ui.tripled.work/components/glassmorphism-launch-timeline-block-shadcnui)

```tsx
"use client"

import * as React from "react"

import { GlassmorphismLaunchTimeline } from "@uitripled/react-shadcn/src/components/sections/glassmorphism-launch-timeline-block.tsx"

export function GlassmorphismLaunchTimelineDemo() {
  return (
    <GlassmorphismLaunchTimeline />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/glassmorphism-launch-timeline-block-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Glassmorphism Launch Timeline` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="glassmorphism-launch-timeline-block-shadcnui" title="@uitripled/react-shadcn/src/components/sections/glassmorphism-launch-timeline-block.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GlassmorphismLaunchTimeline } from "@uitripled/react-shadcn/src/components/sections/glassmorphism-launch-timeline-block.tsx"
```

```tsx showLineNumbers
<GlassmorphismLaunchTimeline />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GlassmorphismLaunchTimeline } from "@uitripled/react-shadcn/src/components/sections/glassmorphism-launch-timeline-block.tsx"

export function BasicExample() {
  return (
    <GlassmorphismLaunchTimeline />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Glassmorphism Listen App

**Page:** [https://ui.tripled.work/components/glassmorphism-listen-app-block-baseui](https://ui.tripled.work/components/glassmorphism-listen-app-block-baseui)

```tsx
"use client"

import * as React from "react"

import { GlassmorphismListenApp } from "@uitripled/react-baseui/src/components/sections/glassmorphism-listen-app-block-baseui.tsx"

export function GlassmorphismListenAppDemo() {
  return (
    <GlassmorphismListenApp />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/glassmorphism-listen-app-block-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Glassmorphism Listen App` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="glassmorphism-listen-app-block-baseui" title="@uitripled/react-baseui/src/components/sections/glassmorphism-listen-app-block-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GlassmorphismListenApp } from "@uitripled/react-baseui/src/components/sections/glassmorphism-listen-app-block-baseui.tsx"
```

```tsx showLineNumbers
<GlassmorphismListenApp />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GlassmorphismListenApp } from "@uitripled/react-baseui/src/components/sections/glassmorphism-listen-app-block-baseui.tsx"

export function BasicExample() {
  return (
    <GlassmorphismListenApp />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Glassmorphism Listen App

**Page:** [https://ui.tripled.work/components/glassmorphism-listen-app-block-shadcnui](https://ui.tripled.work/components/glassmorphism-listen-app-block-shadcnui)

```tsx
"use client"

import * as React from "react"

import { GlassmorphismListenApp } from "@uitripled/react-shadcn/src/components/sections/glassmorphism-listen-app-block.tsx"

export function GlassmorphismListenAppDemo() {
  return (
    <GlassmorphismListenApp />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/glassmorphism-listen-app-block-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Glassmorphism Listen App` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="glassmorphism-listen-app-block-shadcnui" title="@uitripled/react-shadcn/src/components/sections/glassmorphism-listen-app-block.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GlassmorphismListenApp } from "@uitripled/react-shadcn/src/components/sections/glassmorphism-listen-app-block.tsx"
```

```tsx showLineNumbers
<GlassmorphismListenApp />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GlassmorphismListenApp } from "@uitripled/react-shadcn/src/components/sections/glassmorphism-listen-app-block.tsx"

export function BasicExample() {
  return (
    <GlassmorphismListenApp />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Glassmorphism Logo Showcase

**Page:** [https://ui.tripled.work/components/glassmorphism-logo-showcase-block-baseui](https://ui.tripled.work/components/glassmorphism-logo-showcase-block-baseui)

```tsx
"use client"

import * as React from "react"

import { GlassmorphismLogoShowcase } from "@uitripled/react-baseui/src/components/sections/glassmorphism-logo-showcase-block-baseui.tsx"

export function GlassmorphismLogoShowcaseDemo() {
  return (
    <GlassmorphismLogoShowcase />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/glassmorphism-logo-showcase-block-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Glassmorphism Logo Showcase` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="glassmorphism-logo-showcase-block-baseui" title="@uitripled/react-baseui/src/components/sections/glassmorphism-logo-showcase-block-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GlassmorphismLogoShowcase } from "@uitripled/react-baseui/src/components/sections/glassmorphism-logo-showcase-block-baseui.tsx"
```

```tsx showLineNumbers
<GlassmorphismLogoShowcase />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GlassmorphismLogoShowcase } from "@uitripled/react-baseui/src/components/sections/glassmorphism-logo-showcase-block-baseui.tsx"

export function BasicExample() {
  return (
    <GlassmorphismLogoShowcase />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Glassmorphism Logo Showcase

**Page:** [https://ui.tripled.work/components/glassmorphism-logo-showcase-block-shadcnui](https://ui.tripled.work/components/glassmorphism-logo-showcase-block-shadcnui)

```tsx
"use client"

import * as React from "react"

import { GlassmorphismLogoShowcase } from "@uitripled/react-shadcn/src/components/sections/glassmorphism-logo-showcase-block.tsx"

export function GlassmorphismLogoShowcaseDemo() {
  return (
    <GlassmorphismLogoShowcase />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/glassmorphism-logo-showcase-block-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Glassmorphism Logo Showcase` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="glassmorphism-logo-showcase-block-shadcnui" title="@uitripled/react-shadcn/src/components/sections/glassmorphism-logo-showcase-block.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GlassmorphismLogoShowcase } from "@uitripled/react-shadcn/src/components/sections/glassmorphism-logo-showcase-block.tsx"
```

```tsx showLineNumbers
<GlassmorphismLogoShowcase />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GlassmorphismLogoShowcase } from "@uitripled/react-shadcn/src/components/sections/glassmorphism-logo-showcase-block.tsx"

export function BasicExample() {
  return (
    <GlassmorphismLogoShowcase />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Glassmorphism Minimal Metrics

**Page:** [https://ui.tripled.work/components/glassmorphism-minimal-metrics-block-baseui](https://ui.tripled.work/components/glassmorphism-minimal-metrics-block-baseui)

```tsx
"use client"

import * as React from "react"

import { GlassmorphismMinimalMetrics } from "@uitripled/react-baseui/src/components/sections/glassmorphism-minimal-metrics-block-baseui.tsx"

export function GlassmorphismMinimalMetricsDemo() {
  return (
    <GlassmorphismMinimalMetrics />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/glassmorphism-minimal-metrics-block-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Glassmorphism Minimal Metrics` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="glassmorphism-minimal-metrics-block-baseui" title="@uitripled/react-baseui/src/components/sections/glassmorphism-minimal-metrics-block-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GlassmorphismMinimalMetrics } from "@uitripled/react-baseui/src/components/sections/glassmorphism-minimal-metrics-block-baseui.tsx"
```

```tsx showLineNumbers
<GlassmorphismMinimalMetrics />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GlassmorphismMinimalMetrics } from "@uitripled/react-baseui/src/components/sections/glassmorphism-minimal-metrics-block-baseui.tsx"

export function BasicExample() {
  return (
    <GlassmorphismMinimalMetrics />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Glassmorphism Minimal Metrics

**Page:** [https://ui.tripled.work/components/glassmorphism-minimal-metrics-block-shadcnui](https://ui.tripled.work/components/glassmorphism-minimal-metrics-block-shadcnui)

```tsx
"use client"

import * as React from "react"

import { GlassmorphismMinimalMetrics } from "@uitripled/react-shadcn/src/components/sections/glassmorphism-minimal-metrics-block.tsx"

export function GlassmorphismMinimalMetricsDemo() {
  return (
    <GlassmorphismMinimalMetrics />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/glassmorphism-minimal-metrics-block-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Glassmorphism Minimal Metrics` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="glassmorphism-minimal-metrics-block-shadcnui" title="@uitripled/react-shadcn/src/components/sections/glassmorphism-minimal-metrics-block.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GlassmorphismMinimalMetrics } from "@uitripled/react-shadcn/src/components/sections/glassmorphism-minimal-metrics-block.tsx"
```

```tsx showLineNumbers
<GlassmorphismMinimalMetrics />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GlassmorphismMinimalMetrics } from "@uitripled/react-shadcn/src/components/sections/glassmorphism-minimal-metrics-block.tsx"

export function BasicExample() {
  return (
    <GlassmorphismMinimalMetrics />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Glassmorphism Portfolio

**Page:** [https://ui.tripled.work/components/glassmorphism-portfolio-block-baseui](https://ui.tripled.work/components/glassmorphism-portfolio-block-baseui)

```tsx
"use client"

import * as React from "react"

import { GlassmorphismPortfolio } from "@uitripled/react-baseui/src/components/sections/glassmorphism-portfolio-block-baseui.tsx"

export function GlassmorphismPortfolioDemo() {
  return (
    <GlassmorphismPortfolio />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/glassmorphism-portfolio-block-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Glassmorphism Portfolio` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="glassmorphism-portfolio-block-baseui" title="@uitripled/react-baseui/src/components/sections/glassmorphism-portfolio-block-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GlassmorphismPortfolio } from "@uitripled/react-baseui/src/components/sections/glassmorphism-portfolio-block-baseui.tsx"
```

```tsx showLineNumbers
<GlassmorphismPortfolio />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GlassmorphismPortfolio } from "@uitripled/react-baseui/src/components/sections/glassmorphism-portfolio-block-baseui.tsx"

export function BasicExample() {
  return (
    <GlassmorphismPortfolio />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Glassmorphism Portfolio

**Page:** [https://ui.tripled.work/components/glassmorphism-portfolio-block-shadcnui](https://ui.tripled.work/components/glassmorphism-portfolio-block-shadcnui)

```tsx
"use client"

import * as React from "react"

import { GlassmorphismPortfolio } from "@uitripled/react-shadcn/src/components/sections/glassmorphism-portfolio-block.tsx"

export function GlassmorphismPortfolioDemo() {
  return (
    <GlassmorphismPortfolio />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/glassmorphism-portfolio-block-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Glassmorphism Portfolio` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="glassmorphism-portfolio-block-shadcnui" title="@uitripled/react-shadcn/src/components/sections/glassmorphism-portfolio-block.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GlassmorphismPortfolio } from "@uitripled/react-shadcn/src/components/sections/glassmorphism-portfolio-block.tsx"
```

```tsx showLineNumbers
<GlassmorphismPortfolio />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GlassmorphismPortfolio } from "@uitripled/react-shadcn/src/components/sections/glassmorphism-portfolio-block.tsx"

export function BasicExample() {
  return (
    <GlassmorphismPortfolio />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Glassmorphism Pricing

**Page:** [https://ui.tripled.work/components/glassmorphism-pricing-block-baseui](https://ui.tripled.work/components/glassmorphism-pricing-block-baseui)

```tsx
"use client"

import * as React from "react"

import { GlassmorphismPricing } from "@uitripled/react-baseui/src/components/sections/glassmorphism-pricing-block-baseui.tsx"

export function GlassmorphismPricingDemo() {
  return (
    <GlassmorphismPricing />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/glassmorphism-pricing-block-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Glassmorphism Pricing` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="glassmorphism-pricing-block-baseui" title="@uitripled/react-baseui/src/components/sections/glassmorphism-pricing-block-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GlassmorphismPricing } from "@uitripled/react-baseui/src/components/sections/glassmorphism-pricing-block-baseui.tsx"
```

```tsx showLineNumbers
<GlassmorphismPricing />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GlassmorphismPricing } from "@uitripled/react-baseui/src/components/sections/glassmorphism-pricing-block-baseui.tsx"

export function BasicExample() {
  return (
    <GlassmorphismPricing />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Glassmorphism Pricing

**Page:** [https://ui.tripled.work/components/glassmorphism-pricing-block-shadcnui](https://ui.tripled.work/components/glassmorphism-pricing-block-shadcnui)

```tsx
"use client"

import * as React from "react"

import { GlassmorphismPricing } from "@uitripled/react-shadcn/src/components/sections/glassmorphism-pricing-block.tsx"

export function GlassmorphismPricingDemo() {
  return (
    <GlassmorphismPricing />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/glassmorphism-pricing-block-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Glassmorphism Pricing` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="glassmorphism-pricing-block-shadcnui" title="@uitripled/react-shadcn/src/components/sections/glassmorphism-pricing-block.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GlassmorphismPricing } from "@uitripled/react-shadcn/src/components/sections/glassmorphism-pricing-block.tsx"
```

```tsx showLineNumbers
<GlassmorphismPricing />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GlassmorphismPricing } from "@uitripled/react-shadcn/src/components/sections/glassmorphism-pricing-block.tsx"

export function BasicExample() {
  return (
    <GlassmorphismPricing />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Glassmorphism Product Updates

**Page:** [https://ui.tripled.work/components/glassmorphism-product-update-block-baseui](https://ui.tripled.work/components/glassmorphism-product-update-block-baseui)

```tsx
"use client"

import * as React from "react"

import { GlassmorphismProductUpdates } from "@uitripled/react-baseui/src/components/sections/glassmorphism-product-update-block-baseui.tsx"

export function GlassmorphismProductUpdatesDemo() {
  return (
    <GlassmorphismProductUpdates />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/glassmorphism-product-update-block-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Glassmorphism Product Updates` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="glassmorphism-product-update-block-baseui" title="@uitripled/react-baseui/src/components/sections/glassmorphism-product-update-block-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GlassmorphismProductUpdates } from "@uitripled/react-baseui/src/components/sections/glassmorphism-product-update-block-baseui.tsx"
```

```tsx showLineNumbers
<GlassmorphismProductUpdates />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GlassmorphismProductUpdates } from "@uitripled/react-baseui/src/components/sections/glassmorphism-product-update-block-baseui.tsx"

export function BasicExample() {
  return (
    <GlassmorphismProductUpdates />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Glassmorphism Product Updates

**Page:** [https://ui.tripled.work/components/glassmorphism-product-update-block-shadcnui](https://ui.tripled.work/components/glassmorphism-product-update-block-shadcnui)

```tsx
"use client"

import * as React from "react"

import { GlassmorphismProductUpdates } from "@uitripled/react-shadcn/src/components/sections/glassmorphism-product-update-block.tsx"

export function GlassmorphismProductUpdatesDemo() {
  return (
    <GlassmorphismProductUpdates />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/glassmorphism-product-update-block-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Glassmorphism Product Updates` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="glassmorphism-product-update-block-shadcnui" title="@uitripled/react-shadcn/src/components/sections/glassmorphism-product-update-block.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GlassmorphismProductUpdates } from "@uitripled/react-shadcn/src/components/sections/glassmorphism-product-update-block.tsx"
```

```tsx showLineNumbers
<GlassmorphismProductUpdates />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GlassmorphismProductUpdates } from "@uitripled/react-shadcn/src/components/sections/glassmorphism-product-update-block.tsx"

export function BasicExample() {
  return (
    <GlassmorphismProductUpdates />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Glassmorphism Testimonials

**Page:** [https://ui.tripled.work/components/glassmorphism-testimonials-block-baseui](https://ui.tripled.work/components/glassmorphism-testimonials-block-baseui)

```tsx
"use client"

import * as React from "react"

import { GlassmorphismTestimonials } from "@uitripled/react-baseui/src/components/sections/glassmorphism-testimonials-block-baseui.tsx"

export function GlassmorphismTestimonialsDemo() {
  return (
    <GlassmorphismTestimonials />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/glassmorphism-testimonials-block-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Glassmorphism Testimonials` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="glassmorphism-testimonials-block-baseui" title="@uitripled/react-baseui/src/components/sections/glassmorphism-testimonials-block-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GlassmorphismTestimonials } from "@uitripled/react-baseui/src/components/sections/glassmorphism-testimonials-block-baseui.tsx"
```

```tsx showLineNumbers
<GlassmorphismTestimonials />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GlassmorphismTestimonials } from "@uitripled/react-baseui/src/components/sections/glassmorphism-testimonials-block-baseui.tsx"

export function BasicExample() {
  return (
    <GlassmorphismTestimonials />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Glassmorphism Testimonials

**Page:** [https://ui.tripled.work/components/glassmorphism-testimonials-block-shadcnui](https://ui.tripled.work/components/glassmorphism-testimonials-block-shadcnui)

```tsx
"use client"

import * as React from "react"

import { GlassmorphismTestimonials } from "@uitripled/react-shadcn/src/components/sections/glassmorphism-testimonials-block.tsx"

export function GlassmorphismTestimonialsDemo() {
  return (
    <GlassmorphismTestimonials />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/glassmorphism-testimonials-block-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Glassmorphism Testimonials` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="glassmorphism-testimonials-block-shadcnui" title="@uitripled/react-shadcn/src/components/sections/glassmorphism-testimonials-block.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GlassmorphismTestimonials } from "@uitripled/react-shadcn/src/components/sections/glassmorphism-testimonials-block.tsx"
```

```tsx showLineNumbers
<GlassmorphismTestimonials />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GlassmorphismTestimonials } from "@uitripled/react-shadcn/src/components/sections/glassmorphism-testimonials-block.tsx"

export function BasicExample() {
  return (
    <GlassmorphismTestimonials />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Glowy Waves Hero

**Page:** [https://ui.tripled.work/components/glowy-waves-hero-baseui](https://ui.tripled.work/components/glowy-waves-hero-baseui)

```tsx
"use client"

import * as React from "react"

import { GlowyWavesHero } from "@uitripled/react-baseui/src/components/sections/glowy-waves-hero-baseui.tsx"

export function GlowyWavesHeroDemo() {
  return (
    <GlowyWavesHero />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/glowy-waves-hero-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Glowy Waves Hero` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="glowy-waves-hero-baseui" title="@uitripled/react-baseui/src/components/sections/glowy-waves-hero-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GlowyWavesHero } from "@uitripled/react-baseui/src/components/sections/glowy-waves-hero-baseui.tsx"
```

```tsx showLineNumbers
<GlowyWavesHero />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GlowyWavesHero } from "@uitripled/react-baseui/src/components/sections/glowy-waves-hero-baseui.tsx"

export function BasicExample() {
  return (
    <GlowyWavesHero />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Glowy Waves Hero

**Page:** [https://ui.tripled.work/components/glowy-waves-hero-shadcnui](https://ui.tripled.work/components/glowy-waves-hero-shadcnui)

```tsx
"use client"

import * as React from "react"

import { GlowyWavesHero } from "@uitripled/react-shadcn/src/components/sections/glowy-waves-hero.tsx"

export function GlowyWavesHeroDemo() {
  return (
    <GlowyWavesHero />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/glowy-waves-hero-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Glowy Waves Hero` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="glowy-waves-hero-shadcnui" title="@uitripled/react-shadcn/src/components/sections/glowy-waves-hero.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GlowyWavesHero } from "@uitripled/react-shadcn/src/components/sections/glowy-waves-hero.tsx"
```

```tsx showLineNumbers
<GlowyWavesHero />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GlowyWavesHero } from "@uitripled/react-shadcn/src/components/sections/glowy-waves-hero.tsx"

export function BasicExample() {
  return (
    <GlowyWavesHero />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Hero Block

**Page:** [https://ui.tripled.work/components/hero-block-baseui](https://ui.tripled.work/components/hero-block-baseui)

```tsx
"use client"

import * as React from "react"

import { HeroBlock } from "@uitripled/react-baseui/src/components/sections/hero-block-baseui.tsx"

export function HeroBlockDemo() {
  return (
    <HeroBlock />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/hero-block-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Hero Block` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="hero-block-baseui" title="@uitripled/react-baseui/src/components/sections/hero-block-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { HeroBlock } from "@uitripled/react-baseui/src/components/sections/hero-block-baseui.tsx"
```

```tsx showLineNumbers
<HeroBlock />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { HeroBlock } from "@uitripled/react-baseui/src/components/sections/hero-block-baseui.tsx"

export function BasicExample() {
  return (
    <HeroBlock />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Hero Block

**Page:** [https://ui.tripled.work/components/hero-block-shadcnui](https://ui.tripled.work/components/hero-block-shadcnui)

```tsx
"use client"

import * as React from "react"

import { HeroBlock } from "@uitripled/react-shadcn/src/components/sections/hero-block.tsx"

export function HeroBlockDemo() {
  return (
    <HeroBlock />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/hero-block-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Hero Block` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="hero-block-shadcnui" title="@uitripled/react-shadcn/src/components/sections/hero-block.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { HeroBlock } from "@uitripled/react-shadcn/src/components/sections/hero-block.tsx"
```

```tsx showLineNumbers
<HeroBlock />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { HeroBlock } from "@uitripled/react-shadcn/src/components/sections/hero-block.tsx"

export function BasicExample() {
  return (
    <HeroBlock />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Interactive Logs Table

**Page:** [https://ui.tripled.work/components/interactive-logs-table-baseui](https://ui.tripled.work/components/interactive-logs-table-baseui)

```tsx
"use client"

import * as React from "react"

import { InteractiveLogsTable } from "@uitripled/react-baseui/src/components/sections/interactive-logs-table-baseui.tsx"

export function InteractiveLogsTableDemo() {
  return (
    <InteractiveLogsTable />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/interactive-logs-table-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Interactive Logs Table` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="interactive-logs-table-baseui" title="@uitripled/react-baseui/src/components/sections/interactive-logs-table-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { InteractiveLogsTable } from "@uitripled/react-baseui/src/components/sections/interactive-logs-table-baseui.tsx"
```

```tsx showLineNumbers
<InteractiveLogsTable />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { InteractiveLogsTable } from "@uitripled/react-baseui/src/components/sections/interactive-logs-table-baseui.tsx"

export function BasicExample() {
  return (
    <InteractiveLogsTable />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Interactive Logs Table

**Page:** [https://ui.tripled.work/components/interactive-logs-table-shadcnui](https://ui.tripled.work/components/interactive-logs-table-shadcnui)

```tsx
"use client"

import * as React from "react"

import { InteractiveLogsTable } from "@uitripled/react-shadcn/src/components/sections/interactive-logs-table.tsx"

export function InteractiveLogsTableDemo() {
  return (
    <InteractiveLogsTable />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/interactive-logs-table-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Interactive Logs Table` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="interactive-logs-table-shadcnui" title="@uitripled/react-shadcn/src/components/sections/interactive-logs-table.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { InteractiveLogsTable } from "@uitripled/react-shadcn/src/components/sections/interactive-logs-table.tsx"
```

```tsx showLineNumbers
<InteractiveLogsTable />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { InteractiveLogsTable } from "@uitripled/react-shadcn/src/components/sections/interactive-logs-table.tsx"

export function BasicExample() {
  return (
    <InteractiveLogsTable />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Kanban Board

**Page:** [https://ui.tripled.work/components/kanban-board-shadcnui](https://ui.tripled.work/components/kanban-board-shadcnui)

```tsx
"use client"

import * as React from "react"

import { KanbanBoard } from "@uitripled/react-shadcn/src/components/components/kanban/kanban-board.tsx"

export function KanbanBoardDemo() {
  return (
    <KanbanBoard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/kanban-board-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Kanban Board` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="kanban-board-shadcnui" title="@uitripled/react-shadcn/src/components/components/kanban/kanban-board.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { KanbanBoard } from "@uitripled/react-shadcn/src/components/components/kanban/kanban-board.tsx"
```

```tsx showLineNumbers
<KanbanBoard />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { KanbanBoard } from "@uitripled/react-shadcn/src/components/components/kanban/kanban-board.tsx"

export function BasicExample() {
  return (
    <KanbanBoard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### N8N Workflow Block

**Page:** [https://ui.tripled.work/components/n8n-workflow-block-baseui](https://ui.tripled.work/components/n8n-workflow-block-baseui)

```tsx
"use client"

import * as React from "react"

import { N8NWorkflowBlock } from "@uitripled/react-baseui/src/components/sections/n8n-workflow-block-baseui.tsx"

export function N8NWorkflowBlockDemo() {
  return (
    <N8NWorkflowBlock />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/n8n-workflow-block-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `N8N Workflow Block` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="n8n-workflow-block-baseui" title="@uitripled/react-baseui/src/components/sections/n8n-workflow-block-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { N8NWorkflowBlock } from "@uitripled/react-baseui/src/components/sections/n8n-workflow-block-baseui.tsx"
```

```tsx showLineNumbers
<N8NWorkflowBlock />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { N8NWorkflowBlock } from "@uitripled/react-baseui/src/components/sections/n8n-workflow-block-baseui.tsx"

export function BasicExample() {
  return (
    <N8NWorkflowBlock />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### N8N Workflow Block

**Page:** [https://ui.tripled.work/components/n8n-workflow-block-shadcnui](https://ui.tripled.work/components/n8n-workflow-block-shadcnui)

```tsx
"use client"

import * as React from "react"

import { N8NWorkflowBlock } from "@uitripled/react-shadcn/src/components/sections/n8n-workflow-block.tsx"

export function N8NWorkflowBlockDemo() {
  return (
    <N8NWorkflowBlock />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/n8n-workflow-block-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `N8N Workflow Block` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="n8n-workflow-block-shadcnui" title="@uitripled/react-shadcn/src/components/sections/n8n-workflow-block.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { N8NWorkflowBlock } from "@uitripled/react-shadcn/src/components/sections/n8n-workflow-block.tsx"
```

```tsx showLineNumbers
<N8NWorkflowBlock />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { N8NWorkflowBlock } from "@uitripled/react-shadcn/src/components/sections/n8n-workflow-block.tsx"

export function BasicExample() {
  return (
    <N8NWorkflowBlock />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### New Hero Section

**Page:** [https://ui.tripled.work/components/new-hero-section-baseui](https://ui.tripled.work/components/new-hero-section-baseui)

```tsx
"use client"

import * as React from "react"

import { NewHeroSection } from "@uitripled/react-baseui/src/components/sections/new-hero-section-baseui.tsx"

export function NewHeroSectionDemo() {
  return (
    <NewHeroSection />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/new-hero-section-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `New Hero Section` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="new-hero-section-baseui" title="@uitripled/react-baseui/src/components/sections/new-hero-section-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NewHeroSection } from "@uitripled/react-baseui/src/components/sections/new-hero-section-baseui.tsx"
```

```tsx showLineNumbers
<NewHeroSection />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NewHeroSection } from "@uitripled/react-baseui/src/components/sections/new-hero-section-baseui.tsx"

export function BasicExample() {
  return (
    <NewHeroSection />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### New Hero Section

**Page:** [https://ui.tripled.work/components/new-hero-section-shadcnui](https://ui.tripled.work/components/new-hero-section-shadcnui)

```tsx
"use client"

import * as React from "react"

import { NewHeroSection } from "@uitripled/react-shadcn/src/components/sections/new-hero-section.tsx"

export function NewHeroSectionDemo() {
  return (
    <NewHeroSection />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/new-hero-section-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `New Hero Section` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="new-hero-section-shadcnui" title="@uitripled/react-shadcn/src/components/sections/new-hero-section.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NewHeroSection } from "@uitripled/react-shadcn/src/components/sections/new-hero-section.tsx"
```

```tsx showLineNumbers
<NewHeroSection />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NewHeroSection } from "@uitripled/react-shadcn/src/components/sections/new-hero-section.tsx"

export function BasicExample() {
  return (
    <NewHeroSection />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Newsletter Signup Block

**Page:** [https://ui.tripled.work/components/newsletter-signup-block-baseui](https://ui.tripled.work/components/newsletter-signup-block-baseui)

```tsx
"use client"

import * as React from "react"

import { NewsletterSignupBlock } from "@uitripled/react-baseui/src/components/sections/newsletter-signup-block-baseui.tsx"

export function NewsletterSignupBlockDemo() {
  return (
    <NewsletterSignupBlock />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/newsletter-signup-block-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Newsletter Signup Block` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="newsletter-signup-block-baseui" title="@uitripled/react-baseui/src/components/sections/newsletter-signup-block-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NewsletterSignupBlock } from "@uitripled/react-baseui/src/components/sections/newsletter-signup-block-baseui.tsx"
```

```tsx showLineNumbers
<NewsletterSignupBlock />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NewsletterSignupBlock } from "@uitripled/react-baseui/src/components/sections/newsletter-signup-block-baseui.tsx"

export function BasicExample() {
  return (
    <NewsletterSignupBlock />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Newsletter Signup Block

**Page:** [https://ui.tripled.work/components/newsletter-signup-block-shadcnui](https://ui.tripled.work/components/newsletter-signup-block-shadcnui)

```tsx
"use client"

import * as React from "react"

import { NewsletterSignupBlock } from "@uitripled/react-shadcn/src/components/sections/newsletter-signup-block.tsx"

export function NewsletterSignupBlockDemo() {
  return (
    <NewsletterSignupBlock />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/newsletter-signup-block-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Newsletter Signup Block` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="newsletter-signup-block-shadcnui" title="@uitripled/react-shadcn/src/components/sections/newsletter-signup-block.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NewsletterSignupBlock } from "@uitripled/react-shadcn/src/components/sections/newsletter-signup-block.tsx"
```

```tsx showLineNumbers
<NewsletterSignupBlock />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NewsletterSignupBlock } from "@uitripled/react-shadcn/src/components/sections/newsletter-signup-block.tsx"

export function BasicExample() {
  return (
    <NewsletterSignupBlock />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Notion Blog Page

**Page:** [https://ui.tripled.work/components/notion-blog-page-baseui](https://ui.tripled.work/components/notion-blog-page-baseui)

```tsx
"use client"

import * as React from "react"

import { NotionBlogPage } from "@uitripled/react-baseui/src/components/sections/notion-blog-page-baseui.tsx"

export function NotionBlogPageDemo() {
  return (
    <NotionBlogPage />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/notion-blog-page-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Notion Blog Page` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="notion-blog-page-baseui" title="@uitripled/react-baseui/src/components/sections/notion-blog-page-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NotionBlogPage } from "@uitripled/react-baseui/src/components/sections/notion-blog-page-baseui.tsx"
```

```tsx showLineNumbers
<NotionBlogPage />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NotionBlogPage } from "@uitripled/react-baseui/src/components/sections/notion-blog-page-baseui.tsx"

export function BasicExample() {
  return (
    <NotionBlogPage />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Notion Blog Page

**Page:** [https://ui.tripled.work/components/notion-blog-page-shadcnui](https://ui.tripled.work/components/notion-blog-page-shadcnui)

```tsx
"use client"

import * as React from "react"

import { NotionBlogPage } from "@uitripled/react-shadcn/src/components/sections/notion-blog-page.tsx"

export function NotionBlogPageDemo() {
  return (
    <NotionBlogPage />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/notion-blog-page-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Notion Blog Page` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="notion-blog-page-shadcnui" title="@uitripled/react-shadcn/src/components/sections/notion-blog-page.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { NotionBlogPage } from "@uitripled/react-shadcn/src/components/sections/notion-blog-page.tsx"
```

```tsx showLineNumbers
<NotionBlogPage />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { NotionBlogPage } from "@uitripled/react-shadcn/src/components/sections/notion-blog-page.tsx"

export function BasicExample() {
  return (
    <NotionBlogPage />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Our Services

**Page:** [https://ui.tripled.work/components/our-services-section-baseui](https://ui.tripled.work/components/our-services-section-baseui)

```tsx
"use client"

import * as React from "react"

import { OurServices } from "@uitripled/react-baseui/src/components/sections/our-services-section-baseui.tsx"

export function OurServicesDemo() {
  return (
    <OurServices />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/our-services-section-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Our Services` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="our-services-section-baseui" title="@uitripled/react-baseui/src/components/sections/our-services-section-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { OurServices } from "@uitripled/react-baseui/src/components/sections/our-services-section-baseui.tsx"
```

```tsx showLineNumbers
<OurServices />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { OurServices } from "@uitripled/react-baseui/src/components/sections/our-services-section-baseui.tsx"

export function BasicExample() {
  return (
    <OurServices />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Our Services

**Page:** [https://ui.tripled.work/components/our-services-section-shadcnui](https://ui.tripled.work/components/our-services-section-shadcnui)

```tsx
"use client"

import * as React from "react"

import { OurServices } from "@uitripled/react-shadcn/src/components/sections/our-services-section.tsx"

export function OurServicesDemo() {
  return (
    <OurServices />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/our-services-section-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Our Services` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="our-services-section-shadcnui" title="@uitripled/react-shadcn/src/components/sections/our-services-section.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { OurServices } from "@uitripled/react-shadcn/src/components/sections/our-services-section.tsx"
```

```tsx showLineNumbers
<OurServices />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { OurServices } from "@uitripled/react-shadcn/src/components/sections/our-services-section.tsx"

export function BasicExample() {
  return (
    <OurServices />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Services Grid

**Page:** [https://ui.tripled.work/components/services-grid-block-baseui](https://ui.tripled.work/components/services-grid-block-baseui)

```tsx
"use client"

import * as React from "react"

import { ServicesGrid } from "@uitripled/react-baseui/src/components/sections/services-grid-block-baseui.tsx"

export function ServicesGridDemo() {
  return (
    <ServicesGrid />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/services-grid-block-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Services Grid` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="services-grid-block-baseui" title="@uitripled/react-baseui/src/components/sections/services-grid-block-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { ServicesGrid } from "@uitripled/react-baseui/src/components/sections/services-grid-block-baseui.tsx"
```

```tsx showLineNumbers
<ServicesGrid />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { ServicesGrid } from "@uitripled/react-baseui/src/components/sections/services-grid-block-baseui.tsx"

export function BasicExample() {
  return (
    <ServicesGrid />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Services Grid

**Page:** [https://ui.tripled.work/components/services-grid-block-shadcnui](https://ui.tripled.work/components/services-grid-block-shadcnui)

```tsx
"use client"

import * as React from "react"

import { ServicesGrid } from "@uitripled/react-shadcn/src/components/sections/services-grid-block.tsx"

export function ServicesGridDemo() {
  return (
    <ServicesGrid />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/services-grid-block-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Services Grid` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="services-grid-block-shadcnui" title="@uitripled/react-shadcn/src/components/sections/services-grid-block.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { ServicesGrid } from "@uitripled/react-shadcn/src/components/sections/services-grid-block.tsx"
```

```tsx showLineNumbers
<ServicesGrid />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { ServicesGrid } from "@uitripled/react-shadcn/src/components/sections/services-grid-block.tsx"

export function BasicExample() {
  return (
    <ServicesGrid />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Stats Counter Block

**Page:** [https://ui.tripled.work/components/stats-counter-block-baseui](https://ui.tripled.work/components/stats-counter-block-baseui)

```tsx
"use client"

import * as React from "react"

import { StatsCounterBlock } from "@uitripled/react-baseui/src/components/sections/stats-counter-block-baseui.tsx"

export function StatsCounterBlockDemo() {
  return (
    <StatsCounterBlock />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/stats-counter-block-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Stats Counter Block` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="stats-counter-block-baseui" title="@uitripled/react-baseui/src/components/sections/stats-counter-block-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { StatsCounterBlock } from "@uitripled/react-baseui/src/components/sections/stats-counter-block-baseui.tsx"
```

```tsx showLineNumbers
<StatsCounterBlock />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { StatsCounterBlock } from "@uitripled/react-baseui/src/components/sections/stats-counter-block-baseui.tsx"

export function BasicExample() {
  return (
    <StatsCounterBlock />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Stats Counter Block

**Page:** [https://ui.tripled.work/components/stats-counter-block-shadcnui](https://ui.tripled.work/components/stats-counter-block-shadcnui)

```tsx
"use client"

import * as React from "react"

import { StatsCounterBlock } from "@uitripled/react-shadcn/src/components/sections/stats-counter-block.tsx"

export function StatsCounterBlockDemo() {
  return (
    <StatsCounterBlock />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/stats-counter-block-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Stats Counter Block` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="stats-counter-block-shadcnui" title="@uitripled/react-shadcn/src/components/sections/stats-counter-block.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { StatsCounterBlock } from "@uitripled/react-shadcn/src/components/sections/stats-counter-block.tsx"
```

```tsx showLineNumbers
<StatsCounterBlock />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { StatsCounterBlock } from "@uitripled/react-shadcn/src/components/sections/stats-counter-block.tsx"

export function BasicExample() {
  return (
    <StatsCounterBlock />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Stocks Dashboard

**Page:** [https://ui.tripled.work/components/stocks-dashboard-shadcnui](https://ui.tripled.work/components/stocks-dashboard-shadcnui)

```tsx
"use client"

import * as React from "react"

import { StocksDashboard } from "@uitripled/react-shadcn/src/components/components/stocks-dashboard/stocks-dashboard.tsx"

export function StocksDashboardDemo() {
  return (
    <StocksDashboard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/stocks-dashboard-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Stocks Dashboard` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="stocks-dashboard-shadcnui" title="@uitripled/react-shadcn/src/components/components/stocks-dashboard/stocks-dashboard.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { StocksDashboard } from "@uitripled/react-shadcn/src/components/components/stocks-dashboard/stocks-dashboard.tsx"
```

```tsx showLineNumbers
<StocksDashboard />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { StocksDashboard } from "@uitripled/react-shadcn/src/components/components/stocks-dashboard/stocks-dashboard.tsx"

export function BasicExample() {
  return (
    <StocksDashboard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Team Section Block

**Page:** [https://ui.tripled.work/components/team-section-block-baseui](https://ui.tripled.work/components/team-section-block-baseui)

```tsx
"use client"

import * as React from "react"

import { TeamSectionBlock } from "@uitripled/react-baseui/src/components/sections/team-section-block-baseui.tsx"

export function TeamSectionBlockDemo() {
  return (
    <TeamSectionBlock />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/team-section-block-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Team Section Block` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="team-section-block-baseui" title="@uitripled/react-baseui/src/components/sections/team-section-block-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { TeamSectionBlock } from "@uitripled/react-baseui/src/components/sections/team-section-block-baseui.tsx"
```

```tsx showLineNumbers
<TeamSectionBlock />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { TeamSectionBlock } from "@uitripled/react-baseui/src/components/sections/team-section-block-baseui.tsx"

export function BasicExample() {
  return (
    <TeamSectionBlock />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Team Section Block

**Page:** [https://ui.tripled.work/components/team-section-block-shadcnui](https://ui.tripled.work/components/team-section-block-shadcnui)

```tsx
"use client"

import * as React from "react"

import { TeamSectionBlock } from "@uitripled/react-shadcn/src/components/sections/team-section-block.tsx"

export function TeamSectionBlockDemo() {
  return (
    <TeamSectionBlock />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/team-section-block-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Team Section Block` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="team-section-block-shadcnui" title="@uitripled/react-shadcn/src/components/sections/team-section-block.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { TeamSectionBlock } from "@uitripled/react-shadcn/src/components/sections/team-section-block.tsx"
```

```tsx showLineNumbers
<TeamSectionBlock />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { TeamSectionBlock } from "@uitripled/react-shadcn/src/components/sections/team-section-block.tsx"

export function BasicExample() {
  return (
    <TeamSectionBlock />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Testimonials Block

**Page:** [https://ui.tripled.work/components/testimonials-block-baseui](https://ui.tripled.work/components/testimonials-block-baseui)

```tsx
"use client"

import * as React from "react"

import { TestimonialsBlock } from "@uitripled/react-baseui/src/components/sections/testimonials-block-baseui.tsx"

export function TestimonialsBlockDemo() {
  return (
    <TestimonialsBlock />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/testimonials-block-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Testimonials Block` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="testimonials-block-baseui" title="@uitripled/react-baseui/src/components/sections/testimonials-block-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { TestimonialsBlock } from "@uitripled/react-baseui/src/components/sections/testimonials-block-baseui.tsx"
```

```tsx showLineNumbers
<TestimonialsBlock />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { TestimonialsBlock } from "@uitripled/react-baseui/src/components/sections/testimonials-block-baseui.tsx"

export function BasicExample() {
  return (
    <TestimonialsBlock />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Testimonials Block

**Page:** [https://ui.tripled.work/components/testimonials-block-shadcnui](https://ui.tripled.work/components/testimonials-block-shadcnui)

```tsx
"use client"

import * as React from "react"

import { TestimonialsBlock } from "@uitripled/react-shadcn/src/components/sections/testimonials-block.tsx"

export function TestimonialsBlockDemo() {
  return (
    <TestimonialsBlock />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/testimonials-block-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Testimonials Block` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="testimonials-block-shadcnui" title="@uitripled/react-shadcn/src/components/sections/testimonials-block.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { TestimonialsBlock } from "@uitripled/react-shadcn/src/components/sections/testimonials-block.tsx"
```

```tsx showLineNumbers
<TestimonialsBlock />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { TestimonialsBlock } from "@uitripled/react-shadcn/src/components/sections/testimonials-block.tsx"

export function BasicExample() {
  return (
    <TestimonialsBlock />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Timeline Block

**Page:** [https://ui.tripled.work/components/timeline-block-baseui](https://ui.tripled.work/components/timeline-block-baseui)

```tsx
"use client"

import * as React from "react"

import { TimelineBlock } from "@uitripled/react-baseui/src/components/sections/timeline-block-baseui.tsx"

export function TimelineBlockDemo() {
  return (
    <TimelineBlock />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/timeline-block-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Timeline Block` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="timeline-block-baseui" title="@uitripled/react-baseui/src/components/sections/timeline-block-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { TimelineBlock } from "@uitripled/react-baseui/src/components/sections/timeline-block-baseui.tsx"
```

```tsx showLineNumbers
<TimelineBlock />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { TimelineBlock } from "@uitripled/react-baseui/src/components/sections/timeline-block-baseui.tsx"

export function BasicExample() {
  return (
    <TimelineBlock />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Timeline Block

**Page:** [https://ui.tripled.work/components/timeline-block-shadcnui](https://ui.tripled.work/components/timeline-block-shadcnui)

```tsx
"use client"

import * as React from "react"

import { TimelineBlock } from "@uitripled/react-shadcn/src/components/sections/timeline-block.tsx"

export function TimelineBlockDemo() {
  return (
    <TimelineBlock />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/timeline-block-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Timeline Block` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="timeline-block-shadcnui" title="@uitripled/react-shadcn/src/components/sections/timeline-block.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { TimelineBlock } from "@uitripled/react-shadcn/src/components/sections/timeline-block.tsx"
```

```tsx showLineNumbers
<TimelineBlock />
```

## Component Details

- **Category**: sections


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { TimelineBlock } from "@uitripled/react-shadcn/src/components/sections/timeline-block.tsx"

export function BasicExample() {
  return (
    <TimelineBlock />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

## Pages

### About Us Page

**Page:** [https://ui.tripled.work/components/about-us-page-shadcnui](https://ui.tripled.work/components/about-us-page-shadcnui)

```tsx
"use client"

import * as React from "react"

import { AboutUsPage } from "@uitripled/react-shadcn/src/components/page/about/about-us-page.tsx"

export function AboutUsPageDemo() {
  return (
    <AboutUsPage />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/about-us-page-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="about-us-page-shadcnui" title="@uitripled/react-shadcn/src/components/page/about/about-us-page.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { AboutUsPage } from "@uitripled/react-shadcn/src/components/page/about/about-us-page.tsx"
```

```tsx showLineNumbers
<AboutUsPage />
```

## Component Details

- **Category**: page


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { AboutUsPage } from "@uitripled/react-shadcn/src/components/page/about/about-us-page.tsx"

export function BasicExample() {
  return (
    <AboutUsPage />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Auto-Revealing Heading

**Page:** [https://ui.tripled.work/components/auto-revealing-heading-shadcnui](https://ui.tripled.work/components/auto-revealing-heading-shadcnui)

```tsx
"use client"

import * as React from "react"

import { Auto-RevealingHeading } from "@uitripled/react-shadcn/src/components/motion-core/auto-revealing-heading.tsx"

export function Auto-RevealingHeadingDemo() {
  return (
    <Auto-RevealingHeading />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/auto-revealing-heading-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="auto-revealing-heading-shadcnui" title="@uitripled/react-shadcn/src/components/motion-core/auto-revealing-heading.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { Auto-RevealingHeading } from "@uitripled/react-shadcn/src/components/motion-core/auto-revealing-heading.tsx"
```

```tsx showLineNumbers
<Auto-RevealingHeading />
```

## Component Details

- **Category**: page


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { Auto-RevealingHeading } from "@uitripled/react-shadcn/src/components/motion-core/auto-revealing-heading.tsx"

export function BasicExample() {
  return (
    <Auto-RevealingHeading />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### CTA Banner Section

**Page:** [https://ui.tripled.work/components/cta-banner-section-baseui](https://ui.tripled.work/components/cta-banner-section-baseui)

```tsx
"use client"

import * as React from "react"

import { CTABannerSection } from "@uitripled/react-baseui/src/components/sections/cta-banner-section-baseui.tsx"

export function CTABannerSectionDemo() {
  return (
    <CTABannerSection />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/cta-banner-section-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `CTA Banner Section` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="cta-banner-section-baseui" title="@uitripled/react-baseui/src/components/sections/cta-banner-section-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { CTABannerSection } from "@uitripled/react-baseui/src/components/sections/cta-banner-section-baseui.tsx"
```

```tsx showLineNumbers
<CTABannerSection />
```

## Component Details

- **Category**: page


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { CTABannerSection } from "@uitripled/react-baseui/src/components/sections/cta-banner-section-baseui.tsx"

export function BasicExample() {
  return (
    <CTABannerSection />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### CTA Banner Section

**Page:** [https://ui.tripled.work/components/cta-banner-section-shadcnui](https://ui.tripled.work/components/cta-banner-section-shadcnui)

```tsx
"use client"

import * as React from "react"

import { CTABannerSection } from "@uitripled/react-shadcn/src/components/sections/cta-banner-section.tsx"

export function CTABannerSectionDemo() {
  return (
    <CTABannerSection />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/cta-banner-section-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="cta-banner-section-shadcnui" title="@uitripled/react-shadcn/src/components/sections/cta-banner-section.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { CTABannerSection } from "@uitripled/react-shadcn/src/components/sections/cta-banner-section.tsx"
```

```tsx showLineNumbers
<CTABannerSection />
```

## Component Details

- **Category**: page


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { CTABannerSection } from "@uitripled/react-shadcn/src/components/sections/cta-banner-section.tsx"

export function BasicExample() {
  return (
    <CTABannerSection />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Dynamic Spotlight CTA

**Page:** [https://ui.tripled.work/components/dynamic-spotlight-cta-shadcnui](https://ui.tripled.work/components/dynamic-spotlight-cta-shadcnui)

```tsx
"use client"

import * as React from "react"

import { DynamicSpotlightCTA } from "@uitripled/react-shadcn/src/components/motion-core/dynamic-spotlight-cta.tsx"

export function DynamicSpotlightCTADemo() {
  return (
    <DynamicSpotlightCTA />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/dynamic-spotlight-cta-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="dynamic-spotlight-cta-shadcnui" title="@uitripled/react-shadcn/src/components/motion-core/dynamic-spotlight-cta.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { DynamicSpotlightCTA } from "@uitripled/react-shadcn/src/components/motion-core/dynamic-spotlight-cta.tsx"
```

```tsx showLineNumbers
<DynamicSpotlightCTA />
```

## Component Details

- **Category**: page


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { DynamicSpotlightCTA } from "@uitripled/react-shadcn/src/components/motion-core/dynamic-spotlight-cta.tsx"

export function BasicExample() {
  return (
    <DynamicSpotlightCTA />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### FAQ Section

**Page:** [https://ui.tripled.work/components/faq-section-baseui](https://ui.tripled.work/components/faq-section-baseui)

```tsx
"use client"

import * as React from "react"

import { FAQSection } from "@uitripled/react-baseui/src/components/sections/faq-section-baseui.tsx"

export function FAQSectionDemo() {
  return (
    <FAQSection />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/faq-section-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `FAQ Section` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="faq-section-baseui" title="@uitripled/react-baseui/src/components/sections/faq-section-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { FAQSection } from "@uitripled/react-baseui/src/components/sections/faq-section-baseui.tsx"
```

```tsx showLineNumbers
<FAQSection />
```

## Component Details

- **Category**: page


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { FAQSection } from "@uitripled/react-baseui/src/components/sections/faq-section-baseui.tsx"

export function BasicExample() {
  return (
    <FAQSection />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### FAQ Section

**Page:** [https://ui.tripled.work/components/faq-section-shadcnui](https://ui.tripled.work/components/faq-section-shadcnui)

```tsx
"use client"

import * as React from "react"

import { FAQSection } from "@uitripled/react-shadcn/src/components/sections/faq-section.tsx"

export function FAQSectionDemo() {
  return (
    <FAQSection />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/faq-section-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="faq-section-shadcnui" title="@uitripled/react-shadcn/src/components/sections/faq-section.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { FAQSection } from "@uitripled/react-shadcn/src/components/sections/faq-section.tsx"
```

```tsx showLineNumbers
<FAQSection />
```

## Component Details

- **Category**: page


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { FAQSection } from "@uitripled/react-shadcn/src/components/sections/faq-section.tsx"

export function BasicExample() {
  return (
    <FAQSection />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Feature Grid Section

**Page:** [https://ui.tripled.work/components/feature-grid-section-baseui](https://ui.tripled.work/components/feature-grid-section-baseui)

```tsx
"use client"

import * as React from "react"

import { FeatureGridSection } from "@uitripled/react-baseui/src/components/sections/feature-grid-section-baseui.tsx"

export function FeatureGridSectionDemo() {
  return (
    <FeatureGridSection />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/feature-grid-section-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Feature Grid Section` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="feature-grid-section-baseui" title="@uitripled/react-baseui/src/components/sections/feature-grid-section-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { FeatureGridSection } from "@uitripled/react-baseui/src/components/sections/feature-grid-section-baseui.tsx"
```

```tsx showLineNumbers
<FeatureGridSection />
```

## Component Details

- **Category**: page


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { FeatureGridSection } from "@uitripled/react-baseui/src/components/sections/feature-grid-section-baseui.tsx"

export function BasicExample() {
  return (
    <FeatureGridSection />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Feature Grid Section

**Page:** [https://ui.tripled.work/components/feature-grid-section-shadcnui](https://ui.tripled.work/components/feature-grid-section-shadcnui)

```tsx
"use client"

import * as React from "react"

import { FeatureGridSection } from "@uitripled/react-shadcn/src/components/sections/feature-grid-section.tsx"

export function FeatureGridSectionDemo() {
  return (
    <FeatureGridSection />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/feature-grid-section-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="feature-grid-section-shadcnui" title="@uitripled/react-shadcn/src/components/sections/feature-grid-section.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { FeatureGridSection } from "@uitripled/react-shadcn/src/components/sections/feature-grid-section.tsx"
```

```tsx showLineNumbers
<FeatureGridSection />
```

## Component Details

- **Category**: page


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { FeatureGridSection } from "@uitripled/react-shadcn/src/components/sections/feature-grid-section.tsx"

export function BasicExample() {
  return (
    <FeatureGridSection />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Hero Section

**Page:** [https://ui.tripled.work/components/hero-section-baseui](https://ui.tripled.work/components/hero-section-baseui)

```tsx
"use client"

import * as React from "react"

import { HeroSection } from "@uitripled/react-baseui/src/components/sections/hero-section-baseui.tsx"

export function HeroSectionDemo() {
  return (
    <HeroSection />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/hero-section-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Hero Section` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="hero-section-baseui" title="@uitripled/react-baseui/src/components/sections/hero-section-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { HeroSection } from "@uitripled/react-baseui/src/components/sections/hero-section-baseui.tsx"
```

```tsx showLineNumbers
<HeroSection />
```

## Component Details

- **Category**: page


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { HeroSection } from "@uitripled/react-baseui/src/components/sections/hero-section-baseui.tsx"

export function BasicExample() {
  return (
    <HeroSection />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Hero Section

**Page:** [https://ui.tripled.work/components/hero-section-shadcnui](https://ui.tripled.work/components/hero-section-shadcnui)

```tsx
"use client"

import * as React from "react"

import { HeroSection } from "@uitripled/react-shadcn/src/components/sections/hero-section.tsx"

export function HeroSectionDemo() {
  return (
    <HeroSection />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/hero-section-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="hero-section-shadcnui" title="@uitripled/react-shadcn/src/components/sections/hero-section.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { HeroSection } from "@uitripled/react-shadcn/src/components/sections/hero-section.tsx"
```

```tsx showLineNumbers
<HeroSection />
```

## Component Details

- **Category**: page


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { HeroSection } from "@uitripled/react-shadcn/src/components/sections/hero-section.tsx"

export function BasicExample() {
  return (
    <HeroSection />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Pricing Section

**Page:** [https://ui.tripled.work/components/pricing-section-baseui](https://ui.tripled.work/components/pricing-section-baseui)

```tsx
"use client"

import * as React from "react"

import { PricingSection } from "@uitripled/react-baseui/src/components/sections/pricing-section-baseui.tsx"

export function PricingSectionDemo() {
  return (
    <PricingSection />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/pricing-section-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Pricing Section` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="pricing-section-baseui" title="@uitripled/react-baseui/src/components/sections/pricing-section-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { PricingSection } from "@uitripled/react-baseui/src/components/sections/pricing-section-baseui.tsx"
```

```tsx showLineNumbers
<PricingSection />
```

## Component Details

- **Category**: page


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { PricingSection } from "@uitripled/react-baseui/src/components/sections/pricing-section-baseui.tsx"

export function BasicExample() {
  return (
    <PricingSection />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Pricing Section

**Page:** [https://ui.tripled.work/components/pricing-section-shadcnui](https://ui.tripled.work/components/pricing-section-shadcnui)

```tsx
"use client"

import * as React from "react"

import { PricingSection } from "@uitripled/react-shadcn/src/components/sections/pricing-section.tsx"

export function PricingSectionDemo() {
  return (
    <PricingSection />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/pricing-section-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="pricing-section-shadcnui" title="@uitripled/react-shadcn/src/components/sections/pricing-section.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { PricingSection } from "@uitripled/react-shadcn/src/components/sections/pricing-section.tsx"
```

```tsx showLineNumbers
<PricingSection />
```

## Component Details

- **Category**: page


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { PricingSection } from "@uitripled/react-shadcn/src/components/sections/pricing-section.tsx"

export function BasicExample() {
  return (
    <PricingSection />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Profile Page

**Page:** [https://ui.tripled.work/components/profile-page-shadcnui](https://ui.tripled.work/components/profile-page-shadcnui)

```tsx
"use client"

import * as React from "react"

import { ProfilePage } from "@uitripled/react-shadcn/src/components/components/profile/profile-page.tsx"

export function ProfilePageDemo() {
  return (
    <ProfilePage />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/profile-page-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="profile-page-shadcnui" title="@uitripled/react-shadcn/src/components/components/profile/profile-page.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { ProfilePage } from "@uitripled/react-shadcn/src/components/components/profile/profile-page.tsx"
```

```tsx showLineNumbers
<ProfilePage />
```

## Component Details

- **Category**: page


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { ProfilePage } from "@uitripled/react-shadcn/src/components/components/profile/profile-page.tsx"

export function BasicExample() {
  return (
    <ProfilePage />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Scroll Progress Tracker

**Page:** [https://ui.tripled.work/components/scroll-progress-tracker-shadcnui](https://ui.tripled.work/components/scroll-progress-tracker-shadcnui)

```tsx
"use client"

import * as React from "react"

import { ScrollProgressTracker } from "@uitripled/react-shadcn/src/components/motion-core/scroll-progress-tracker.tsx"

export function ScrollProgressTrackerDemo() {
  return (
    <ScrollProgressTracker />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/scroll-progress-tracker-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="scroll-progress-tracker-shadcnui" title="@uitripled/react-shadcn/src/components/motion-core/scroll-progress-tracker.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { ScrollProgressTracker } from "@uitripled/react-shadcn/src/components/motion-core/scroll-progress-tracker.tsx"
```

```tsx showLineNumbers
<ScrollProgressTracker />
```

## Component Details

- **Category**: page


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { ScrollProgressTracker } from "@uitripled/react-shadcn/src/components/motion-core/scroll-progress-tracker.tsx"

export function BasicExample() {
  return (
    <ScrollProgressTracker />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Scroll Reveal

**Page:** [https://ui.tripled.work/components/scroll-reveal-baseui](https://ui.tripled.work/components/scroll-reveal-baseui)

```tsx
"use client"

import * as React from "react"

import { ScrollReveal } from "@uitripled/react-baseui/src/components/sections/scroll-reveal-baseui.tsx"

export function ScrollRevealDemo() {
  return (
    <ScrollReveal />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/scroll-reveal-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Scroll Reveal` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="scroll-reveal-baseui" title="@uitripled/react-baseui/src/components/sections/scroll-reveal-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { ScrollReveal } from "@uitripled/react-baseui/src/components/sections/scroll-reveal-baseui.tsx"
```

```tsx showLineNumbers
<ScrollReveal />
```

## Component Details

- **Category**: page


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { ScrollReveal } from "@uitripled/react-baseui/src/components/sections/scroll-reveal-baseui.tsx"

export function BasicExample() {
  return (
    <ScrollReveal />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Scroll Reveal

**Page:** [https://ui.tripled.work/components/scroll-reveal-shadcnui](https://ui.tripled.work/components/scroll-reveal-shadcnui)

```tsx
"use client"

import * as React from "react"

import { ScrollReveal } from "@uitripled/react-shadcn/src/components/sections/scroll-reveal.tsx"

export function ScrollRevealDemo() {
  return (
    <ScrollReveal />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/scroll-reveal-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="scroll-reveal-shadcnui" title="@uitripled/react-shadcn/src/components/sections/scroll-reveal.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { ScrollReveal } from "@uitripled/react-shadcn/src/components/sections/scroll-reveal.tsx"
```

```tsx showLineNumbers
<ScrollReveal />
```

## Component Details

- **Category**: page


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { ScrollReveal } from "@uitripled/react-shadcn/src/components/sections/scroll-reveal.tsx"

export function BasicExample() {
  return (
    <ScrollReveal />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Staggered Text Hero

**Page:** [https://ui.tripled.work/components/staggered-hero-shadcnui](https://ui.tripled.work/components/staggered-hero-shadcnui)

```tsx
"use client"

import * as React from "react"

import { StaggeredTextHero } from "@uitripled/react-shadcn/src/components/page/hero/staggered-text.tsx"

export function StaggeredTextHeroDemo() {
  return (
    <StaggeredTextHero />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/staggered-hero-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="staggered-hero-shadcnui" title="@uitripled/react-shadcn/src/components/page/hero/staggered-text.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { StaggeredTextHero } from "@uitripled/react-shadcn/src/components/page/hero/staggered-text.tsx"
```

```tsx showLineNumbers
<StaggeredTextHero />
```

## Component Details

- **Category**: page


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { StaggeredTextHero } from "@uitripled/react-shadcn/src/components/page/hero/staggered-text.tsx"

export function BasicExample() {
  return (
    <StaggeredTextHero />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Stats Section

**Page:** [https://ui.tripled.work/components/stats-section-baseui](https://ui.tripled.work/components/stats-section-baseui)

```tsx
"use client"

import * as React from "react"

import { StatsSection } from "@uitripled/react-baseui/src/components/sections/stats-section-baseui.tsx"

export function StatsSectionDemo() {
  return (
    <StatsSection />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/stats-section-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Stats Section` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="stats-section-baseui" title="@uitripled/react-baseui/src/components/sections/stats-section-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { StatsSection } from "@uitripled/react-baseui/src/components/sections/stats-section-baseui.tsx"
```

```tsx showLineNumbers
<StatsSection />
```

## Component Details

- **Category**: page


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { StatsSection } from "@uitripled/react-baseui/src/components/sections/stats-section-baseui.tsx"

export function BasicExample() {
  return (
    <StatsSection />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Stats Section

**Page:** [https://ui.tripled.work/components/stats-section-shadcnui](https://ui.tripled.work/components/stats-section-shadcnui)

```tsx
"use client"

import * as React from "react"

import { StatsSection } from "@uitripled/react-shadcn/src/components/sections/stats-section.tsx"

export function StatsSectionDemo() {
  return (
    <StatsSection />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/stats-section-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="stats-section-shadcnui" title="@uitripled/react-shadcn/src/components/sections/stats-section.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { StatsSection } from "@uitripled/react-shadcn/src/components/sections/stats-section.tsx"
```

```tsx showLineNumbers
<StatsSection />
```

## Component Details

- **Category**: page


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { StatsSection } from "@uitripled/react-shadcn/src/components/sections/stats-section.tsx"

export function BasicExample() {
  return (
    <StatsSection />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Testimonial Section

**Page:** [https://ui.tripled.work/components/testimonial-section-baseui](https://ui.tripled.work/components/testimonial-section-baseui)

```tsx
"use client"

import * as React from "react"

import { TestimonialSection } from "@uitripled/react-baseui/src/components/sections/testimonial-section-baseui.tsx"

export function TestimonialSectionDemo() {
  return (
    <TestimonialSection />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/testimonial-section-baseui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Add the required components to your project.</Step>

The `Testimonial Section` component uses the following components. Make sure you have them installed in your project.

- button

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="testimonial-section-baseui" title="@uitripled/react-baseui/src/components/sections/testimonial-section-baseui.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { TestimonialSection } from "@uitripled/react-baseui/src/components/sections/testimonial-section-baseui.tsx"
```

```tsx showLineNumbers
<TestimonialSection />
```

## Component Details

- **Category**: page


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

**UI Components**:
- button

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { TestimonialSection } from "@uitripled/react-baseui/src/components/sections/testimonial-section-baseui.tsx"

export function BasicExample() {
  return (
    <TestimonialSection />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

- [button](/docs/components/button)

---

### Testimonial Section

**Page:** [https://ui.tripled.work/components/testimonial-section-shadcnui](https://ui.tripled.work/components/testimonial-section-shadcnui)

```tsx
"use client"

import * as React from "react"

import { TestimonialSection } from "@uitripled/react-shadcn/src/components/sections/testimonial-section.tsx"

export function TestimonialSectionDemo() {
  return (
    <TestimonialSection />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/testimonial-section-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="testimonial-section-shadcnui" title="@uitripled/react-shadcn/src/components/sections/testimonial-section.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { TestimonialSection } from "@uitripled/react-shadcn/src/components/sections/testimonial-section.tsx"
```

```tsx showLineNumbers
<TestimonialSection />
```

## Component Details

- **Category**: page


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { TestimonialSection } from "@uitripled/react-shadcn/src/components/sections/testimonial-section.tsx"

export function BasicExample() {
  return (
    <TestimonialSection />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Toast Notification

**Page:** [https://ui.tripled.work/components/toast-notification-shadcnui](https://ui.tripled.work/components/toast-notification-shadcnui)

```tsx
"use client"

import * as React from "react"

import { ToastNotification } from "@uitripled/react-shadcn/src/components/page/notifications/toast-notification.tsx"

export function ToastNotificationDemo() {
  return (
    <ToastNotification />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/toast-notification-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="toast-notification-shadcnui" title="@uitripled/react-shadcn/src/components/page/notifications/toast-notification.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { ToastNotification } from "@uitripled/react-shadcn/src/components/page/notifications/toast-notification.tsx"
```

```tsx showLineNumbers
<ToastNotification />
```

## Component Details

- **Category**: page


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { ToastNotification } from "@uitripled/react-shadcn/src/components/page/notifications/toast-notification.tsx"

export function BasicExample() {
  return (
    <ToastNotification />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

## UI Elements

### Accessible Cash Flow Chart

**Page:** [https://ui.tripled.work/components/cash-flow-chart](https://ui.tripled.work/components/cash-flow-chart)

```tsx
"use client"

import * as React from "react"

import { AccessibleCashFlowChart } from "@uitripled/react-shadcn/src/components/data/charts/cash-flow-chart.tsx"

export function AccessibleCashFlowChartDemo() {
  return (
    <AccessibleCashFlowChart />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/cash-flow-chart
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="cash-flow-chart" title="@uitripled/react-shadcn/src/components/data/charts/cash-flow-chart.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { AccessibleCashFlowChart } from "@uitripled/react-shadcn/src/components/data/charts/cash-flow-chart.tsx"
```

```tsx showLineNumbers
<AccessibleCashFlowChart />
```

## Component Details

- **Category**: data


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { AccessibleCashFlowChart } from "@uitripled/react-shadcn/src/components/data/charts/cash-flow-chart.tsx"

export function BasicExample() {
  return (
    <AccessibleCashFlowChart />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### AI Unlock Animation

**Page:** [https://ui.tripled.work/components/ai-unlock-animation-shadcnui](https://ui.tripled.work/components/ai-unlock-animation-shadcnui)

```tsx
"use client"

import * as React from "react"

import { AIUnlockAnimation } from "@uitripled/react-shadcn/src/components/motion-core/ai-unlock-animation.tsx"

export function AIUnlockAnimationDemo() {
  return (
    <AIUnlockAnimation />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/ai-unlock-animation-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="ai-unlock-animation-shadcnui" title="@uitripled/react-shadcn/src/components/motion-core/ai-unlock-animation.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { AIUnlockAnimation } from "@uitripled/react-shadcn/src/components/motion-core/ai-unlock-animation.tsx"
```

```tsx showLineNumbers
<AIUnlockAnimation />
```

## Component Details

- **Category**: micro


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { AIUnlockAnimation } from "@uitripled/react-shadcn/src/components/motion-core/ai-unlock-animation.tsx"

export function BasicExample() {
  return (
    <AIUnlockAnimation />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Animated Progress Bar

**Page:** [https://ui.tripled.work/components/animated-progress-shadcnui](https://ui.tripled.work/components/animated-progress-shadcnui)

```tsx
"use client"

import * as React from "react"

import { AnimatedProgressBar } from "@uitripled/react-shadcn/src/components/data/progress/animated-progress.tsx"

export function AnimatedProgressBarDemo() {
  return (
    <AnimatedProgressBar />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/animated-progress-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="animated-progress-shadcnui" title="@uitripled/react-shadcn/src/components/data/progress/animated-progress.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { AnimatedProgressBar } from "@uitripled/react-shadcn/src/components/data/progress/animated-progress.tsx"
```

```tsx showLineNumbers
<AnimatedProgressBar />
```

## Component Details

- **Category**: data


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { AnimatedProgressBar } from "@uitripled/react-shadcn/src/components/data/progress/animated-progress.tsx"

export function BasicExample() {
  return (
    <AnimatedProgressBar />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Animated Quote Block

**Page:** [https://ui.tripled.work/components/animated-quote-block-shadcnui](https://ui.tripled.work/components/animated-quote-block-shadcnui)

```tsx
"use client"

import * as React from "react"

import { AnimatedQuoteBlock } from "@uitripled/react-shadcn/src/components/motion-core/animated-quote-block.tsx"

export function AnimatedQuoteBlockDemo() {
  return (
    <AnimatedQuoteBlock />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/animated-quote-block-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="animated-quote-block-shadcnui" title="@uitripled/react-shadcn/src/components/motion-core/animated-quote-block.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { AnimatedQuoteBlock } from "@uitripled/react-shadcn/src/components/motion-core/animated-quote-block.tsx"
```

```tsx showLineNumbers
<AnimatedQuoteBlock />
```

## Component Details

- **Category**: decorative


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { AnimatedQuoteBlock } from "@uitripled/react-shadcn/src/components/motion-core/animated-quote-block.tsx"

export function BasicExample() {
  return (
    <AnimatedQuoteBlock />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Dynamic Tag Cloud

**Page:** [https://ui.tripled.work/components/dynamic-tag-cloud-shadcnui](https://ui.tripled.work/components/dynamic-tag-cloud-shadcnui)

```tsx
"use client"

import * as React from "react"

import { DynamicTagCloud } from "@uitripled/react-shadcn/src/components/motion-core/dynamic-tag-cloud.tsx"

export function DynamicTagCloudDemo() {
  return (
    <DynamicTagCloud />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/dynamic-tag-cloud-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="dynamic-tag-cloud-shadcnui" title="@uitripled/react-shadcn/src/components/motion-core/dynamic-tag-cloud.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { DynamicTagCloud } from "@uitripled/react-shadcn/src/components/motion-core/dynamic-tag-cloud.tsx"
```

```tsx showLineNumbers
<DynamicTagCloud />
```

## Component Details

- **Category**: decorative


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { DynamicTagCloud } from "@uitripled/react-shadcn/src/components/motion-core/dynamic-tag-cloud.tsx"

export function BasicExample() {
  return (
    <DynamicTagCloud />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Elastic Toggle Switch

**Page:** [https://ui.tripled.work/components/elastic-switch-shadcnui](https://ui.tripled.work/components/elastic-switch-shadcnui)

```tsx
"use client"

import * as React from "react"

import { ElasticToggleSwitch } from "@uitripled/react-shadcn/src/components/micro/toggles/elastic-switch.tsx"

export function ElasticToggleSwitchDemo() {
  return (
    <ElasticToggleSwitch />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/elastic-switch-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="elastic-switch-shadcnui" title="@uitripled/react-shadcn/src/components/micro/toggles/elastic-switch.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { ElasticToggleSwitch } from "@uitripled/react-shadcn/src/components/micro/toggles/elastic-switch.tsx"
```

```tsx showLineNumbers
<ElasticToggleSwitch />
```

## Component Details

- **Category**: micro


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { ElasticToggleSwitch } from "@uitripled/react-shadcn/src/components/micro/toggles/elastic-switch.tsx"

export function BasicExample() {
  return (
    <ElasticToggleSwitch />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Floating Gradient

**Page:** [https://ui.tripled.work/components/floating-gradient-shadcnui](https://ui.tripled.work/components/floating-gradient-shadcnui)

```tsx
"use client"

import * as React from "react"

import { FloatingGradient } from "@uitripled/react-shadcn/src/components/decorative/background/floating-gradient.tsx"

export function FloatingGradientDemo() {
  return (
    <FloatingGradient />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/floating-gradient-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="floating-gradient-shadcnui" title="@uitripled/react-shadcn/src/components/decorative/background/floating-gradient.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { FloatingGradient } from "@uitripled/react-shadcn/src/components/decorative/background/floating-gradient.tsx"
```

```tsx showLineNumbers
<FloatingGradient />
```

## Component Details

- **Category**: decorative


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { FloatingGradient } from "@uitripled/react-shadcn/src/components/decorative/background/floating-gradient.tsx"

export function BasicExample() {
  return (
    <FloatingGradient />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Floating Info Panel

**Page:** [https://ui.tripled.work/components/floating-info-panel-shadcnui](https://ui.tripled.work/components/floating-info-panel-shadcnui)

```tsx
"use client"

import * as React from "react"

import { FloatingInfoPanel } from "@uitripled/react-shadcn/src/components/motion-core/floating-info-panel.tsx"

export function FloatingInfoPanelDemo() {
  return (
    <FloatingInfoPanel />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/floating-info-panel-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="floating-info-panel-shadcnui" title="@uitripled/react-shadcn/src/components/motion-core/floating-info-panel.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { FloatingInfoPanel } from "@uitripled/react-shadcn/src/components/motion-core/floating-info-panel.tsx"
```

```tsx showLineNumbers
<FloatingInfoPanel />
```

## Component Details

- **Category**: decorative


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { FloatingInfoPanel } from "@uitripled/react-shadcn/src/components/motion-core/floating-info-panel.tsx"

export function BasicExample() {
  return (
    <FloatingInfoPanel />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Folder Animation

**Page:** [https://ui.tripled.work/components/folder-animation](https://ui.tripled.work/components/folder-animation)

```tsx
"use client"

import * as React from "react"

import { FolderAnimation } from "@uitripled/react-carbon/src/components/native/folder-animation-carbon.tsx"

export function FolderAnimationDemo() {
  return (
    <FolderAnimation />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/folder-animation
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="folder-animation" title="@uitripled/react-carbon/src/components/native/folder-animation-carbon.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { FolderAnimation } from "@uitripled/react-carbon/src/components/native/folder-animation-carbon.tsx"
```

```tsx showLineNumbers
<FolderAnimation />
```

## Component Details

- **Category**: decorative


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { FolderAnimation } from "@uitripled/react-carbon/src/components/native/folder-animation-carbon.tsx"

export function BasicExample() {
  return (
    <FolderAnimation />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Gradient Animation

**Page:** [https://ui.tripled.work/components/gradient-animation-shadcnui](https://ui.tripled.work/components/gradient-animation-shadcnui)

```tsx
"use client"

import * as React from "react"

import { GradientAnimation } from "@uitripled/react-shadcn/src/components/decorative/backgrounds/gradient-animation.tsx"

export function GradientAnimationDemo() {
  return (
    <GradientAnimation />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/gradient-animation-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="gradient-animation-shadcnui" title="@uitripled/react-shadcn/src/components/decorative/backgrounds/gradient-animation.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { GradientAnimation } from "@uitripled/react-shadcn/src/components/decorative/backgrounds/gradient-animation.tsx"
```

```tsx showLineNumbers
<GradientAnimation />
```

## Component Details

- **Category**: decorative


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { GradientAnimation } from "@uitripled/react-shadcn/src/components/decorative/backgrounds/gradient-animation.tsx"

export function BasicExample() {
  return (
    <GradientAnimation />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Heart Favorite

**Page:** [https://ui.tripled.work/components/heart-favorite-shadcnui](https://ui.tripled.work/components/heart-favorite-shadcnui)

```tsx
"use client"

import * as React from "react"

import { HeartFavorite } from "@uitripled/react-shadcn/src/components/micro/icons/heart-favorite.tsx"

export function HeartFavoriteDemo() {
  return (
    <HeartFavorite />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/heart-favorite-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="heart-favorite-shadcnui" title="@uitripled/react-shadcn/src/components/micro/icons/heart-favorite.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { HeartFavorite } from "@uitripled/react-shadcn/src/components/micro/icons/heart-favorite.tsx"
```

```tsx showLineNumbers
<HeartFavorite />
```

## Component Details

- **Category**: micro


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `lucide-react`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { HeartFavorite } from "@uitripled/react-shadcn/src/components/micro/icons/heart-favorite.tsx"

export function BasicExample() {
  return (
    <HeartFavorite />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Holographic Wall

**Page:** [https://ui.tripled.work/components/holographic-wall-shadcnui](https://ui.tripled.work/components/holographic-wall-shadcnui)

```tsx
"use client"

import * as React from "react"

import { HolographicWall } from "@uitripled/react-shadcn/src/components/motion-core/holographic-wall.tsx"

export function HolographicWallDemo() {
  return (
    <HolographicWall />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/holographic-wall-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="holographic-wall-shadcnui" title="@uitripled/react-shadcn/src/components/motion-core/holographic-wall.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { HolographicWall } from "@uitripled/react-shadcn/src/components/motion-core/holographic-wall.tsx"
```

```tsx showLineNumbers
<HolographicWall />
```

## Component Details

- **Category**: decorative


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { HolographicWall } from "@uitripled/react-shadcn/src/components/motion-core/holographic-wall.tsx"

export function BasicExample() {
  return (
    <HolographicWall />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Liquid Cursor

**Page:** [https://ui.tripled.work/components/liquid-cursor-shadcnui](https://ui.tripled.work/components/liquid-cursor-shadcnui)

```tsx
"use client"

import * as React from "react"

import { LiquidCursor } from "@uitripled/react-shadcn/src/components/liquid-cursor.tsx"

export function LiquidCursorDemo() {
  return (
    <LiquidCursor />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/liquid-cursor-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="liquid-cursor-shadcnui" title="@uitripled/react-shadcn/src/components/liquid-cursor.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { LiquidCursor } from "@uitripled/react-shadcn/src/components/liquid-cursor.tsx"
```

```tsx showLineNumbers
<LiquidCursor />
```

## Component Details

- **Category**: decorative


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { LiquidCursor } from "@uitripled/react-shadcn/src/components/liquid-cursor.tsx"

export function BasicExample() {
  return (
    <LiquidCursor />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Mood Gradient Button

**Page:** [https://ui.tripled.work/components/mood-gradient-button-shadcnui](https://ui.tripled.work/components/mood-gradient-button-shadcnui)

```tsx
"use client"

import * as React from "react"

import { MoodGradientButton } from "@uitripled/react-shadcn/src/components/motion-core/mood-gradient-button.tsx"

export function MoodGradientButtonDemo() {
  return (
    <MoodGradientButton />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/mood-gradient-button-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="mood-gradient-button-shadcnui" title="@uitripled/react-shadcn/src/components/motion-core/mood-gradient-button.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { MoodGradientButton } from "@uitripled/react-shadcn/src/components/motion-core/mood-gradient-button.tsx"
```

```tsx showLineNumbers
<MoodGradientButton />
```

## Component Details

- **Category**: micro


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { MoodGradientButton } from "@uitripled/react-shadcn/src/components/motion-core/mood-gradient-button.tsx"

export function BasicExample() {
  return (
    <MoodGradientButton />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Preview Details Card

**Page:** [https://ui.tripled.work/components/preview-details-card-shadcnui](https://ui.tripled.work/components/preview-details-card-shadcnui)

```tsx
"use client"

import * as React from "react"

import { PreviewDetailsCard } from "@uitripled/react-shadcn/src/components/micro/links/preview-details-card.tsx"

export function PreviewDetailsCardDemo() {
  return (
    <PreviewDetailsCard />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/preview-details-card-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="preview-details-card-shadcnui" title="@uitripled/react-shadcn/src/components/micro/links/preview-details-card.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { PreviewDetailsCard } from "@uitripled/react-shadcn/src/components/micro/links/preview-details-card.tsx"
```

```tsx showLineNumbers
<PreviewDetailsCard />
```

## Component Details

- **Category**: micro


### Technical Specifications

**Dependencies**:
- `react`

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { PreviewDetailsCard } from "@uitripled/react-shadcn/src/components/micro/links/preview-details-card.tsx"

export function BasicExample() {
  return (
    <PreviewDetailsCard />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Reactive Background Grid

**Page:** [https://ui.tripled.work/components/reactive-background-grid-shadcnui](https://ui.tripled.work/components/reactive-background-grid-shadcnui)

```tsx
"use client"

import * as React from "react"

import { ReactiveBackgroundGrid } from "@uitripled/react-shadcn/src/components/motion-core/reactive-background-grid.tsx"

export function ReactiveBackgroundGridDemo() {
  return (
    <ReactiveBackgroundGrid />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/reactive-background-grid-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="reactive-background-grid-shadcnui" title="@uitripled/react-shadcn/src/components/motion-core/reactive-background-grid.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { ReactiveBackgroundGrid } from "@uitripled/react-shadcn/src/components/motion-core/reactive-background-grid.tsx"
```

```tsx showLineNumbers
<ReactiveBackgroundGrid />
```

## Component Details

- **Category**: decorative


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { ReactiveBackgroundGrid } from "@uitripled/react-shadcn/src/components/motion-core/reactive-background-grid.tsx"

export function BasicExample() {
  return (
    <ReactiveBackgroundGrid />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Ripple Click Effect

**Page:** [https://ui.tripled.work/components/ripple-click-button-shadcnui](https://ui.tripled.work/components/ripple-click-button-shadcnui)

```tsx
"use client"

import * as React from "react"

import { RippleClickEffect } from "@uitripled/react-shadcn/src/components/micro/buttons/ripple-click.tsx"

export function RippleClickEffectDemo() {
  return (
    <RippleClickEffect />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/ripple-click-button-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="ripple-click-button-shadcnui" title="@uitripled/react-shadcn/src/components/micro/buttons/ripple-click.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { RippleClickEffect } from "@uitripled/react-shadcn/src/components/micro/buttons/ripple-click.tsx"
```

```tsx showLineNumbers
<RippleClickEffect />
```

## Component Details

- **Category**: micro


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { RippleClickEffect } from "@uitripled/react-shadcn/src/components/micro/buttons/ripple-click.tsx"

export function BasicExample() {
  return (
    <RippleClickEffect />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Scale Hover Button

**Page:** [https://ui.tripled.work/components/scale-hover-button-shadcnui](https://ui.tripled.work/components/scale-hover-button-shadcnui)

```tsx
"use client"

import * as React from "react"

import { ScaleHoverButton } from "@uitripled/react-shadcn/src/components/micro/buttons/scale-hover.tsx"

export function ScaleHoverButtonDemo() {
  return (
    <ScaleHoverButton />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/scale-hover-button-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="scale-hover-button-shadcnui" title="@uitripled/react-shadcn/src/components/micro/buttons/scale-hover.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { ScaleHoverButton } from "@uitripled/react-shadcn/src/components/micro/buttons/scale-hover.tsx"
```

```tsx showLineNumbers
<ScaleHoverButton />
```

## Component Details

- **Category**: micro


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { ScaleHoverButton } from "@uitripled/react-shadcn/src/components/micro/buttons/scale-hover.tsx"

export function BasicExample() {
  return (
    <ScaleHoverButton />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Shimmer Button

**Page:** [https://ui.tripled.work/components/shimmer-button-shadcnui](https://ui.tripled.work/components/shimmer-button-shadcnui)

```tsx
"use client"

import * as React from "react"

import { ShimmerButton } from "@uitripled/react-shadcn/src/components/micro/buttons/shimmer-button.tsx"

export function ShimmerButtonDemo() {
  return (
    <ShimmerButton />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/shimmer-button-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="shimmer-button-shadcnui" title="@uitripled/react-shadcn/src/components/micro/buttons/shimmer-button.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { ShimmerButton } from "@uitripled/react-shadcn/src/components/micro/buttons/shimmer-button.tsx"
```

```tsx showLineNumbers
<ShimmerButton />
```

## Component Details

- **Category**: micro


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

This component is built on top of **shadcn/ui** component primitives.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { ShimmerButton } from "@uitripled/react-shadcn/src/components/micro/buttons/shimmer-button.tsx"

export function BasicExample() {
  return (
    <ShimmerButton />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

### Spotlight Section

**Page:** [https://ui.tripled.work/components/spotlight-section-shadcnui](https://ui.tripled.work/components/spotlight-section-shadcnui)

```tsx
"use client"

import * as React from "react"

import { SpotlightSection } from "@uitripled/react-shadcn/src/components/motion-core/spotlight-section.tsx"

export function SpotlightSectionDemo() {
  return (
    <SpotlightSection />
  )
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @uitripled/spotlight-section-shadcnui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="spotlight-section-shadcnui" title="@uitripled/react-shadcn/src/components/motion-core/spotlight-section.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```tsx showLineNumbers
import { SpotlightSection } from "@uitripled/react-shadcn/src/components/motion-core/spotlight-section.tsx"
```

```tsx showLineNumbers
<SpotlightSection />
```

## Component Details

- **Category**: decorative


### Technical Specifications

**Dependencies**:
- `framer-motion`
- `react`

This component uses **Framer Motion** for animations and motion effects.

## Customization

This component can be customized by modifying the following:

- **Styling**: The component uses Tailwind CSS for styling. Customize colors, spacing, and other design tokens through Tailwind classes.
- **Props**: Pass custom props to configure the component's behavior and appearance.
- **Variants**: Create custom variants by extending the component's base styles.

## Accessibility

The component follows accessibility best practices:

- Proper ARIA labels and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management

## Examples

### Basic Example

```tsx
"use client"

import * as React from "react"

import { SpotlightSection } from "@uitripled/react-shadcn/src/components/motion-core/spotlight-section.tsx"

export function BasicExample() {
  return (
    <SpotlightSection />
  )
}
```

## API Reference

This component is part of the UI TripleD component library, a collection of production-ready components built with Framer Motion, shadcn/ui, and Tailwind CSS.

## Best Practices

1. **Performance**: Consider lazy loading if used in large lists or below-the-fold content.
2. **Theming**: Ensure your theme configuration includes the necessary CSS variables.
3. **Testing**: Test keyboard navigation and screen reader compatibility.
4. **Customization**: Use props for configuration rather than modifying source code.

## Related Components

No related components.

---

## Optional

- [Framer Motion Docs](https://www.framer.com/motion/): Animation library used by all components
- [shadcn/ui Docs](https://ui.shadcn.com/docs): Component primitives that shadcn variants build on
- [Base UI Docs](https://base-ui.com/): Headless component primitives that Base UI variants build on
- [Tailwind CSS v4 Docs](https://tailwindcss.com/docs): Utility-first CSS framework used for styling