We can not display lightning components directly to visualforce page, We have need to create a Lightning Application first with ‘ltng:outApp’ Interface and make it GLOBAL* accessible . The app uses the <aura:dependency> tag to indicate that it uses the Custom Lightning component.
Follow these steps to add lightning components to a Visualforce page:
1. Add the Lightning Components for Visualforce JavaScript library to your Visualforce page using the <apex:includeLightning/> component.
2. Create and reference a Lightning app that declares your component dependencies.
3. Write a JavaScript function that creates the component on the page using $Lightning.createComponent().