Examples

import { Button } from "@vortex/ui-foundation";
import { Container } from "@/components/ui/container";
 
export default function LandingPage() {
  return (
    <Container size="xl">
      <section className="py-20 text-center">
        <h1 className="text-5xl font-bold mb-6">Build Faster with Vortex UI</h1>
        <p className="text-xl text-muted-foreground mb-8">
          A modern component library for React applications
        </p>
        <div className="flex gap-4 justify-center">
          <Button size="lg">Get Started</Button>
          <Button size="lg" variant="outline">
            View Docs
          </Button>
        </div>
      </section>
    </Container>
  );
}

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
 
const formSchema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
});
 
export default function FormExample() {
  const form = useForm({
    resolver: zodResolver(formSchema),
  });
 
  const onSubmit = async (data) => {
    const response = await fetch("/api/auth/login", {
      method: "POST",
      body: JSON.stringify(data),
    });
  };
 
  return <form onSubmit={form.handleSubmit(onSubmit)}>...</form>;
}

import { AnalyticsCard } from "@vortex/ui-icignal";
 
export default function Dashboard() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
      <AnalyticsCard
        title="Total Users"
        value="12,345"
        trend="+12%"
        trendUp={true}
      />
      <AnalyticsCard
        title="Revenue"
        value="$45,678"
        trend="+8%"
        trendUp={true}
      />
    </div>
  );
}

import { BookingCard } from "@vortex/ui-cals";
 
export default function BookingSystem() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <BookingCard title="Conference Room A" capacity={10} available={true} />
    </div>
  );
}