### Install Get Started Button

Source: https://21st.dev/community/components/ozantekin/get-started-button

Use this command to add the Get Started Button component to your project.

```bash
npx shadcn@latest add https://21st.dev/r/ozantekin/get-started-button
```

--------------------------------

### Kanban Component Usage Example

Source: https://21st.dev/community/components/sean0205/kanban

Demonstrates the basic setup and rendering of the Kanban component with initial data and event handling.

```javascript
const [columns, setColumns] = React.useState({
    todo: [
      {
        id: '1',
        title: 'Implement user authentication',
        priority: 'high',
        assignee: 'John Doe',
        assigneeAvatar: 'https://randomuser.me/api/portraits/men/1.jpg',
        dueDate: 'Sep 20, 2025',
      },
      {
        id: '2',
        title: 'Design the database schema',
        priority: 'medium',
        assignee: 'Jane Smith',
        assigneeAvatar: 'https://randomuser.me/api/portraits/women/2.jpg',
        dueDate: 'Sep 22, 2025',
      },
    ],
    inProgress: [
      {
        id: '3',
        title: 'Develop the API endpoints',
        priority: 'high',
        assignee: 'Alice Brown',
        assigneeAvatar: 'https://randomuser.me/api/portraits/women/3.jpg',
        dueDate: 'Sep 24, 2025',
      },
      {
        id: '4',
        title: 'Create the UI components',
        priority: 'medium',
        assignee: 'Bob Johnson',
        assigneeAvatar: 'https://randomuser.me/api/portraits/men/4.jpg',
        dueDate: 'Sep 23, 2025',
      },
    ],
    done: [
      {
        id: '5',
        title: 'Set up the project environment',
        priority: 'low',
        assignee: 'Charlie Green',
        assigneeAvatar: 'https://randomuser.me/api/portraits/men/5.jpg',
        dueDate: 'Sep 18, 2025',
      },
      {
        id: '6',
        title: 'Write initial tests',
        priority: 'medium',
        assignee: 'Diana Prince',
        assigneeAvatar: 'https://randomuser.me/api/portraits/women/6.jpg',
        dueDate: 'Sep 19, 2025',
      },
      {
        id: '7',
        title: 'Deploy to staging',
        priority: 'high',
        assignee: 'Eve Davis',
        assigneeAvatar: 'https://randomuser.me/api/portraits/women/6.jpg',
        dueDate: 'Sep 25, 2025',
      },
      {
        id: '8',
        title: 'Initial commit',
        priority: 'low',
        assignee: 'Frank White',
        assigneeAvatar: 'https://randomuser.me/api/portraits/men/7.jpg',
        dueDate: 'Sep 20, 2025',
      },
    ],
  });

  return (
    <div className="p-5">
      <Kanban value={columns} onValueChange={setColumns} getItemValue={(item) => item.id}>
        <KanbanBoard className="grid grid-cols-3 gap-5">
          {Object.entries(columns).map(([columnValue, tasks]) => (
            <TaskColumn key={columnValue} value={columnValue} tasks={tasks} />
          ))}
        </KanbanBoard>
        <KanbanOverlay>
          <div className="rounded-md bg-muted/60 size-full" />
        </KanbanOverlay>
      </Kanban>
    </div>
  );
}
```

--------------------------------

### Parallax Component Usage Example

Source: https://21st.dev/community/components/youcefbnm/parallax

Demonstrates how to use the Parallax, ParallaxItem, and PrallaxContainer components to create a parallax effect. Customize the animation using 'start' and 'end' props on ParallaxItem. Ensure 'motion' is installed as a dependency.

