Easy Shadcn

Installation

With the @easy-shadcn namespace configured:

pnpm dlx shadcn@latest add @easy-shadcn/modal

Or install via the full URL (zero configuration):

pnpm dlx shadcn@latest add https://easy-shadcn.vercel.app/r/modal.json

The internal @easy-shadcn/async-button dependency is installed automatically alongside modal.

Usage

Add Provider to Root Component

import { Modal } from "@easy-shadcn/react"

const App = () => {
  return (
    <Modal.Provider>
      {/* Other */}
    </Modal.Provider>
  )
}

AlertModal

Alert、Confirm

Modal

Use CommandModal

useModalHolder: can update Modal Props

Current Count: 0

import { Modal } from "@easy-shadcn/react"

<Modal
  title='Modal title'
  description='Modal description'
  trigger={<Button>Click Open</Button>}
>
  <div>Modal Content1</div>
  <div>Modal Content2</div>
  <div>Modal Content3</div>
</Modal>

import { AlertModal } from '@easy-shadcn/react';

AlertModal.alert({
  title: 'Tips',
  description: 'Alert Content',
});

Add Provider to App

import { Modal } from "@easy-shadcn/react"

const App = () => {
  <Modal.Provider>
    {/* Other */}
  </Modal.Provider>
}

import { AlertModal } from '@easy-shadcn/react';

AlertModal.alert({
  title: 'Tips',
  description: 'Alert Content',
});

API

TODO

Modal

On this page