Joly UI

Joly UI Banner

License
[blocked]

A collection of modern, accessible, and animated React components used in Joly UI.
Built for and compatible with Next.js.

· · Contributing [blocked] ·

✨ Features

  • Beautifully Designed: Crafted with attention to detail and aesthetics.
  • Performance First: Built on top of framer-motion for buttery smooth 60fps animations.
  • Accessible: Follows WAI-ARIA patterns for inclusivity.
  • Customizable: Built with Tailwind CSS, giving you full control over styling.
  • Copy Paste: The "Registry" pattern allows you to own your code.
  • Type Safe: Written in TypeScript with comprehensive type definitions.

🚀 Getting Started

Joly UI is designed to be used as a copy-paste component library, similar to shadcn/ui.

Prerequisites

  • React 18+
  • Tailwind CSS
  • Framer Motion (for animations)
  • Lucide React (for icons)

Installation

  1. Visit the Documentation: Go to to browse the catalog.
  2. Select a Component: Choose the component you want to use.
  3. Copy the Code: Copy the component code directly into your project (usually components/ui).
  4. Add Dependencies: Install any required dependencies listed in the docs.
bash
pnpm add framer-motion lucide-react clsx tailwind-merge

💻 Development

This repository is a monorepo managed by and .

Prerequisites

  • Node.js 18+
  • PNPM (v9+)

Setup

  1. Clone the repository:

    bash
    git clone https://github.com/johuniq/jolyui.gitcd jolyui

  2. Install dependencies:

    bash
    pnpm install

  3. Start the development server:

    bash
    pnpm dev

    This will start the documentation site at http://localhost:3000.

🤝 Contributing

We welcome contributions! Whether it's adding new components, fixing bugs, or improving documentation.

Please read our Contributing Guide [blocked] for details on our code of conduct and the process for submitting pull requests.

📄 License

This project is licensed under the MIT License - see the LICENSE [blocked] file for details.

Built with ❤️ by