```javascript
import {
  Parallax,
  ParallaxItem,
  PrallaxContainer,
 } from "@/components/ui/parallax";
import {StaggerText } from '@/components/ui/stagger-text'
import {Button } from '@/components/ui/button'

export default function DemoOne() {
  return (<Parallax className="h-[3200px] md:h-[2000px] p-12 text-black bg-white">
  <div className="sticky top-0 h-screen space-y-4 w-full flex flex-col justify-center items-center text-center">
        <StaggerText
        className="text-5xl font-bold tracking-tighter md:w-2/3 mx-auto"
        text="Creating brands that brings people to the shop"
        direction="z"
      />

        <p
          className="max-w-prose  "
        >
          Defining the brand’s unique value proposition and positioning it in
          the market, creating a brand identity that resonates with the target
          audience.
        </p>

          <Button className="bg-indigo-600 hover:bg-indigo-400" size="lg">Get Started</Button>
      </div>

      <PrallaxContainer className="flex flex-wrap justify-between gap-4 w-full">
        <ParallaxItem
          className="w-11/12 md:w-1/4 max-h-96"
          start={200}
          end={-200}
        >
          <img
            className="size-full object-cover object-[50%_50%]"
            src="https://images.unsplash.com/photo-1508849789987-4e5333c12b78?q=80&w=1593&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            alt="street"
          />
        </ParallaxItem>

        <ParallaxItem
          className="w-11/12 md:w-1/4 max-h-96"
          start={500}
          end={20}
        >
          <img
            className="size-full object-cover object-[50%_50%]"
            src="https://images.unsplash.com/photo-1666053691228-5f2c957b1755?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            alt="street"
          />
        </ParallaxItem>
        <ParallaxItem
          className="w-11/12 md:w-1/4 max-h-96"
          start={800}
          end={50}
        >
          <img
            className="size-full object-cover object-[50%_50%]"
            src="https://images.unsplash.com/photo-1705693346612-bbc9f38f1621?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            alt="street"
          />
        </ParallaxItem>
        <ParallaxItem
          className="w-11/12 md:w-1/4 max-h-96"
          start={500}
          end={50}
        >
          <img
            className="size-full object-cover object-[50%_50%]"
            src="https://images.unsplash.com/photo-1534270804882-6b5048b1c1fc?q=80&w=706&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            alt="street"
          />
        </ParallaxItem>

        <ParallaxItem
          className="w-11/12 md:w-1/4 max-h-96"
          start={800}
          end={70}
        >
          <img
            className="size-full object-cover object-[50%_50%]"
            src="https://images.unsplash.com/photo-1643451481461-f73ff49a3f93?q=80&w=688&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            alt="street"
          />
        </ParallaxItem>
      </PrallaxContainer>
  </Parallax>
  );
}
```

--------------------------------

### Install Process Overview Component

Source: https://21st.dev/community/components/ravikatiyar162/how-we-do-it-process-overview

Use this command to install the 'How We Do It - Process Overview' component using npx.

```bash
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/how-we-do-it-process-overview
```

--------------------------------

### Install Onboarding Welcome Screen

Source: https://21st.dev/community/components/ravikatiyar/onboarding-welcome-screen/default

Use this command to install the Onboarding Welcome Screen component using shadcn.

```bash
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/onboarding-welcome-screen
```

--------------------------------

### Usage Example for Pricing Plans Component

Source: https://21st.dev/community/components/meschacirung/pricing/pricing-plans

This React component displays a set of pricing plans. It maps over a 'plans' array to render individual pricing cards, each with a name, price, description, features, and a 'Get Started' button.

```javascript
import { Button } from '@/components/ui/button'
import { Check } from 'lucide-react'
import Link from 'next/link'
import { Card, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'

export default function Pricing() {
    const plans = [
        {
            name: 'Free',
            price: '$0 / mo',
            desc: 'Per editor',
            features: ['Basic Analytics Dashboard', '5GB Cloud Storage', 'Email and Chat Support'],
            buttonVariant: 'neutral'
        },
        {
            name: 'Pro',
            price: '$19 / mo',
            desc: 'Per editor',
            features: [
                'Everything in Free Plan',
                '5GB Cloud Storage',
                'Email and Chat Support',
                'Access to Community Forum',
                'Single User Access',
                'Access to Basic Templates',
                'Mobile App Access',
                '1 Custom Report Per Month',
                'Monthly Product Updates',
                'Standard Security Features'
            ],
            buttonVariant: 'default'
        },
        {
            name: 'Pro Plus',
            price: '$49 / mo',
            desc: 'Per editor',
            features: ['Everything in Pro Plan', '5GB Cloud Storage', 'Email and Chat Support'],
            buttonVariant: 'neutral'
        }
    ]

    return (
        <div className="bg-muted relative py-16 md:py-32">
            <div className="mx-auto max-w-5xl px-6">
                <div className="mx-auto max-w-2xl text-center">
                    <h2 className="text-balance text-3xl font-bold md:text-4xl lg:text-5xl">
                        Pricing that scales with your business
                    </h2>
                    <p className="text-muted-foreground mx-auto mt-4 max-w-xl text-balance text-lg">
                        Choose the perfect plan for your needs and start optimizing your workflow today
                    </p>
                </div>

                {/* Horizontal cards container */}
                <div className="mt-12 md:mt-20 grid gap-6 md:grid-cols-3">
                    {plans.map((plan, idx) => (
                        <Card key={idx} className="flex flex-col">
                            <CardHeader className="p-8">
                                <CardTitle className="font-medium">{plan.name}</CardTitle>
                                <span className="mb-0.5 mt-2 block text-2xl font-semibold">{plan.price}</span>
                                <CardDescription className="text-sm">{plan.desc}</CardDescription>
                            </CardHeader>
                            <div className="border-y px-8 py-4">
                                <Button
                                    asChild
                                    className="w-full"
                                    variant={plan.buttonVariant as 'default' | 'neutral'}
                                >
                                    <Link href="#">Get Started</Link>
                                </Button>
                            </div>
                            <ul role="list" className="space-y-3 p-8">
                                {plan.features.map((item, i) => (
                                    <li key={i} className="flex items-center gap-2">
                                        <Check className="text-primary size-3" strokeWidth={3.5} />
                                        {item}
                                    </li>
                                ))}
                            </ul>
                        </Card>
                    ))}
                </div>
            </div>
        </div>
    )
}
```

