Ir para o conteúdo
Promovaweb
Voltar ao site
Menu

Demonstrações de componentes

Demonstração preservada do site original. Os exemplos de interface e de conteúdo desta página não representam serviços ou depoimentos da Promovaweb.

UI Showcase

Uma coleção de componentes bonitos, acessíveis e reutilizáveis construídos com React, Tailwind CSS e Radix UI

Basic Components

Advanced Components

Badges

Display short labels with various styles and colors

Default

Secondary

Destructive

Outline

Success

Warning

Info

Gradient

import { Badge } from "@/components/ui/badge";

<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="gradient">Gradient</Badge>

Alerts

Display important messages with icons and dismiss functionality

Default Alert

This is a default alert with some helpful information.

Success!

Your changes have been saved successfully.

Warning

Please review your settings before continuing.

Error

An error occurred while processing your request.

import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";

<Alert variant="success">
  <AlertTitle>Success!</AlertTitle>
  <AlertDescription>
    Your changes have been saved.
  </AlertDescription>
</Alert>

Cards

Flexible container component for displaying content

API Integration

Connect your AI models seamlessly

Our REST API makes it easy to integrate powerful AI capabilities into your applications with just a few lines of code.

Featured Card

Highlighted with a custom border

Cards can be customized with different borders, backgrounds, and hover effects to match your design.

import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Your content here</p>
  </CardContent>
</Card>

Spinners

Loading indicators in various sizes and styles

Small

Medium

Large

XL

import { Spinner } from "@/components/ui/spinner";

<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" variant="secondary" />

Progress

Show completion status with animated progress bars

Progress66%

Custom Color33%

Decrease

Increase

import { Progress } from "@/components/ui/progress";

<Progress value={66} />
<Progress value={33} indicatorClassName="bg-gradient-to-r from-purple-500 to-pink-500" />

Tabs

Organize content into switchable sections

Preview

Code

Settings

This is the preview tab. You can display any content here.

Preview content goes here

function hello() {
  console.log("Hello from the code tab!");
}

Configure your settings here.

Enter your setting...

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";

<Tabs defaultValue="preview">
  <TabsList>
    <TabsTrigger value="preview">Preview</TabsTrigger>
    <TabsTrigger value="code">Code</TabsTrigger>
  </TabsList>
  <TabsContent value="preview">Preview content</TabsContent>
  <TabsContent value="code">Code content</TabsContent>
</Tabs>

Avatars

Display user profile images with fallbacks

CN

JD

SK

AB

import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";

<Avatar>
  <AvatarImage src="/avatar.jpg" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

Stat Cards

Display key metrics with icons and trends

Total Users

50,234

+12.5% from last month

Active Sessions

2,847

+8.2% from last week

AI Requests

1.2M

+45.1% from yesterday

import { StatCard } from "@/components/StatCard";
import { Users } from "lucide-react";

<StatCard
  title="Total Users"
  value="50,234"
  change="+12.5% from last month"
  changeType="positive"
  icon={Users}
  gradient="from-purple-500 to-pink-500"
/>

Timeline

Display events in chronological order

Product Launch

Jan 2025

Released version 1.0 of our AI platform

API v2 Released

Dec 2024

Launched faster, more efficient API

Reached 50K Users

Nov 2024

Hit major milestone in user growth

Company Founded

Jun 2024

Started the journey to democratize AI

import { Timeline } from "@/components/Timeline";
import { Rocket } from "lucide-react";

<Timeline
  items={[
    {
      title: "Product Launch",
      description: "Released version 1.0",
      date: "Jan 2025",
      icon: Rocket,
    },
  ]}
/>

Inputs

Form inputs with various types and styles

Email addressPasswordSearch...Disabled input

import { Input } from "@/components/ui/input";

<Input placeholder="Email address" type="email" />
<Input placeholder="Password" type="password" />
<Input placeholder="Disabled input" disabled />

Code Blocks

Display code with syntax highlighting and copy functionality

import { CodeBlock } from "@/components/CodeBlock";

function Example() {
  const message = "Hello, World!";
  console.log(message);
  return <div>{message}</div>;
}

Buttons

Interactive buttons in various styles and sizes

Default

Secondary

Destructive

Outline

Ghost

Link

Small

Default

Large

Disabled

With Icon

import { Button } from "@/components/ui/button";

<Button>Default</Button>
<Button variant="secondary">Secondary</Button>
<Button size="lg">Large</Button>
<Button disabled>Disabled</Button>

Magic Card

Featured

Interactive 3D card with spotlight effect, shimmer animation, and smooth tilt

AI Powered

Hover over this card to see the magic! Watch as the spotlight follows your cursor with smooth 3D tilt effects.

