> ## Documentation Index
> Fetch the complete documentation index at: https://docs.builderbox.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# Component Library & Usage
***
> **Component Structure:**
>
> * Most landing and feature components are in `@/features` (e.g., `@/features/home/`, `@/features/content/`).
> * General-purpose, UI, and utility components are in `ui/` (e.g., `ui/button`, `ui/card`).
> * Usecase Based Components are in `@/components/` (e.g., `pricing-selector`, `testimonialscarousel`).
***
## Home/Landing Components (`@/features/home`)
### Hero Sections
```tsx theme={null}
import Hero from "@/features/home/hero1";
```
### Navigation
```tsx theme={null}
import Navigation from "@/features/home/navigation1";
```
### Features
```tsx theme={null}
import Features from "@/features/home/features1";
```
### Stats
```tsx theme={null}
import Stats from "@/features/home/stats1";
```
### Testimonials
```tsx theme={null}
import Testimonials from "@/features/home/testimonials1";
```
### Pricing
```tsx theme={null}
import { Pricing } from "@/features/home/shared/pricing";
```
### Call to Action
```tsx theme={null}
import CallToAction from "@/features/home/call-to-action1";
```
### Contact
```tsx theme={null}
import Contact from "@/features/home/contact1";
```
### Footer
```tsx theme={null}
import Footer from "@/features/home/footer1";
```
### Bento Grid
```tsx theme={null}
import BentoGrid from "@/features/home/bento-grid1";
```
### FAQs
```tsx theme={null}
import FAQs from "@/features/home/faqs1";
```
### Logos
```tsx theme={null}
import Logos from "@/features/home/logos2";
```
***
## General & UI Components (`ui/`)
* **UI Primitives:** All components in `ui/` (e.g., `button`, `input`, `card`, `dialog`, `dropdown-menu`, `tabs`, `table`, `badge`, `avatar`, etc.)
**Usage Example:**
```tsx theme={null}
import { Button } from "ui/button";
```
***
## Top-Level Components & Usage
Below are usage examples for each top-level component (not in `ui/` or any subfolder), organized by use case. Each component preview image appears before its code example.
***
### Testimonials Components
#### TestimonialsSingle
```tsx theme={null}
import TestimonialsSingle from "@/components/testimonials-single";
```
#### TestimonialsCarousel
```tsx theme={null}
import { TestimonialsCarousel } from "@/components/testimonials-carousel";
```
#### TestimonialsAnimated
```tsx theme={null}
import AnimatedTestimonialsDemo from "@/components/testimonials-animated";
```
#### TestimonialSingle
```tsx theme={null}
import { TestimonialSingle } from "@/components/testimonial-single";
```
#### TestimonialGrid
```tsx theme={null}
import { TestimonialGrid } from "@/components/testimonial-grid";
```
***
### Pricing Components
#### PricingSelector
```tsx theme={null}
import { PricingSelector } from "@/components/pricing-selector";
```
#### PricingWithModals
```tsx theme={null}
import PricingPage from "@/components/pricing-with-modals";
```
#### SimplePricing
```tsx theme={null}
import SimplePricing from "@/components/pricing copy";
```
***
### Feature/Content Components
#### FeatureGrid
```tsx theme={null}
import { FeatureGrid } from "@/components/feature-grid";
```
#### FeaturesCirculated
```tsx theme={null}
import Feature3 from "@/components/features-circulated";
```
#### FeaturesBentoGrid
```tsx theme={null}
import BentoGrid from "@/components/features-bento-grid";
```
#### FeaturesAccordion
```tsx theme={null}
import FeatureSteps from "@/components/features-accordion";
```
***
### Navigation & Layout Components
#### NavProjects
```tsx theme={null}
import Header from "@/components/header";
```
#### Footer
```tsx theme={null}
import Footer from "@/components/footer";
```
***
#### UsageDashboard
```tsx theme={null}
import UsageDashboard from "@/components/team-switcher";
```
#### UsageMeter
```tsx theme={null}
import { UsageMeter } from "@/components/usage-meter";
```
***
### AI & Prompt Components
#### AIConversation
```tsx theme={null}
import AIConversation from "@/components/ai-conversation";
```
#### AIAnimatedChat
```tsx theme={null}
import AIAnimatedChat from "@/components/ai-animated-chat";
```
#### PromptInput
```tsx theme={null}
import AIConversation from "@/components/ai-conversation";
alert(val)} />
```
#### ResponseStream
```tsx theme={null}
import { ResponseStream } from "@/components/response-stream";
```
***
### Utility & Miscellaneous Components
#### ButtonLead
```tsx theme={null}
import { ButtonLead } from "@/components/button-lead";
```
#### Loader
```tsx theme={null}
import Loader from "@/components/loader";
```
#### AppSidebar
```tsx theme={null}
import AppSidebar from "@/components/app-sidebar";
```
#### Providers
```tsx theme={null}
import Providers from "@/components/providers";
{children}
```
***