--------------------------------

### Install Welcome Component

Source: https://21st.dev/community/components/j1zuz/welcome/default

Use this command to add the Welcome component to your project using shadcn-ui.

```bash
npx shadcn@latest add https://21st.dev/r/j1zuzz/welcome
```

--------------------------------

### Badge with Bottom Start Placement

Source: https://21st.dev/community/components/hero_ui/heroui-badge/placements

Example of a badge placed at the bottom start of an element.

```html
<div class="relative">
  <button class="inline-flex items-center px-2.5 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
    Button text
  </button>
  <span class="absolute bottom-0 left-0 -translate-x-1/2 translate-y-1/2 bg-red-100 text-red-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-red-200 dark:text-red-900">New</span>
</div>
```

--------------------------------

### Badge with Top Start Placement

Source: https://21st.dev/community/components/hero_ui/heroui-badge/placements

Example of a badge placed at the top start of an element.

```html
<div class="relative">
  <button class="inline-flex items-center px-2.5 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
    Button text
  </button>
  <span class="absolute top-0 left-0 -translate-x-1/2 -translate-y-1/2 bg-red-100 text-red-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-red-200 dark:text-red-900">New</span>
</div>
```

--------------------------------

### Install Welcome Component

Source: https://21st.dev/community/components/ravikatiyar/welcome/default

Use this command to add the Welcome component to your project using shadcn.

```bash
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/welcome
```

--------------------------------

### Install Onboarding Checklist

Source: https://21st.dev/community/components/chowlol202/onboarding-checklist

Use this command to install the Onboarding Checklist component using npx and shadcn.

```bash
npx shadcn@latest add https://21st.dev/r/chowlol202/onboarding-checklist
```

--------------------------------

### Install Get In Touch Component

Source: https://21st.dev/community/components/itsankitverma/get-in-touch

Use this command to add the 'Get In Touch' component to your project using shadcn-ui.

```bash
npx shadcn@latest add https://21st.dev/r/itsankitverma/get-in-touch
```

--------------------------------

### Install shadcn Calendar Component

Source: https://21st.dev/community/components/shadcn/calendar-with-start-end-month

Use this command to install the shadcn Calendar component with start and end month functionality.

```bash
npx shadcn@latest add https://21st.dev/r/shadcn/calendar-with-start-end-month
```

--------------------------------

### Usage Example for Onboarding Welcome Screen

Source: https://21st.dev/community/components/ravikatiyar/onboarding-welcome-screen/default

Demonstrates how to use the WelcomeScreen component in a React application. Includes handlers for button clicks and displays the component within a styled div.

```javascript
import { WelcomeScreen } from '@/components/ui/onboarding-welcome-screen';

const WelcomeScreenDemo = () => {
  // Handlers for button clicks
  const handleGetStarted = () => {
    alert('Get Started button clicked!');
  };

  const handleLogin = () => {
    alert('Login link clicked!');
  };

  return (
    <div className="relative mx-auto my-12 h-[812px] w-[975px] max-w-sm overflow-hidden rounded-3xl border shadow-lg">
      <WelcomeScreen
        imageUrl="https://images.pexels.com/photos/3225528/pexels-photo-3225528.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
        title={
          <>
            Welcome To <span className="text-primary">Doorin</span>
          </>
        }
        description="Discover and book hotels effortlessly with Doorin, your personalized hotel booking app."
        buttonText="Let\'s get started"
        onButtonClick={handleGetStarted}
        secondaryActionText={
          <>
            Already have an account? <span className="font-semibold text-primary">Login Now</span>
          </>
        }
        onSecondaryActionClick={handleLogin}
      />
    </div>
  );
};

export default WelcomeScreenDemo;
```

--------------------------------

### Vertical Labels Steps Example