Interactive3D Effect

Lightning Fast

Customizable gradient colors and sizes. Each card can have its own unique spotlight effect.

Get Started

import { MagicCard } from "@/components/MagicCard";

<MagicCard className="p-8">
  <h3>Your Content</h3>
  <p>Hover to see the magic!</p>
</MagicCard>

{/* Custom gradient color */}
<MagicCard
  gradientColor="#3b82f6"
  gradientSize={250}
  gradientOpacity={0.6}
>
  <p>Blue spotlight effect</p>
</MagicCard>

Bento Grid

Modern grid layout for showcasing features with varied sizes

AI Models

Access cutting-edge AI models with simple API calls

Learn more

Fast API

Lightning-fast response times

Try now

Secure

Enterprise-grade security

Read more

Scalable

Scale from prototype to production seamlessly

Get started

import { BentoGrid, BentoCard } from "@/components/BentoGrid";

<BentoGrid>
  <BentoCard
    name="AI Models"
    className="md:col-span-2"
    Icon={Brain}
    description="Access cutting-edge AI models"
    href="#"
    cta="Learn more"
  />
</BentoGrid>

Marquee Logos

Infinite scrolling logo carousel for trusted by sections

Vercel Next.js React Tailwind TypeScript Vercel Next.js React Tailwind TypeScript 
import { MarqueeLogos } from "@/components/MarqueeLogos";

const logos = [
  { name: "Vercel", url: "/logos/vercel.png" },
  { name: "Next.js", url: "/logos/nextjs.png" },
];

<MarqueeLogos logos={logos} />

Animated Counter

Numbers that count up with smooth animations

10000+

Active Users

99.9%

Uptime

$1.2M

Revenue

import { AnimatedCounter } from "@/components/AnimatedCounter";

<AnimatedCounter value={10000} suffix="+" />
<AnimatedCounter value={99.9} decimals={1} suffix="%" />

Gradient Text

Eye-catching gradient text with optional animation

Build with GenAI

Powered by Artificial Intelligence

Custom Colors

import { GradientText } from "@/components/GradientText";

<GradientText>Default Gradient</GradientText>
<GradientText animate>Animated</GradientText>
<GradientText from="from-blue-600" to="to-cyan-600">
  Custom
</GradientText>

Glass Card

Beautiful glass morphism effect cards

Glass Effect

This card uses backdrop blur and translucent backgrounds to create a glass morphism effect that looks stunning on colorful backgrounds.

import { GlassCard } from "@/components/GlassCard";

<GlassCard blur="md">
  <p>Content with glass effect</p>
</GlassCard>

Switch

Toggle switches for boolean settings

Enable notifications

Receive updates about your account

Marketing emails

Receive news and product updates

import { Switch } from "@/components/ui/switch";

<Switch
  checked={enabled}
  onCheckedChange={setEnabled}
/>

Tooltip

Helpful tooltips on hover

Hover me

This is a helpful tooltip

With Icon

Tooltips can be placed on any element

import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button>Hover me</Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>Tooltip content</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

Skeleton

Loading placeholders for better UX

import { Skeleton } from "@/components/ui/skeleton";

<Skeleton className="h-12 w-12 rounded-full" />
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-[200px] w-full" />

Shimmer Button

Buttons with animated shimmer effect

Get Started

Learn More

Launch Now

import { ShimmerButton } from "@/components/ShimmerButton";

<ShimmerButton>Get Started</ShimmerButton>
<ShimmerButton background="bg-gradient-to-r from-blue-600 to-cyan-600">
  Custom Color
</ShimmerButton>

Empty State

Friendly empty states with call-to-action

No data found

We couldn't find any results. Try adjusting your search or create a new item to get started.

Create New

import { EmptyState } from "@/components/EmptyState";

<EmptyState
  icon={FileQuestion}
  title="No data found"
  description="Try adjusting your search..."
  action={{
    label: "Create New",
    onClick: handleCreate,
  }}
/>

Pricing Toggle

Switch between monthly and annual pricing

MonthlyAnnualSave 20%

Selected: Monthly

import { PricingToggle } from "@/components/PricingToggle";

<PricingToggle
  onChange={(isAnnual) => console.log(isAnnual)}
  defaultAnnual={false}
/>

Feature Comparison

Compare features across different plans

FeatureFreeProEnterprise
API Access
Advanced Models
Priority Support
Custom Training
On-Premise Deploy
SLA Guarantee
import { FeatureComparison } from "@/components/FeatureComparison";

const features = [
  { name: "API Access", free: true, pro: true, enterprise: true },
  { name: "Advanced Models", free: false, pro: true, enterprise: true },
];

<FeatureComparison features={features} />