# Introduction
URL: /docs/introduction

## Key Features

* **Composable by design** - Build complex interfaces by combining simple, focused components
* **Built on top of shadcn/ui** - Uses the same design principles and styling approach as shadcn/ui
* **Copy-paste ready** - Same installation experience as shadcn/ui components
* **Fully customizable** - Built with Tailwind CSS and designed to match your design system
* **Advanced functionality** - Complex components like data tables, media players, and drag-and-drop interfaces

## Why Joly UI?

Joly UI is a collection of fully composable components that extend shadcn/ui. These components are accessible and customizable to fit your needs. Joly UI is copy-paste ready, no complex setup or configuration required.
Every component follows WCAG guidelines, includes proper ARIA attributes, and supports keyboard navigation out of the box.

## Credits

* [Radix UI](https://radix-ui.com) - Core components.
* [shadcn/ui](https://ui.shadcn.com) - Components design and registry distribution.
* [Fumadocs](https://fumadocs.vercel.app) - Documentation.


# Button
URL: /docs/buttons/button

<ComponentTabs name="button-demo" />

## Installation

### CLI

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx shadcn@latest add "https://jolyui.dev/r/button"
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx shadcn@latest add "https://jolyui.dev/r/button"
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx shadcn@latest add "https://jolyui.dev/r/button"
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x shadcn@latest add "https://jolyui.dev/r/button"
    ```
  </CodeBlockTab>
</CodeBlockTabs>

### Manual

<Steps>
  <Step>
    Install the following dependencies:

    <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npm install @radix-ui/react-slot class-variance-authority
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm add @radix-ui/react-slot class-variance-authority
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn add @radix-ui/react-slot class-variance-authority
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun add @radix-ui/react-slot class-variance-authority
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Step>

  <Step>
    Copy and paste the following code into your project. `component/ui/button.tsx`

    <ComponentSource name="button" />
  </Step>

  <Step>
    Copy and paste the following code into your project. `globals.css`

    ```css
    @theme inline {
    --animate-shimmer: shimmer 2s linear infinite;
    --animate-shimmer-slide: shimmer-slide 2s linear infinite;

    @keyframes shimmer {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
    }

    @keyframes shimmer-slide {
    0% {
      transform: translateX(-200%);
    }
    100% {
      transform: translateX(200%);
    }
    }
    }
    ```
  </Step>
</Steps>

## Usage

```tsx
import { Button } from "@/components/ui/button";

<Button>Click me</Button>
```

## Examples

### Variants

The Button component supports multiple visual variants with modern animations and effects.

<ComponentTabs name="button-variants-demo" />

**Available variants:**

* `default` - Gradient background with hover glow and radial mouse tracking
* `destructive` - Red gradient for dangerous actions
* `outline` - Bordered with backdrop blur
* `secondary` - Secondary gradient style
* `ghost` - Transparent with subtle hover
* `link` - Text link style
* `shimmer` - Animated shimmer effect on hover
* `glow` - Purple gradient with glowing border effect

### Sizes

Choose from different sizes to match your design needs.

<ComponentTabs name="button-sizes-demo" />

### With Icons

Combine buttons with icons for enhanced visual communication.

<ComponentTabs name="button-icon-demo" />

## API Reference

### Button

A flexible button component that can be rendered as any element using the `asChild` prop.

<AutoTypeTable path="./types/docs/button.ts" name="ButtonProps" />

## Notes

* Use `variant="default"` for primary actions
* Use `variant="destructive"` for dangerous actions like delete
* Use `variant="outline"` for secondary actions
* Use `variant="ghost"` for tertiary actions
* Use `variant="link"` for navigation
* The `asChild` prop allows polymorphic rendering with Radix UI's Slot component


# Avatar Group
URL: /docs/components/avatar-group

<ComponentTabs name="avatar-group-demo" />

## Installation

### CLI

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx shadcn@latest add "https://jolyui.dev/r/avatar-group"

    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx shadcn@latest add "https://jolyui.dev/r/avatar-group"

    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx shadcn@latest add "https://jolyui.dev/r/avatar-group"

    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x shadcn@latest add "https://jolyui.dev/r/avatar-group"

    ```
  </CodeBlockTab>
</CodeBlockTabs>

### Manual

<Steps>
  <Step>
    Install the following dependencies:

    <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npm install @radix-ui/react-slot class-variance-authority
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm add @radix-ui/react-slot class-variance-authority
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn add @radix-ui/react-slot class-variance-authority
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun add @radix-ui/react-slot class-variance-authority
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Step>

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

    <ComponentSource name="avatar-group" />
  </Step>
</Steps>

## Layout

```tsx
import { AvatarGroup } from "@/components/ui/avatar-group";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

<AvatarGroup>
  <Avatar>
    <AvatarImage src="/tony-hawk.png" />
    <AvatarFallback>TH</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage src="/rodney-mullen.png" />
    <AvatarFallback>RM</AvatarFallback>
  </Avatar>
</AvatarGroup>
```

## Examples

### With Truncation

Automatically truncate long lists and show overflow indicators with the `max` prop.

<ComponentTabs name="avatar-group-truncation-demo" />

### With RTL

Support for right-to-left layouts and vertical RTL stacking.

<ComponentTabs name="avatar-group-rtl-demo" />

### With Icons

Use the Avatar Group component with icons or other elements beyond avatars.

<ComponentTabs name="avatar-group-icons-demo" />

## API Reference

### AvatarGroup

The main avatar group container that handles layout and masking of child elements.

<AutoTypeTable path="./types/docs/avatar-group.ts" name="AvatarGroupProps" />

<DataAttributesTable
  data={[
  {
    title: "[data-orientation]",
    value: ["horizontal", "vertical"],
  },
]}
/>


# GitHub Contributors
URL: /docs/components/github-contributors

<ComponentTabs name="github-contributors-demo" />

## Installation

### CLI

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx shadcn@latest add "https://jolyui.dev/r/github-contributors"
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx shadcn@latest add "https://jolyui.dev/r/github-contributors"
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx shadcn@latest add "https://jolyui.dev/r/github-contributors"
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x shadcn@latest add "https://jolyui.dev/r/github-contributors"
    ```
  </CodeBlockTab>
</CodeBlockTabs>

### Manual

<Steps>
  <Step>
    Install the following dependencies:

    <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npm install @radix-ui/react-tooltip lucide-react motion
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm add @radix-ui/react-tooltip lucide-react motion
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn add @radix-ui/react-tooltip lucide-react motion
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun add @radix-ui/react-tooltip lucide-react motion
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Step>

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

    <ComponentSource name="github-contributors" />
  </Step>
</Steps>

## Usage

```tsx
import { GitHubContributors } from "@/components/ui/github-contributors";

<GitHubContributors repo="vercel/next.js" limit={12} />
```

## API Reference

### GitHubContributors

The main component that fetches and displays GitHub contributors.

<AutoTypeTable path="./types/docs/github-contributors.ts" name="GitHubContributorsProps" />

## Notes

* The component uses GitHub's public API which has rate limits
* Without authentication: 60 requests per hour per IP
* With token: 5,000 requests per hour
* Contributors are sorted by contribution count
* The top contributor gets a special star badge
* Tooltips show detailed contribution statistics