Source: https://21st.dev/community/components/anubra266/steps/vertical-labels

Example of using the Steps component to create a vertical list of labels. Ensure you have @ark-ui/react installed.

```jsx
"use client";

import { Steps } from "@ark-ui/react/steps";
import { Check } from "lucide-react";

export default function VerticalLabelsSteps() {
  const steps = ["Step One", "Step Two", "Step Three", "Step Four"];

  return (
    <div className="bg-white dark:bg-gray-800 w-full px-4 py-12 rounded-xl flex items-center justify-center">
      <Steps.Root
        count={4}
        defaultStep={1}
        orientation="vertical"
        className="max-w-md"
      >
        <Steps.List className="flex flex-col gap-4">
          {steps.map((step, index) => (
            <Steps.Item
              key={index}
              index={index}
              className="relative flex items-start"
            >
              <Steps.Trigger className="flex items-center gap-3 text-left rounded-md group">
                <Steps.Indicator className="flex justify-center items-center shrink-0 rounded-full font-semibold w-8 h-8 text-sm border-2 data-complete:bg-blue-600 data-complete:text-white data-complete:border-blue-600 data-current:bg-blue-600 data-current:text-white data-current:border-blue-600 data-incomplete:bg-gray-100 data-incomplete:text-gray-500 data-incomplete:border-gray-200 dark:data-incomplete:bg-gray-700 dark:data-incomplete:text-gray-300 dark:data-incomplete:border-gray-600 relative">
                  <span className="group-data-complete:hidden group-data-current:block">
                    {index + 1}
                  </span>
                  <Check className="w-4 h-4 group-data-complete:block hidden" />
                </Steps.Indicator>
                <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
                  {step}
                </span>
              </Steps.Trigger>
              <Steps.Separator
                hidden={index === steps.length - 1}
                className="absolute top-8 left-4 w-0.5 h-8 bg-gray-200 dark:bg-gray-700 data-complete:bg-blue-600"
              />
            </Steps.Item>
          ))}
        </Steps.List>
      </Steps.Root>
    </div>
  );
}

```

--------------------------------

### Input with Start Add On Example

Source: https://21st.dev/community/components/anubra266/field-components/start-inline-add-on-input

Demonstrates how to use the Field component with a start add-on for a website URL input. Requires @ark-ui/react.

```jsx
import { Field } from "@ark-ui/react/field";

export default function InputWithStartAddOn() {
  return (
    <Field.Root className="max-w-sm w-full">
      <Field.Label className="text-sm font-medium text-gray-900 dark:text-gray-100">
        Website URL
      </Field.Label>
      <div className="mt-1 flex rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus-within:border-gray-900 dark:focus-within:border-gray-100 focus-within:ring-1 focus-within:ring-gray-900 dark:focus-within:ring-gray-100">
        <span className="flex select-none items-center px-3 text-sm text-gray-500 dark:text-gray-400">
          https://
        </span>
        <Field.Input
          type="url"
          placeholder="myawesomesite.com"
          className="min-w-0 flex-1 border-0 bg-transparent px-3 py-2 text-sm text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-hidden focus:ring-0"
        />
      </div>
    </Field.Root>
  );
}
```

--------------------------------

### Install Simple Animated Testimonials

Source: https://21st.dev/community/components/bankkroll/simple-animated-testimonials/simple-animated-testimonials

Use this command to install the component using shadcn.

```bash
npx shadcn@latest add https://21st.dev/r/bankkroll/simple-animated-testimonials
```

--------------------------------

### Install Button Component

Source: https://21st.dev/community/components/ravikatiyar/button/default

Install the Animated Hover Button component using npx. Ensure the path is correct for your project setup.

```bash
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/button
```

--------------------------------

### Install Login & Signup Component

Source: https://21st.dev/community/components/ephraimduncan/login-signup/default

Use this command to add the Login & Signup component to your project.

```bash
npx shadcn@latest add https://21st.dev/r/ephraimduncan/login-signup
```

--------------------------------

### Usage Example for HyperText with Decryption

Source: https://21st.dev/community/components/daiwiikharihar17147/hyper-text-with-decryption

This example demonstrates how to integrate the HyperTextParagraph component into a React client component. Ensure framer-motion is installed as a dependency.

