# Introduction

Explore React components, try them live, and make the source your own.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).



**Vandor UI** gives you React components you can try before adding them to your project. Explore the available options, copy a working example, and customize the installed source to match your interface.

## What You Get [#what-you-get]

* **Interactive previews:** change props and see how a component looks and behaves before installing it.
* **Working examples:** copy usage code that matches your playground settings, or start from common patterns.
* **Editable source:** keep component code in your own project and change its styles or behavior without waiting for a library update.
* **Clear references:** find installation commands, dependencies, props, and accessibility guidance on each component page.

## Try Your First Component [#try-your-first-component]

Start with the [Button](/docs/components/button). Choose from six variants and eight sizes, adjust its press feedback, and copy the configuration you want.

When you are ready, add it to a project with shadcn configured:

```bash
npx shadcn@latest add https://vandor-ui.vercel.app/r/button.json
```

Need help setting up your project? Follow the [installation guide](/docs/installation).

## Make It Your Own [#make-it-your-own]

The installed component belongs in your codebase. Use its props for everyday changes, or edit the source when your design needs something different.

Browse [all components](/docs/components) to find your next starting point.

## FAQ [#faq]

<Accordion>
  <AccordionItem value="faq-source">
    <AccordionTrigger>
      Can I change the component source?
    </AccordionTrigger>

    <AccordionContent>
      Yes. Installation copies the source into your project. You can change its styles, defaults, and behavior directly.
    </AccordionContent>
  </AccordionItem>

  <AccordionItem value="faq-frameworks">
    <AccordionTrigger>
      Can I use Vandor UI outside Next.js?
    </AccordionTrigger>

    <AccordionContent>
      Yes. Use a React project with Tailwind CSS and shadcn configured. The [installation guide](/docs/installation) links to setup instructions for your framework.
    </AccordionContent>
  </AccordionItem>

  <AccordionItem value="faq-managers">
    <AccordionTrigger>
      Can I use pnpm, yarn, or bun?
    </AccordionTrigger>

    <AccordionContent>
      Yes. Choose your package manager in the command tabs. Component pages also include dependency commands for manual setup.
    </AccordionContent>
  </AccordionItem>
</Accordion>