```javascript
"use client";
import HyperTextParagraph from "@/components/ui/hyper-text-with-decryption";
import { motion } from "framer-motion";

export default function DemoOne() {
  const bio = 
    "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Beatae, rerum.";

  // Key words to trigger the effect
  const triggers = ["ipsum", "amet", "adipisicing", "rerum"];

  return (
    <div className="min-h-screen bg-zinc-50 flex items-center justify-center p-6 md:p-12 relative overflow-hidden">
      {/* Background Ambience */}
      <div className="absolute inset-0 z-0">
        <div className="absolute top-[-20%] left-[-10%] w-[50%] h-[50%] bg-blue-200/30 rounded-full blur-[120px]" />
        <div className="absolute bottom-[-20%] right-[-10%] w-[50%] h-[50%] bg-indigo-200/30 rounded-full blur-[120px]" />
        {/* Subtle Grid */}
        <div
          className="absolute inset-0 opacity-[0.03]"
          style={{
            backgroundImage:
              "linear-gradient(#000 1px, transparent 1px), linear-gradient(90deg, #000 1px, transparent 1px)",
            backgroundSize: "32px 32px",
          }}
        />
      </div>

      {/* Card Container */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8, ease: "easeOut" }}
        className="max-w-4xl w-full relative z-10"
      >
        {/* Header Pill */}
        <div className="flex justify-center mb-8">
          <div className="bg-white border border-gray-200 shadow-sm px-4 py-1.5 rounded-full flex items-center gap-2">
            <span className="relative flex h-2 w-2">
              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
              <span className="relative inline-flex rounded-full h-2 w-2 bg-blue-500"></span>
            </span>
            <span className="text-xs font-bold tracking-widest text-gray-500 uppercase">
              Interactive Bio
            </span>
          </div>
        </div>

        {/* Main Content */}
        <div className="bg-white/70 backdrop-blur-xl border border-white/50 shadow-[0_8px_30px_rgb(0,0,0,0.04)] rounded-[2rem] p-8 md:p-16">
          <HyperTextParagraph
            text={bio}
            highlightWords={triggers}
            className="text-2xl md:text-4xl text-gray-800 font-normal leading-[1.6]"
          />
        </div>

        {/* Footer */}
        <p className="text-center mt-8 text-gray-400 text-sm font-mono">
          Hover highlighted keywords to decrypt
        </p>
      </motion.div>
    </div>
  );
}

```

--------------------------------

### Install FAQs Component

Source: https://21st.dev/community/components/meschacirung/faqs-component

Use this command to install the FAQs Component into your project.

```bash
npx shadcn@latest add https://21st.dev/r/meschacirung/faqs-component
```

--------------------------------

### Install Welcome Modal

Source: https://21st.dev/community/components/ravikatiyar/welcome-modal/default

Use this command to add the Welcome Modal component to your project using shadcn-ui.

```bash
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/welcome-modal
```

--------------------------------

### Usage Example: Input with Start Icon

Source: https://21st.dev/community/components/anubra266/field-components/start-icon-input

Demonstrates how to implement an input field with a starting icon using the Field component and Lucide React.

```jsx
import { Field } from "@ark-ui/react/field";
import { AtSign } from "lucide-react";

export default function InputWithStartIcon() {
  return (
    <Field.Root className="max-w-sm w-full">
      <Field.Label className="text-sm font-medium text-gray-900 dark:text-gray-100">
        Username
      </Field.Label>
      <div className="relative mt-1">
        <div className="absolute inset-y-0 left-0 flex items-center pl-3">
          <AtSign className="h-4 w-4 text-gray-400 dark:text-gray-500" />
        </div>
        <Field.Input
          type="text"
          placeholder="johnsmith"
          className="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-3 py-2 pl-10 text-sm text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:border-gray-900 dark:focus:border-gray-100 focus:outline-hidden focus:ring-1 focus:ring-gray-900 dark:focus:ring-gray-100"
        />
      </div>
    </Field.Root>
  );
}
```

--------------------------------

### Usage Example for Integrations Section

Source: https://21st.dev/community/components/ruixen.ui/integrations-section

Import and use the IntegrationsSection component in your React application. This example demonstrates a basic setup for rendering the component.

```javascript
import IntegrationsSection from "@/components/ui/integrations-section";

export default function DemoOne() {
  return <IntegrationsSection />;
}

```

--------------------------------

### Install FAQ 1 Component

Source: https://21st.dev/community/components/shadcnblockscom/faq1

Use this command to install the FAQ 1 component into your project. Ensure you have npx and shadcn-ui installed.

```bash
npx shadcn@latest add https://21st.dev/r/shadcnblockscom/faq1
```

--------------------------------

### Install FAQ Component

Source: https://21st.dev/community/components/meschacirung/faq

Use this command to add the FAQ component to your project. Ensure you have shadcn-ui installed.

```bash
npx shadcn@latest add https://21st.dev/r/meschacirung/faq
```

--------------------------------

### Navbar Component Usage Example

Source: https://21st.dev/community/components/shadcnblockscom/shadcnblocks-com-navbar1/default

This example demonstrates how to import and use the Navbar1 component with sample data. Ensure lucide-react is installed for icons.

```javascript
import { Book, Sunset, Trees, Zap } from "lucide-react";

import { Navbar1} from "@/components/blocks/shadcnblocks-com-navbar1"

const demoData = {
  logo: {
    url: "https://www.shadcnblocks.com",
    src: "https://www.shadcnblocks.com/images/block/block-1.svg",
    alt: "blocks for shadcn/ui",
    title: "Shadcnblocks.com",
  },
  menu: [
    {
      title: "Home",
      url: "https://www.shadcnblocks.com",
    },
    {
      title: "Products",
      url: "#",
      items: [
        {
          title: "Blog",
          description: "The latest industry news, updates, and info",
          icon: <Book className="size-5 shrink-0" />,
          url: "/blog",
        },
        {
          title: "Company",
          description: "Our mission is to innovate and empower the world",
          icon: <Trees className="size-5 shrink-0" />,
          url: "/company",
        },
        {
          title: "Careers",
          description: "Browse job listing and discover our workspace",
          icon: <Sunset className="size-5 shrink-0" />,
          url: "/careers",
        },
        {
          title: "Support",
          description:
            "Get in touch with our support team or visit our community forums",
          icon: <Zap className="size-5 shrink-0" />,
          url: "/support",
        },
      ],
    },
    {
      title: "Resources",
      url: "#",
      items: [
        {
          title: "Help Center",
          description: "Get all the answers you need right here",
          icon: <Zap className="size-5 shrink-0" />,
          url: "/help",
        },
        {
          title: "Contact Us",
          description: "We are here to help you with any questions you have",
          icon: <Sunset className="size-5 shrink-0" />,
          url: "/contact",
        },
        {
          title: "Status",
          description: "Check the current status of our services and APIs",
          icon: <Trees className="size-5 shrink-0" />,
          url: "/status",
        },
        {
          title: "Terms of Service",
          description: "Our terms and conditions for using our services",
          icon: <Book className="size-5 shrink-0" />,
          url: "/terms",
        },
      ],
    },
    {
      title: "Pricing",
      url: "/pricing",
    },
    {
      title: "Blog",
      url: "/blog",
    },
  ],
  mobileExtraLinks: [
    { name: "Press", url: "/press" },
    { name: "Contact", url: "/contact" },
    { name: "Imprint", url: "/imprint" },
    { name: "Sitemap", url: "/sitemap" },
  ],
  auth: {
    login: { text: "Log in", url: "/login" },
    signup: { text: "Sign up", url: "/signup" },
  },
};

function Navbar1Demo() {
  return <Navbar1 {...demoData} />;
}

export { Navbar1Demo };

```

--------------------------------

### Install Hero with Product Mockup

Source: https://21st.dev/community/components/vaib215/hero-with-product-mockup/default

Use this command to add the Hero with Product Mockup component to your project.

```bash
npx shadcn@latest add https://21st.dev/r/vaib215/hero-with-product-mockup
```

--------------------------------

### Usage Example for Notification Component

Source: https://21st.dev/community/components/hari/notification

This is a client component example demonstrating how to use the Notification component in a React application. Ensure you have React and framer-motion installed.

```javascript
"use client";
import React from "react";
import Component from "@/components/ui/notification";

const DemoOne = () => {
  return (
    <div className="flex w-full h-screen justify-center items-center">
      <Component />
    </div>
  );
};

export default DemoOne;
```

--------------------------------

### Usage Example for Dynamic Wave Canvas Background

Source: https://21st.dev/community/components/minhxthanh/dynamic-wave-canvas-background

Import and render the HeroWave component in your application. This example demonstrates a basic setup for a demo file.

```typescript
// This is file with demos of your component
// Each export is one usecase for your component

import HeroWave from "@/components/ui/dynamic-wave-canvas-background";

const DemoOne = () => {
  return <HeroWave />;
};

export { DemoOne };

```

--------------------------------

### Install Easemize Sign Up Component

Source: https://21st.dev/community/components/easemize/sign-up

Use this command to add the Easemize Sign Up component to your project using shadcn-ui.

```bash
npx shadcn@latest add https://21st.dev/r/easemize/sign-up
```

--------------------------------

### Install Faqs 1 Component

Source: https://21st.dev/community/components/efferd/faqs-1/default

Use this command to add the Faqs 1 component to your project via shadcn.

```bash
npx shadcn@latest add https://21st.dev/r/sshahaider/faqs-1
```

--------------------------------

### Usage Example for Text Rotate Component

Source: https://21st.dev/community/components/danielpetho/text-rotate/default

This example demonstrates how to integrate the Text Rotate component into a React client component. Ensure 'motion' from 'motion/react' is installed.

```javascript
"use client"

import { LayoutGroup, motion } from "motion/react"

import { TextRotate } from "@/components/ui/text-rotate"

function Preview() {
  return (
    <div className="w-full h-full text-2xl sm:text-3xl md:text-5xl flex flex-row items-center justify-center font-overusedGrotesk bg-white dark:text-muted text-foreground font-light overflow-hidden p-12 sm:p-20 md:p-24">
      <LayoutGroup>
        <motion.p className="flex whitespace-pre" layout>
          <motion.span
            className="pt-0.5 sm:pt-1 md:pt-2"
            layout
            transition={{ type: "spring", damping: 30, stiffness: 400 }}
          >
            Make it{" "}
          </motion.span>
          <TextRotate
            texts={[
              "work!",
              "fancy ✽",
              "right",
              "fast",
              "fun",
              "rock",
              "🕶️🕶️🕶️",
            ]}
            mainClassName="text-white px-2 sm:px-2 md:px-3 bg-[#ff5941] overflow-hidden py-0.5 sm:py-1 md:py-2 justify-center rounded-lg"
            staggerFrom={"last"}
            initial={{ y: "100%" }}
            animate={{ y: 0 }}
            exit={{ y: "-120%" }}
            staggerDuration={0.025}
            splitLevelClassName="overflow-hidden pb-0.5 sm:pb-1 md:pb-1"
            transition={{ type: "spring", damping: 30, stiffness: 400 }}
            rotationInterval={2000}
          />
        </motion.p>
      </LayoutGroup>
    </div>
  )
}

export { Preview }
```

--------------------------------

### Install Animated Web3 Landing Page Component

Source: https://21st.dev/community/components/minhxthanh/animated-web3-landing-page

Use npx to add the component to your project. This command fetches and installs the necessary files.

```bash
npx shadcn@latest add https://21st.dev/r/minhxthanh/animated-web3-landing-page
```

--------------------------------

### Install Warp Dialog Component

Source: https://21st.dev/community/components/molecule-lab-rushil/warp-dialog

Use this command to install the Warp Dialog component using shadcn. This is the initial setup step for integrating the component into your project.

```bash
npx shadcn@latest add https://21st.dev/r/molecule-lab-rushil/warp-dialog
```

--------------------------------

### Highlight Combobox Usage Example

Source: https://21st.dev/community/components/anubra266/combobox/highlight-combobox

This example demonstrates how to use the Highlight Combobox component with a list of frameworks. It includes setup for filtering and highlighting search terms.

```javascript
"use client";

import { Combobox, useListCollection } from "@ark-ui/react/combobox";
import { Highlight } from "@ark-ui/react/highlight";
import { useFilter } from "@ark-ui/react/locale";
import { Portal } from "@ark-ui/react/portal";
import { ChevronDownIcon, XIcon } from "lucide-react";

export default function WithHighlightCombobox() {
  const { contains } = useFilter({ sensitivity: "base" });

  const { collection, filter } = useListCollection({
    initialItems: ["React", "Solid", "Vue", "Svelte", "Angular", "Preact"],
    filter: contains,
  });

  const handleInputChange = (details: Combobox.InputValueChangeDetails) => {
    filter(details.inputValue);
  };

  return (
    <div className="w-full max-w-sm">
      <Combobox.Root
        collection={collection}
        onInputValueChange={handleInputChange}
      >
        <Combobox.Label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
          Framework
        </Combobox.Label>
        <Combobox.Control className="relative">
          <Combobox.Input
            className="w-full px-3 py-2 pr-20 border border-gray-300 dark:border-gray-600 rounded-md shadow-xs bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-hidden focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-blue-500 dark:focus:border-blue-400"
            placeholder="Search frameworks..."
          />
          <div className="absolute inset-y-0 right-0 flex items-center">
            <Combobox.ClearTrigger className="px-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
              <XIcon className="h-4 w-4" />
            </Combobox.ClearTrigger>
            <Combobox.Trigger className="px-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
              <ChevronDownIcon className="h-4 w-4" />
            </Combobox.Trigger>
          </div>
        </Combobox.Control>
        <Portal>
          <Combobox.Positioner>
            <Combobox.Content className="mt-1 max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-gray-800 py-1 shadow-lg ring-1 ring-black ring-opacity-5 dark:ring-gray-600 focus:outline-hidden z-50">
              <Combobox.ItemGroup>
                <Combobox.ItemGroupLabel className="px-3 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                  Frameworks
                </Combobox.ItemGroupLabel>
                {collection.items.map((item) => (
                  <Combobox.Item
                    key={item}
                    item={item}
                    className="relative cursor-pointer select-none py-2 pl-3 pr-9 text-gray-900 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-700 data-highlighted:bg-gray-50 dark:data-highlighted:bg-gray-700 transition-colors"
                  >
                    <Combobox.ItemText className="block truncate">
                      <Combobox.Context>
                        {(context) => (
                          <Highlight
                            text={item}
                            query={context.inputValue}
                            ignoreCase
                            className="[&_mark]:bg-blue-100 dark:[&_mark]:bg-blue-900/50 [&_mark]:text-blue-900 dark:[&_mark]:text-blue-100 [&_mark]:font-semibold [&_mark]:px-0.5 [&_mark]:py-0.5 [&_mark]:rounded"
                          />
                        )}
                      </Combobox.Context>
                    </Combobox.ItemText>
                    <Combobox.ItemIndicator className="absolute inset-y-0 pr-3 text-blue-600 dark:text-blue-400">
                      ✓
                    </Combobox.ItemIndicator>
                  </Combobox.Item>
                ))}
              </Combobox.ItemGroup>
            </Combobox.Content>
          </Combobox.Positioner>
        </Portal>
      </Combobox.Root>
    </div>
  );
}

```

--------------------------------

### Install Sign Up Component

Source: https://21st.dev/community/components/avanishverma4/sign-up/default

Use this command to add the Sign Up component to your project using shadcn.

```bash
npx shadcn@latest add https://21st.dev/r/avanishverma4/sign-up
```

--------------------------------

### Install Onboarding Dialog

Source: https://21st.dev/community/components/patrick-xin/onboarding-dialog

Use this command to add the Onboarding Dialog component to your project.

```bash
npx shadcn@latest add https://21st.dev/r/patrick-xin/onboarding-dialog
```

--------------------------------

### Input with Inline Start and End Add-on Example

Source: https://21st.dev/community/components/originui/input/input-with-inline-start-and-end-add-on

This example shows how to use the Origin UI Input component with inline start and end add-ons. It's useful for inputs requiring currency symbols or units, such as financial fields. Ensure the necessary UI components like Label are imported.

```javascript
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { useId } from "react";

function Component() {
  const id = useId();
  return (
    <div className="space-y-2 min-w-[300px]">
      <Label htmlFor={id}>Input with inline start and end add-on</Label>
      <div className="relative flex rounded-lg shadow-sm shadow-black/5">
        <span className="pointer-events-none z-20 absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-sm text-muted-foreground">
          €
        </span>
        <Input
          id={id}
          className="-me-px z-10 rounded-e-none ps-6 shadow-none"
          placeholder="0.00"
          type="text"
        />
        <span className="inline-flex items-center rounded-e-lg border border-input bg-background px-3 text-sm text-muted-foreground">
          EUR
        </span>
      </div>
    </div>
  );
}

export { Component };

```

--------------------------------

### Install Onboarding Card Component

Source: https://21st.dev/community/components/ravikatiyar/onboarding/default

Install the OnboardingCard component using the provided npx command. This command fetches the component from the specified registry.

```bash
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/onboarding
```

--------------------------------

### Usage Example for RoutePlannerCard

Source: https://21st.dev/community/components/ravikatiyar/planner-card/default

Demonstrates how to use the RoutePlannerCard component in a React application. It includes sample data for the elevation graph and an example click handler for the start button.

```typescript
import { RoutePlannerCard } from "@/components/ui/planner-card";
import { Bike } from "lucide-react";

/**
 * A demo component to showcase the RoutePlannerCard.
 */
export default function RoutePlannerCardDemo() {
  // Generate some random data for the elevation graph for a nice visual effect
  const sampleElevationData = Array.from({ length: 50 }, () => Math.random() * 80 + 20);

  const handleStart = () => {
    // In a real app, this would trigger navigation or tracking.
    console.log("Start button clicked!");
  };

  return (
    <div className="flex h-full w-full items-center justify-center bg-background p-4">
      <RoutePlannerCard
        alertMessage="Rain expected in 28 min."
        durationInMinutes={42}
        distance={5.9}
        climb={327}
        elevationData={sampleElevationData}
        routeFeature={{
          icon: <Bike className="h-5 w-5" />,
          text: "Protected bike lanes",
        }}
        onStart={handleStart}
      />
    </div>
  );
}
```