[V0_FILE]typescriptreact:file="components/neo-brutalist-card.tsx" isMerged="true" import type * as React from "react" import Link from "next/link" import { cn } from "@/lib/utils" interface NeoBrutalistCardProps extends React.HTMLAttributes { title: string description?: string imageUrl?: string footer?: React.ReactNode link?: string color?: "yellow" | "blue" | "red" | "green" | "pink" } export function NeoBrutalistCard({ title, description, imageUrl, footer, link, color = "yellow", className, ...props }: NeoBrutalistCardProps) { const colorStyles = { yellow: "bg-yellow-300 hover:bg-yellow-400", blue: "bg-blue-300 hover:bg-blue-400", red: "bg-red-300 hover:bg-red-400", green: "bg-green-300 hover:bg-green-400", pink: "bg-pink-300 hover:bg-pink-400", } const CardContent = () => (

{imageUrl && (

)}

{title}

{description &&

{description}

} {footer &&

{footer}

}

) const cardClasses = cn( // Base styles - solid borders and offset shadow that's a core part of neo-brutalism "relative border-4 border-black transform transition-transform", "shadow-[6px_6px_0px_0px_rgba(0,0,0,1)]", "active:translate-x-1 active:translate-y-1 active:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]", // Color variations colorStyles[color], className, ) if (link) { return ( ) } return (

) } [V0_FILE]png:file="public/abstract-digital-pattern.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-digital-pattern-89IvCI4OeRJgsxMPDb1vXEpx6aH0Tx.png" isMerged="true" [V0_FILE]png:file="public/minimal-geometric-shapes.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/minimal-geometric-shapes-c6nxo4ovh8MnoZ2Y9abtyFOzpnEwad.png" isMerged="true" [V0_FILE]png:file="public/placeholder-hzqfn.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]png:file="public/blockchain-concept.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/blockchain-concept-DGQvUqhxxnRmPkyjDJQR8r4pv96rAc.png" isMerged="true" [V0_FILE]typescriptreact:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --radius: 0; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]png:file="public/brutalist-chair.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/brutalist-chair-Sbd7dUMAbVcYJ6mpMOFoqtXKiygD5f.png" isMerged="true" [V0_FILE]png:file="public/concrete-lamp.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/concrete-lamp-uCwW8FudvXE3rx4HuXTFHzzgheXnOR.png" isMerged="true" [V0_FILE]png:file="public/placeholder-ywx60.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]typescriptreact:file="components/product-card.tsx" isEdit="true" isMerged="true" import { NeoBrutalistButton } from "@/components/neo-brutalist-buttons" export function ProductCard() { return (

Product Card Designs

{/* Design 1: Classic Vertical Card */}

Design 1: Classic Vertical

Brutalist Chair

$299 Add to Cart

{/* Design 2: Horizontal Layout */}

Design 2: Horizontal Layout

Raw Concrete Lamp

NEW

Minimalist concrete lamp with exposed wiring and raw finish. Perfect for industrial interiors.

$129 $159

Add to Cart

{/* Design 3: Feature-Rich Card */}

Design 3: Feature-Rich

SALE

Block Table

Wood Handmade Brutalist

Solid oak table with chunky geometric legs and raw finish. Handcrafted by local artisans.

{[1, 2, 3, 4, 5].map((star) => ( ))}

(42 reviews)

$459 $599

Save Add to Cart

{/* Design 4: Minimal Card */}

Design 4: Minimal

Geometric Vase

Ceramic vase with angular design

$89

View Details

Concrete Planter

Brutalist planter for succulents

$65

View Details

{/* Design 5: Image-Focused Card */}

Design 5: Image-Focused

Brutalist Chair

$299 Buy Now

Concrete Lamp

$129 Buy Now

) } [V0_FILE]typescriptreact:file="components/hero-banner.tsx" isEdit="true" isMerged="true" import { NeoBrutalistButton } from "@/components/neo-brutalist-buttons" export function HeroBanner() { return (

Hero Banner Designs

{/* Design 1: Split Layout */}

Design 1: Split Layout

Bold Design For The Digital Age

Neo-brutalism embraces raw aesthetics and functional design. No fluff, just stuff.

Get Started Learn More

{/* Design 2: Centered with Background Shapes */}

Design 2: Centered with Background Shapes

{/* Background Shapes */}

{/* Content */}

Neo-Brutalism

Unapologetically Bold Design

Embrace the raw, unfiltered aesthetic of neo-brutalism. Where function meets bold form.

Explore Now

{/* Design 3: Overlapping Elements */}

Design 3: Overlapping Elements

{/* Background Layer */}

{/* Main Content */}

Neo-Brutalist Design

Raw. Bold.
Unfiltered.

Embracing the beauty of raw materials and bold forms. Neo-brutalism strips away the unnecessary and celebrates the essential.

Get Started

{/* Design 4: Grid-Based Layout */}

Design 4: Grid-Based Layout

{/* Header */}

Neo-Brutalist Design System

{/* Main Content */}

Grid-Based Brutalism

Structured chaos. Organized rawness. The grid provides structure while the design breaks free.

Explore Learn More

{/* Side Panels */}

{/* Footer */}

{/* Design 5: Asymmetrical Layout */}

Design 5: Asymmetrical Layout

{/* Decorative Elements */}

Breaking The Grid

Asymmetrical
Brutalism

Embracing the unexpected. Breaking free from symmetry while maintaining bold, raw aesthetics.

Ready to start?

Join Now

Limited Time!

01. Design

Bold, raw aesthetics

02. Build

Functional structures

03. Break

Disrupt conventions

) } [V0_FILE]typescriptreact:file="components/neo-brutalist-form.tsx" isEdit="true" isMerged="true" import { NeoBrutalistButton } from "@/components/neo-brutalist-buttons" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Checkbox } from "@/components/ui/checkbox" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" export function NeoBrutalistForm() { return (

Form Designs

{/* Form Design 1: Login Form */}

Design 1: Login Form

Login

{/* Form Design 2: Sign-up Form */}

Design 2: Sign-up Form

Create Account

First Name

Last Name

Password

I agree to the{" "} Terms & Conditions

Create Account

Already have an account?{" "} Log in

{/* Form Design 3: Contact Form */}

Design 3: Contact Form

Get In Touch

Have questions or feedback? Fill out the form and we'll get back to you as soon as possible.

(123) 456-7890

hello@example.com

123 Brutalist Ave, Design City

Name

Subject

Message

</div>

<NeoBrutalistButton type="submit" variant="primary" size="lg" className="w-full mt-6">
                  Send Message
                </NeoBrutalistButton>
              </form>
            </div>
          </div>
        </div>
      </div>

{/* Form Design 4: Newsletter Subscription */}
      <div>
        <h3 className="text-2xl font-black font-mono uppercase mb-6">Design 4: Newsletter Subscription</h3>
        <div className="bg-green-400 border-8 border-black shadow-[12px_12px_0px_0px_rgba(0,0,0,1)] p-6 md:p-8">
          <div className="flex flex-col md:flex-row gap-8 items-center">
            <div className="md:w-1/2">
              <h2 className="text-3xl font-black font-mono uppercase mb-4">Stay Updated</h2>
              <p className="font-mono text-lg mb-4">
                Subscribe to our newsletter for the latest updates on neo-brutalist design trends, tutorials, and
                resources.
              </p>
              <div className="flex flex-col space-y-4">
                <div className="flex items-center">
                  <div className="bg-black text-white p-2 mr-3">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    >
                      <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path>
                      <line x1="4" y1="22" x2="4" y2="15"></line>
                    </svg>
                  </div>
                  <span className="font-mono">Weekly design tips</span>
                </div>
                <div className="flex items-center">
                  <div className="bg-black text-white p-2 mr-3">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    >
                      <path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path>
                    </svg>
                  </div>
                  <span className="font-mono">Exclusive resources</span>
                </div>
                <div className="flex items-center">
                  <div className="bg-black text-white p-2 mr-3">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    >
                      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                      <polyline points="22 4 12 14.01 9 11.01"></polyline>
                    </svg>
                  </div>
                  <span className="font-mono">No spam, unsubscribe anytime</span>
                </div>
              </div>
            </div>

<div className="space-y-2">
                    <Label htmlFor="email4" className="text-lg font-mono font-bold uppercase">
                      Email
                    </Label>
                    <Input
                      id="email4"
                      type="email"
                      placeholder="your@email.com"
                      className="border-4 border-black h-12 font-mono placeholder:text-gray-500 focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-0"
                    />
                  </div>

<div className="space-y-2">
                    <Label className="text-lg font-mono font-bold uppercase">Interests</Label>
                    <div className="space-y-2">
                      <div className="flex items-center">
                        <Checkbox
                          id="design"
                          className="border-2 border-black data-[state=checked]:bg-black data-[state=checked]:text-white h-5 w-5 rounded-none"
                        />
                        <label htmlFor="design" className="ml-2 font-mono">
                          Design Trends
                        </label>
                      </div>
                      <div className="flex items-center">
                        <Checkbox
                          id="tutorials"
                          className="border-2 border-black data-[state=checked]:bg-black data-[state=checked]:text-white h-5 w-5 rounded-none"
                        />
                        <label htmlFor="tutorials" className="ml-2 font-mono">
                          Tutorials
                        </label>
                      </div>
                      <div className="flex items-center">
                        <Checkbox
                          id="resources"
                          className="border-2 border-black data-[state=checked]:bg-black data-[state=checked]:text-white h-5 w-5 rounded-none"
                        />
                        <label htmlFor="resources" className="ml-2 font-mono">
                          Resources
                        </label>
                      </div>
                    </div>
                  </div>

<NeoBrutalistButton type="submit" variant="primary" size="lg" className="w-full mt-4">
                    Subscribe Now
                  </NeoBrutalistButton>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>

{/* Form Design 5: Payment Form */}
      <div>
        <h3 className="text-2xl font-black font-mono uppercase mb-6">Design 5: Payment Form</h3>
        <div className="max-w-xl mx-auto bg-purple-400 border-8 border-black shadow-[12px_12px_0px_0px_rgba(0,0,0,1)]">
          <div className="bg-black text-white p-4 border-b-8 border-black">
            <h2 className="text-3xl font-black font-mono uppercase">Payment Details</h2>
          </div>

<form className="p-6 space-y-6">
            <div className="bg-yellow-300 border-4 border-black p-4 font-mono">
              <div className="font-bold text-lg">Order Summary</div>
              <div className="flex justify-between mt-2">
                <span>Neo-Brutalist UI Kit</span>
                <span>$89.00</span>
              </div>
              <div className="flex justify-between mt-1">
                <span>Tax</span>
                <span>$8.90</span>
              </div>
              <div className="flex justify-between mt-2 pt-2 border-t-2 border-black font-bold">
                <span>Total</span>
                <span>$97.90</span>
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="cardNumber" className="text-lg font-mono font-bold uppercase">
                Card Number
              </Label>
              <Input
                id="cardNumber"
                placeholder="1234 5678 9012 3456"
                className="border-4 border-black h-12 font-mono placeholder:text-gray-500 focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-0"
              />
            </div>

<div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="expiry" className="text-lg font-mono font-bold uppercase">
                  Expiry Date
                </Label>
                <Input
                  id="expiry"
                  placeholder="MM/YY"
                  className="border-4 border-black h-12 font-mono placeholder:text-gray-500 focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-0"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="cvc" className="text-lg font-mono font-bold uppercase">
                  CVC
                </Label>
                <Input
                  id="cvc"
                  placeholder="123"
                  className="border-4 border-black h-12 font-mono placeholder:text-gray-500 focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-0"
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="billingAddress" className="text-lg font-mono font-bold uppercase">
                Billing Address
              </Label>
              <Input
                id="billingAddress"
                placeholder="123 Brutalist Street"
                className="border-4 border-black h-12 font-mono placeholder:text-gray-500 focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-0"
              />
            </div>

<div className="flex items-center">
              <Checkbox
                id="saveCard"
                className="border-2 border-black data-[state=checked]:bg-black data-[state=checked]:text-white h-5 w-5 rounded-none"
              />
              <label htmlFor="saveCard" className="ml-2 font-mono">
                Save card for future purchases
              </label>
            </div>

<NeoBrutalistButton type="submit" variant="primary" size="lg" className="w-full">
              Pay Now
            </NeoBrutalistButton>
          </form>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/neo-brutalist-calendar.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { ChevronLeft, ChevronRight, Plus, CalendarIcon, Clock } from "lucide-react"
import { NeoBrutalistButton } from "@/components/neo-brutalist-buttons"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

export function NeoBrutalistCalendar() {
  const [currentMonth, setCurrentMonth] = useState(new Date())
  const [selectedDate, setSelectedDate] = useState<Date | null>(null)
  const [activeCalendar, setActiveCalendar] = useState("monthly")

const months = [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December",
  ]

const daysOfWeek = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]

const getDaysInMonth = (year: number, month: number) => {
    return new Date(year, month + 1, 0).getDate()
  }

const getFirstDayOfMonth = (year: number, month: number) => {
    return new Date(year, month, 1).getDay()
  }

const prevMonth = () => {
    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1))
  }

const nextMonth = () => {
    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1))
  }

const year = currentMonth.getFullYear()
  const month = currentMonth.getMonth()
  const daysInMonth = getDaysInMonth(year, month)
  const firstDayOfMonth = getFirstDayOfMonth(year, month)

const days = []
  for (let i = 0; i < firstDayOfMonth; i++) {
    days.push(null)
  }
  for (let i = 1; i <= daysInMonth; i++) {
    days.push(i)
  }

const today = new Date()
  const isToday = (day: number | null) => {
    return day === today.getDate() && month === today.getMonth() && year === today.getFullYear()
  }

const isSelected = (day: number | null) => {
    return (
      selectedDate &&
      day === selectedDate.getDate() &&
      month === selectedDate.getMonth() &&
      year === selectedDate.getFullYear()
    )
  }

const handleDateClick = (day: number | null) => {
    if (day) {
      setSelectedDate(new Date(year, month, day))
    }
  }

// Sample events for the event calendar
  const events = [
    { id: 1, title: "Team Meeting", date: new Date(year, month, 10), time: "10:00 AM", type: "meeting" },
    { id: 2, title: "Product Launch", date: new Date(year, month, 15), time: "2:00 PM", type: "event" },
    { id: 3, title: "Design Review", date: new Date(year, month, 20), time: "11:30 AM", type: "meeting" },
    { id: 4, title: "Client Call", date: new Date(year, month, 5), time: "3:00 PM", type: "call" },
    { id: 5, title: "Workshop", date: new Date(year, month, 25), time: "9:00 AM", type: "workshop" },
  ]

const hasEvent = (day: number | null) => {
    return (
      day &&
      events.some(
        (event) => event.date.getDate() === day && event.date.getMonth() === month && event.date.getFullYear() === year,
      )
    )
  }

const getEventsForDay = (day: number | null) => {
    if (!day) return []
    return events.filter(
      (event) => event.date.getDate() === day && event.date.getMonth() === month && event.date.getFullYear() === year,
    )
  }

const getEventTypeColor = (type: string) => {
    switch (type) {
      case "meeting":
        return "bg-blue-500"
      case "event":
        return "bg-yellow-400"
      case "call":
        return "bg-green-500"
      case "workshop":
        return "bg-red-500"
      default:
        return "bg-gray-500"
    }
  }

// Time slots for the daily view
  const timeSlots = Array.from({ length: 12 }, (_, i) => `${i + 8}:00 ${i + 8 < 12 ? "AM" : "PM"}`)

return (
    <div className="space-y-20">
      <h2 className="text-3xl font-black font-mono uppercase border-b-8 border-black pb-2 inline-block">
        Calendar Designs
      </h2>

<div className="flex flex-wrap gap-4 mb-8">
        <NeoBrutalistButton
          variant={activeCalendar === "monthly" ? "primary" : "secondary"}
          onClick={() => setActiveCalendar("monthly")}
        >
          Monthly View
        </NeoBrutalistButton>
        <NeoBrutalistButton
          variant={activeCalendar === "weekly" ? "primary" : "secondary"}
          onClick={() => setActiveCalendar("weekly")}
        >
          Weekly View
        </NeoBrutalistButton>
        <NeoBrutalistButton
          variant={activeCalendar === "events" ? "primary" : "secondary"}
          onClick={() => setActiveCalendar("events")}
        >
          Event Calendar
        </NeoBrutalistButton>
        <NeoBrutalistButton
          variant={activeCalendar === "appointment" ? "primary" : "secondary"}
          onClick={() => setActiveCalendar("appointment")}
        >
          Appointment Scheduler
        </NeoBrutalistButton>
        <NeoBrutalistButton
          variant={activeCalendar === "datepicker" ? "primary" : "secondary"}
          onClick={() => setActiveCalendar("datepicker")}
        >
          Date Picker
        </NeoBrutalistButton>
      </div>

{/* Design 1: Monthly View Calendar */}
      {activeCalendar === "monthly" && (
        <div>
          <h3 className="text-2xl font-black font-mono uppercase mb-6">Design 1: Monthly View</h3>
          <div className="bg-green-400 border-8 border-black shadow-[12px_12px_0px_0px_rgba(0,0,0,1)]">
            <div className="bg-black text-white p-4 flex justify-between items-center border-b-8 border-black">
              <button
                onClick={prevMonth}
                className="bg-green-400 text-black p-2 font-bold border-4 border-white transform transition-transform active:translate-y-1 active:translate-x-1"
              >
                <ChevronLeft className="h-6 w-6" />
              </button>

<h2 className="text-3xl font-black font-mono uppercase">
                {months[month]} {year}
              </h2>

<div className="grid grid-cols-7 border-b-8 border-black">
              {daysOfWeek.map((day) => (
                <div
                  key={day}
                  className="text-center py-2 font-mono font-bold text-lg border-r-4 last:border-r-0 border-black bg-black text-white"
                >
                  {day}
                </div>
              ))}
            </div>

<div className="grid grid-cols-7">
              {days.map((day, index) => (
                <div
                  key={index}
                  className={`
                    min-h-16 p-2 border-r-4 border-b-4 last:border-r-0 border-black font-mono font-bold text-xl
                    ${isToday(day) ? "bg-yellow-300" : ""}
                    ${isSelected(day) ? "bg-blue-300" : ""}
                    ${day ? "cursor-pointer hover:bg-opacity-80" : "bg-gray-200"}
                  `}
                  onClick={() => handleDateClick(day)}
                >
                  {day}
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

{/* Design 2: Weekly View Calendar */}
      {activeCalendar === "weekly" && (
        <div>
          <h3 className="text-2xl font-black font-mono uppercase mb-6">Design 2: Weekly View</h3>
          <div className="bg-blue-400 border-8 border-black shadow-[12px_12px_0px_0px_rgba(0,0,0,1)]">
            <div className="bg-black text-white p-4 flex justify-between items-center border-b-8 border-black">
              <button
                onClick={prevMonth}
                className="bg-blue-400 text-black p-2 font-bold border-4 border-white transform transition-transform active:translate-y-1 active:translate-x-1"
              >
                <ChevronLeft className="h-6 w-6" />
              </button>

<h2 className="text-3xl font-black font-mono uppercase">
                Week of {months[month]} {new Date(year, month, Math.max(1, today.getDate() - today.getDay())).getDate()}
              </h2>

<div className="grid grid-cols-8 border-b-8 border-black">
              <div className="text-center py-2 font-mono font-bold text-lg border-r-4 border-black bg-black text-white">
                Time
              </div>
              {daysOfWeek.map((day) => (
                <div
                  key={day}
                  className="text-center py-2 font-mono font-bold text-lg border-r-4 last:border-r-0 border-black bg-black text-white"
                >
                  {day}
                </div>
              ))}
            </div>

<div className="grid grid-cols-8">
              {timeSlots.map((time, timeIndex) => (
                <>
                  <div
                    key={`time-${timeIndex}`}
                    className="p-2 border-r-4 border-b-4 border-black font-mono font-bold text-sm bg-gray-100"
                  >
                    {time}
                  </div>
                  {Array.from({ length: 7 }, (_, dayIndex) => (
                    <div
                      key={`slot-${timeIndex}-${dayIndex}`}
                      className="p-2 border-r-4 border-b-4 last:border-r-0 border-black min-h-16"
                    >
                      {/* This is where events would go */}
                      {Math.random() > 0.8 && (
                        <div
                          className={`${["bg-blue-500", "bg-yellow-400", "bg-red-500", "bg-green-500"][Math.floor(Math.random() * 4)]} border-2 border-black p-1 text-xs font-mono font-bold`}
                        >
                          {["Meeting", "Call", "Workshop", "Break"][Math.floor(Math.random() * 4)]}
                        </div>
                      )}
                    </div>
                  ))}
                </>
              ))}
            </div>
          </div>
        </div>
      )}

{/* Design 3: Event Calendar */}
      {activeCalendar === "events" && (
        <div>
          <h3 className="text-2xl font-black font-mono uppercase mb-6">Design 3: Event Calendar</h3>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="md:col-span-2 bg-yellow-400 border-8 border-black shadow-[12px_12px_0px_0px_rgba(0,0,0,1)]">
              <div className="bg-black text-white p-4 flex justify-between items-center border-b-8 border-black">
                <button
                  onClick={prevMonth}
                  className="bg-yellow-400 text-black p-2 font-bold border-4 border-white transform transition-transform active:translate-y-1 active:translate-x-1"
                >
                  <ChevronLeft className="h-6 w-6" />
                </button>

<h2 className="text-3xl font-black font-mono uppercase">
                  {months[month]} {year}
                </h2>

<div className="grid grid-cols-7 border-b-8 border-black">
                {daysOfWeek.map((day) => (
                  <div
                    key={day}
                    className="text-center py-2 font-mono font-bold text-lg border-r-4 last:border-r-0 border-black bg-black text-white"
                  >
                    {day}
                  </div>
                ))}
              </div>

<div className="grid grid-cols-7">
                {days.map((day, index) => (
                  <div
                    key={index}
                    className={`
                      min-h-20 p-2 border-r-4 border-b-4 last:border-r-0 border-black font-mono font-bold text-xl
                      ${isToday(day) ? "bg-yellow-300" : ""}
                      ${isSelected(day) ? "bg-blue-300" : ""}
                      ${day ? "cursor-pointer hover:bg-opacity-80" : "bg-gray-200"}
                      relative
                    `}
                    onClick={() => handleDateClick(day)}
                  >
                    <div className="flex justify-between items-start">
                      <span>{day}</span>
                      {hasEvent(day) && (
                        <div className="flex flex-wrap gap-1">
                          {getEventsForDay(day).map((event) => (
                            <div
                              key={event.id}
                              className={`w-3 h-3 ${getEventTypeColor(event.type)} border-2 border-black`}
                            ></div>
                          ))}
                        </div>
                      )}
                    </div>
                    {hasEvent(day) && (
                      <div className="mt-1 space-y-1">
                        {getEventsForDay(day).map((event) => (
                          <div
                            key={event.id}
                            className={`${getEventTypeColor(event.type)} border-2 border-black p-1 text-xs font-mono font-bold truncate`}
                          >
                            {event.time} - {event.title}
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </div>

<div className="bg-white border-8 border-black shadow-[12px_12px_0px_0px_rgba(0,0,0,1)]">
              <div className="bg-black text-white p-4 border-b-8 border-black">
                <h2 className="text-2xl font-black font-mono uppercase">
                  {selectedDate
                    ? `Events for ${selectedDate.getDate()} ${months[selectedDate.getMonth()]}`
                    : "Event Details"}
                </h2>
              </div>

<div className="p-4">
                {selectedDate ? (
                  <>
                    {getEventsForDay(selectedDate.getDate()).length > 0 ? (
                      <div className="space-y-4">
                        {getEventsForDay(selectedDate.getDate()).map((event) => (
                          <div key={event.id} className="border-4 border-black p-4">
                            <div
                              className={`${getEventTypeColor(event.type)} border-4 border-black inline-block px-2 py-1 mb-2 font-mono font-bold text-sm uppercase`}
                            >
                              {event.type}
                            </div>
                            <h3 className="text-xl font-black font-mono">{event.title}</h3>
                            <div className="flex items-center mt-2 font-mono">
                              <Clock className="mr-2 h-4 w-4" />
                              {event.time}
                            </div>
                            <div className="mt-4 flex justify-between">
                              <NeoBrutalistButton variant="secondary" size="sm">
                                Edit
                              </NeoBrutalistButton>
                              <NeoBrutalistButton variant="danger" size="sm">
                                Delete
                              </NeoBrutalistButton>
                            </div>
                          </div>
                        ))}
                      </div>
                    ) : (
                      <div className="text-center py-8">
                        <p className="font-mono mb-4">No events for this date</p>
                        <NeoBrutalistButton variant="primary">
                          <Plus className="mr-2 h-4 w-4" />
                          Add Event
                        </NeoBrutalistButton>
                      </div>
                    )}
                  </>
                ) : (
                  <div className="text-center py-8">
                    <p className="font-mono mb-4">Select a date to view events</p>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      )}

{/* Design 4: Appointment Scheduler */}
      {activeCalendar === "appointment" && (
        <div>
          <h3 className="text-2xl font-black font-mono uppercase mb-6">Design 4: Appointment Scheduler</h3>
          <div className="bg-red-400 border-8 border-black shadow-[12px_12px_0px_0px_rgba(0,0,0,1)]">
            <div className="bg-black text-white p-4 border-b-8 border-black">
              <h2 className="text-3xl font-black font-mono uppercase">Schedule an Appointment</h2>
            </div>

<div className="grid grid-cols-1 md:grid-cols-2">
              <div className="p-6 border-b-8 md:border-b-0 md:border-r-8 border-black">
                <div className="bg-black text-white p-2 mb-4">
                  <h3 className="font-mono font-bold text-lg">1. Select a Date</h3>
                </div>

<h4 className="text-lg font-black font-mono">
                      {months[month]} {year}
                    </h4>

<div className="grid grid-cols-7 border-b-2 border-black">
                    {daysOfWeek.map((day) => (
                      <div key={day} className="text-center py-1 font-mono font-bold text-sm">
                        {day.charAt(0)}
                      </div>
                    ))}
                  </div>

<div className="grid grid-cols-7 gap-1 mt-2">
                    {days.map((day, index) => (
                      <div
                        key={index}
                        className={`
                          text-center py-1 font-mono font-bold text-sm
                          ${isToday(day) ? "bg-yellow-300 border-2 border-black" : ""}
                          ${isSelected(day) ? "bg-red-300 border-2 border-black" : ""}
                          ${day ? "cursor-pointer hover:bg-gray-100" : "text-gray-400"}
                        `}
                        onClick={() => handleDateClick(day)}
                      >
                        {day}
                      </div>
                    ))}
                  </div>
                </div>

<div className="bg-black text-white p-2 my-4">
                  <h3 className="font-mono font-bold text-lg">2. Select a Time</h3>
                </div>

<div className="p-6">
                <div className="bg-black text-white p-2 mb-4">
                  <h3 className="font-mono font-bold text-lg">3. Your Information</h3>
                </div>

<div className="space-y-2">
                    <Label htmlFor="email" className="font-mono font-bold">
                      Email
                    </Label>
                    <Input
                      id="email"
                      type="email"
                      placeholder="your@email.com"
                      className="border-4 border-black font-mono placeholder:text-gray-500 focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-0"
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="phone" className="font-mono font-bold">
                      Phone
                    </Label>
                    <Input
                      id="phone"
                      placeholder="(123) 456-7890"
                      className="border-4 border-black font-mono placeholder:text-gray-500 focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-0"
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="appointmentType" className="font-mono font-bold">
                      Appointment Type
                    </Label>
                    <Select>
                      <SelectTrigger className="border-4 border-black font-mono focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-0">
                        <SelectValue placeholder="Select type" />
                      </SelectTrigger>
                      <SelectContent className="border-4 border-black font-mono">
                        <SelectItem value="consultation">Consultation</SelectItem>
                        <SelectItem value="followup">Follow-up</SelectItem>
                        <SelectItem value="initial">Initial Meeting</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="notes" className="font-mono font-bold">
                      Notes
                    </Label>
                    <textarea
                      id="notes"
                      placeholder="Any additional information..."
                      className="w-full border-4 border-black p-2 font-mono placeholder:text-gray-500 focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-0"
                      rows={3}
                    >

Book Appointment

)} {/* Design 5: Date Picker */} {activeCalendar === "datepicker" && (

Design 5: Date Picker

Single Date Picker

Select Date

{months[month]} {year}

{daysOfWeek.map((day) => (

{day.charAt(0)}

))}

{days.map((day, index) => (

handleDateClick(day)} > {day}

))}

setSelectedDate(null)}> Clear Apply

Range Date Picker

Start Date

End Date

{months[month]} {year}

{daysOfWeek.map((day) => (

{day.charAt(0)}

))}

{days.map((day, index) => (

handleDateClick(day)} > {day}

))}

Today This Week

Apply

)}

) } [V0_FILE]typescriptreact:file="components/neo-brutalist-chart.tsx" isEdit="true" isMerged="true" "use client" import { Bar, Line, Pie } from "@/components/ui/chart" import { NeoBrutalistButton } from "@/components/neo-brutalist-buttons" import { useState } from "react" export function NeoBrutalistChart() { const [activeChart, setActiveChart] = useState("bar") // Sample data for charts const barData = [ { name: "Jan", value: 400 }, { name: "Feb", value: 300 }, { name: "Mar", value: 600 }, { name: "Apr", value: 200 }, { name: "May", value: 700 }, { name: "Jun", value: 500 }, ] const lineData = [ { name: "Week 1", value: 100 }, { name: "Week 2", value: 300 }, { name: "Week 3", value: 200 }, { name: "Week 4", value: 500 }, { name: "Week 5", value: 400 }, { name: "Week 6", value: 600 }, { name: "Week 7", value: 450 }, { name: "Week 8", value: 650 }, ] const pieData = [ { name: "Product A", value: 400 }, { name: "Product B", value: 300 }, { name: "Product C", value: 200 }, { name: "Product D", value: 100 }, ] const comparisonData = [ { name: "Jan", current: 400, previous: 300 }, { name: "Feb", current: 300, previous: 400 }, { name: "Mar", current: 600, previous: 500 }, { name: "Apr", current: 200, previous: 300 }, { name: "May", current: 700, previous: 600 }, { name: "Jun", current: 500, previous: 400 }, ] const statsData = { revenue: [ { name: "Jan", value: 4000 }, { name: "Feb", value: 3000 }, { name: "Mar", value: 6000 }, { name: "Apr", value: 2000 }, { name: "May", value: 7000 }, { name: "Jun", value: 5000 }, ], users: [ { name: "Jan", value: 1000 }, { name: "Feb", value: 1500 }, { name: "Mar", value: 2000 }, { name: "Apr", value: 2500 }, { name: "May", value: 3000 }, { name: "Jun", value: 3500 }, ], orders: [ { name: "Jan", value: 200 }, { name: "Feb", value: 300 }, { name: "Mar", value: 400 }, { name: "Apr", value: 300 }, { name: "May", value: 500 }, { name: "Jun", value: 600 }, ], } return (

Chart Designs

setActiveChart("bar")} > Bar Chart setActiveChart("line")} > Line Chart setActiveChart("pie")} > Pie Chart setActiveChart("comparison")} > Comparison Chart setActiveChart("dashboard")} > Stats Dashboard

{/* Design 1: Bar Chart */} {activeChart === "bar" && (

Design 1: Bar Chart

Sales Data

`$${value}`} className="[&_.recharts-cartesian-grid-horizontal_line]:stroke-black [&_.recharts-cartesian-grid-horizontal_line]:stroke-[3px] [&_.recharts-cartesian-grid-vertical_line]:stroke-black [&_.recharts-cartesian-grid-vertical_line]:stroke-[3px] [&_.recharts-cartesian-axis-line]:stroke-black [&_.recharts-cartesian-axis-line]:stroke-[4px] [&_.recharts-cartesian-axis-tick-line]:stroke-black [&_.recharts-cartesian-axis-tick-line]:stroke-[4px] [&_.recharts-rectangle]:stroke-black [&_.recharts-rectangle]:stroke-[4px]" />

{["Q1", "Q2", "YTD"].map((period) => (

{period} Growth

+{Math.floor(Math.random() * 30) + 10}%

))}

)} {/* Design 2: Line Chart */} {activeChart === "line" && (

Design 2: Line Chart

Weekly Trends

`${value} units`} className="[&_.recharts-cartesian-grid-horizontal_line]:stroke-black [&_.recharts-cartesian-grid-horizontal_line]:stroke-[2px] [&_.recharts-cartesian-grid-vertical_line]:stroke-black [&_.recharts-cartesian-grid-vertical_line]:stroke-[2px] [&_.recharts-cartesian-axis-line]:stroke-black [&_.recharts-cartesian-axis-line]:stroke-[4px] [&_.recharts-cartesian-axis-tick-line]:stroke-black [&_.recharts-cartesian-axis-tick-line]:stroke-[4px] [&_.recharts-line]:stroke-black [&_.recharts-line]:stroke-[4px] [&_.recharts-dot]:stroke-black [&_.recharts-dot]:stroke-[4px] [&_.recharts-dot]:fill-blue-400" />

Growth Rate

+28.5%

View Report

)} {/* Design 3: Pie Chart */} {activeChart === "pie" && (

Design 3: Pie Chart

Product Distribution

`${value} units`} className="[&_.recharts-sector]:stroke-black [&_.recharts-sector]:stroke-[4px]" />

{pieData.map((item, index) => (

{item.name}

{item.value} units {Math.round((item.value / pieData.reduce((acc, curr) => acc + curr.value, 0)) * 100)}%

))}

Total {pieData.reduce((acc, curr) => acc + curr.value, 0)} units

)} {/* Design 4: Comparison Chart */} {activeChart === "comparison" && (

Design 4: Comparison Chart

Year-over-Year Comparison

`$${value}`} className="[&_.recharts-cartesian-grid-horizontal_line]:stroke-black [&_.recharts-cartesian-grid-horizontal_line]:stroke-[2px] [&_.recharts-cartesian-grid-vertical_line]:stroke-black [&_.recharts-cartesian-grid-vertical_line]:stroke-[2px] [&_.recharts-cartesian-axis-line]:stroke-black [&_.recharts-cartesian-axis-line]:stroke-[4px] [&_.recharts-cartesian-axis-tick-line]:stroke-black [&_.recharts-cartesian-axis-tick-line]:stroke-[4px] [&_.recharts-rectangle]:stroke-black [&_.recharts-rectangle]:stroke-[2px]" />

Current Year

${comparisonData.reduce((acc, curr) => acc + curr.current, 0)}

Total Revenue

Previous Year

${comparisonData.reduce((acc, curr) => acc + curr.previous, 0)}

Total Revenue

Growth

+ {Math.round( (comparisonData.reduce((acc, curr) => acc + curr.current, 0) / comparisonData.reduce((acc, curr) => acc + curr.previous, 0) - 1) * 100, )} %

Export Data

)} {/* Design 5: Stats Dashboard */} {activeChart === "dashboard" && (

Design 5: Stats Dashboard

Business Dashboard

Revenue

$27,500

↑ 12.5%

Users

13,500

↑ 8.2%

Orders

2,300

↓ 3.1%

Revenue Trend

`$${value}`} showLegend={false} showXAxis={false} showYAxis={false} showGridLines={false} className="[&_.recharts-line]:stroke-black [&_.recharts-line]:stroke-[3px] [&_.recharts-dot]:stroke-black [&_.recharts-dot]:stroke-[2px] [&_.recharts-dot]:fill-red-400" />

User Growth

`${value}`} showLegend={false} showXAxis={false} showYAxis={false} showGridLines={false} className="[&_.recharts-line]:stroke-black [&_.recharts-line]:stroke-[3px] [&_.recharts-dot]:stroke-black [&_.recharts-dot]:stroke-[2px] [&_.recharts-dot]:fill-red-400" />

Orders by Month

`${value}`} showLegend={false} showGridLines={false} className="[&_.recharts-cartesian-axis-line]:stroke-black [&_.recharts-cartesian-axis-line]:stroke-[2px] [&_.recharts-cartesian-axis-tick-line]:stroke-black [&_.recharts-cartesian-axis-tick-line]:stroke-[2px] [&_.recharts-rectangle]:stroke-black [&_.recharts-rectangle]:stroke-[2px]" />

)}

) } [V0_FILE]typescriptreact:file="components/ui/chart.tsx" isEdit="true" isMerged="true" "use client" import { BarChart, Bar as RechartsBar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, LineChart, Line as RechartsLine, PieChart, Pie as RechartsPie, Cell, Legend, } from "recharts" interface ChartProps { data: any[] index: string categories: string[] colors: string[] valueFormatter?: (value: number) => string className?: string showLegend?: boolean showXAxis?: boolean showYAxis?: boolean showGridLines?: boolean } export function Bar({ data, index, categories, colors, valueFormatter, className, showLegend = true, showXAxis = true, showYAxis = true, showGridLines = true, }: ChartProps) { return ( {showGridLines && } {showXAxis && } {showYAxis && } (valueFormatter ? [valueFormatter(value)] : [value])} /> {showLegend && } {categories.map((category, i) => ( ))} ) } export function Line({ data, index, categories, colors, valueFormatter, className, showLegend = true, showXAxis = true, showYAxis = true, showGridLines = true, }: ChartProps) { return ( {showGridLines && } {showXAxis && } {showYAxis && } (valueFormatter ? [valueFormatter(value)] : [value])} /> {showLegend && } {categories.map((category, i) => ( ))} ) } export function Pie({ data, index, categories, colors, valueFormatter, className, showLegend = true }: ChartProps) { return ( {data.map((entry, i) => ( ))} (valueFormatter ? [valueFormatter(value)] : [value])} /> {showLegend && } ) } [V0_FILE]png:file="public/abstract-geometric-brutalist.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-geometric-brutalist-MAepxCa8T5YiRILoqzbHhBqxqMrw38.png" isMerged="true" [V0_FILE]typescriptreact:file="components/neo-brutalist-accordion.tsx" isEdit="true" isMerged="true" "use client" import { AccordionItem } from "./accordion-item" import { AccordionShowcase } from "./accordion-showcase" // Code strings for each accordion design const basicAccordionCode = `

Neo-brutalism is a design trend that embraces raw, unfiltered aesthetics. It features bold colors, thick borders, and a deliberately unpolished look that stands in contrast to minimalist design.

Key characteristics include high-contrast colors, bold typography, and geometric shapes with a raw, unrefined appearance.

To implement neo-brutalism in your designs:

Use thick, black borders (4-8px)
Choose bold, saturated colors
Implement harsh shadows (often black)
Use monospaced fonts
Embrace asymmetry and raw layouts

Neo-brutalism works well for creative projects, portfolios, and brands that want to stand out with a bold, unconventional aesthetic. It's particularly effective for design agencies, art platforms, and youth-oriented brands that want to break away from conventional design patterns.

` const stackedAccordionCode = `

FREQUENTLY ASKED QUESTIONS

To place an order, simply browse our products, select the items you want, and add them to your cart. When you're ready, proceed to checkout and follow the instructions to complete your purchase.

We accept all major credit cards (Visa, Mastercard, American Express), PayPal, and Apple Pay. All transactions are secure and encrypted.

We offer a 30-day return policy for all unused and unopened items. Please contact our customer service team to initiate a return. Shipping costs for returns are the responsibility of the customer unless the item was damaged or defective.

Standard shipping typically takes 3-5 business days within the continental US. International shipping can take 7-14 business days depending on the destination country. Express shipping options are available at checkout.

` const offsetAccordionCode = `

PRODUCT SPECIFICATIONS

Dimensions

Height: 12 inches
Width: 8 inches
Depth: 4 inches

Weight

Product: 2.5 lbs
Shipping: 3.2 lbs

{/* Content here */} {/* Content here */}

` const iconAccordionCode = `

SHIPPING INFO

Standard (3-5 business days): $5.99

Express (2 business days): $12.99

Overnight (1 business day): $24.99

Free shipping on orders over $75

Standard (7-14 business days): $19.99

Express (3-5 business days): $39.99

Import duties and taxes not included

SUPPORT

{/* Content here */} {/* Content here */}

` const nestedAccordionCode = `

PRODUCT CATEGORIES

Laptops
Desktops
Tablets
Accessories

{/* Content here */}

{/* Content here */} {/* Content here */}

{/* Content here */}

` // Component designs const BasicAccordionDesign = () => (

Neo-brutalism is a design trend that embraces raw, unfiltered aesthetics. It features bold colors, thick borders, and a deliberately unpolished look that stands in contrast to minimalist design.

Key characteristics include high-contrast colors, bold typography, and geometric shapes with a raw, unrefined appearance.

To implement neo-brutalism in your designs:

Use thick, black borders (4-8px)
Choose bold, saturated colors
Implement harsh shadows (often black)
Use monospaced fonts
Embrace asymmetry and raw layouts

) const StackedAccordionDesign = () => (

FREQUENTLY ASKED QUESTIONS

To place an order, simply browse our products, select the items you want, and add them to your cart. When you're ready, proceed to checkout and follow the instructions to complete your purchase.

We accept all major credit cards (Visa, Mastercard, American Express), PayPal, and Apple Pay. All transactions are secure and encrypted.

) const OffsetAccordionDesign = () => (

PRODUCT SPECIFICATIONS

Dimensions

Height: 12 inches
Width: 8 inches
Depth: 4 inches

Weight

Product: 2.5 lbs
Shipping: 3.2 lbs

Our product is crafted from the following materials:

Aircraft-grade aluminum frame
High-density polymer shell
Silicone grip pads
Stainless steel hardware

All components are assembled by hand in our workshop to ensure the highest quality standards.

Power Requirements

Input: 100-240V AC, 50/60Hz

Output: 5V DC, 2.1A

Connectivity

Bluetooth 5.0, Wi-Fi 6 (802.11ax)

USB-C port, 3.5mm audio jack

Battery Life

Up to 12 hours of continuous use

Standby time: 30 days

) const IconAccordionDesign = () => (

SHIPPING INFO

Standard (3-5 business days): $5.99

Express (2 business days): $12.99

Overnight (1 business day): $24.99

Free shipping on orders over $75

Standard (7-14 business days): $19.99

Express (3-5 business days): $39.99

Import duties and taxes not included

SUPPORT

Email: support@example.com

Phone: (123) 456-7890

Live Chat: Available 24/7

Monday-Friday: 9am - 8pm EST

Saturday: 10am - 6pm EST

Sunday: Closed

) const NestedAccordionDesign = () => (

PRODUCT CATEGORIES

Laptops
Desktops
Tablets
Accessories

Headphones
Speakers
Microphones
Amplifiers

Shirts
Pants
Outerwear
Accessories

Dresses
Tops
Bottoms
Accessories

Living Room
Bedroom
Dining Room
Office

Wall Art
Lighting
Rugs
Decorative Accents

) export function NeoBrutalistAccordion() { return (

Accordion Designs

{/* Design 1: Basic Accordion */} } codeString={basicAccordionCode} /> {/* Design 2: Stacked Accordion */} } codeString={stackedAccordionCode} /> {/* Design 3: Offset Accordion */} } codeString={offsetAccordionCode} /> {/* Design 4: Icon Accordion */} } codeString={iconAccordionCode} /> {/* Design 5: Nested Accordion */} } codeString={nestedAccordionCode} />

) } [V0_FILE]typescriptreact:file="app/accordion-preview/page.tsx" isEdit="true" isMerged="true" import { NeoBrutalistAccordion } from "@/components/neo-brutalist-accordion" export default function AccordionPreviewPage() { return (

Neo-Brutalist Accordion

Five different accordion design variations with preview and code CTAs

) } [V0_FILE]typescriptreact:file="components/accordion-item.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import { ChevronDown } from "lucide-react" import { cn } from "@/lib/utils" interface AccordionItemProps { title: string children: React.ReactNode defaultOpen?: boolean color?: "yellow" | "blue" | "red" | "green" | "pink" | "purple" | "black" | "white" } export function AccordionItem({ title, children, defaultOpen = false, color = "yellow" }: AccordionItemProps) { const [isOpen, setIsOpen] = React.useState(defaultOpen) const colorStyles = { yellow: "bg-yellow-400 hover:bg-yellow-500", blue: "bg-blue-400 hover:bg-blue-500", red: "bg-red-400 hover:bg-red-500", green: "bg-green-400 hover:bg-green-500", pink: "bg-pink-400 hover:bg-pink-500", purple: "bg-purple-400 hover:bg-purple-500", black: "bg-black text-white hover:bg-gray-900", white: "bg-white text-black hover:bg-gray-100", } return (

{children}

) } [V0_FILE]typescriptreact:file="components/accordion-showcase.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import * as React from "react" import { Code, Eye } from "lucide-react" import { cn } from "@/lib/utils" import { NeoBrutalistButton } from "./neo-brutalist-buttons" interface AccordionShowcaseProps { title: string description?: string designComponent: React.ReactNode codeString: string } export function AccordionShowcase({ title, description, designComponent, codeString }: AccordionShowcaseProps) { const [activeView, setActiveView] = React.useState<"design" | "code">("design") const [copied, setCopied] = React.useState(false) const copyToClipboard = () => { navigator.clipboard.writeText(codeString) setCopied(true) setTimeout(() => setCopied(false), 2000) } return (

{title}

{description &&

{description}

}

setActiveView("design")} > Preview Design setActiveView("code")} >


          View Code



      
        {designComponent}
      

      
        
          
                      {codeString}


  )
}
[V0_FILE]typescriptreact:file="components/neo-brutalist-alert.tsx" isMerged="true"
"use client"

import type React from "react"

import { AlertTriangle, Info, CheckCircle, XCircle, X } from "lucide-react"
import { useState } from "react"
import { cn } from "@/lib/utils"
import { NeoBrutalistButton } from "./neo-brutalist-buttons"

interface AlertProps {
  variant?: "default" | "destructive" | "success" | "warning"
  title?: string
  description?: string
  icon?: boolean
  dismissible?: boolean
  className?: string
  children?: React.ReactNode
}

function Alert({
  variant = "default",
  title,
  description,
  icon = true,
  dismissible = false,
  className,
  children,
}: AlertProps) {
  const [dismissed, setDismissed] = useState(false)

  if (dismissed) return null

  const variantStyles = {
    default: "bg-blue-400 border-black",
    destructive: "bg-red-500 border-black",
    success: "bg-green-500 border-black",
    warning: "bg-yellow-400 border-black",
  }

  const variantIcon = {
    default: Info,
    destructive: XCircle,
    success: CheckCircle,
    warning: AlertTriangle,
  }

  const Icon = variantIcon[variant]

  return (
    
      
        {icon && (
          
            
          
        )}
        
          {title && {title}}
          {description && {description}}
          {children}
        
        {dismissible && (
          
            
          
        )}
      
    
  )
}

export function NeoBrutalistAlert() {
  return (
    
      
        Alert Designs
      

      {/* Design 1: Basic Alerts */}
      
        Design 1: Basic Alerts
        
          
          
          
          
        
      

      {/* Design 2: Dismissible Alerts */}
      
        Design 2: Dismissible Alerts
        
          
          
        
      

      {/* Design 3: Alerts with Actions */}
      
        Design 3: Alerts with Actions
        
          
            
              A new version of the application is available. Would you like to update now?
              
                
                  Update Now
                
                
                  Remind Me Later
                
              
            
          

          
            
              Are you sure you want to delete this item? This action cannot be undone.
              
                
                  Delete
                
                
                  Cancel
                
              
            
          
        
      

      {/* Design 4: Styled Alerts */}
      
        Design 4: Styled Alerts
        
          
            
            
          

          

          
        
      

      {/* Design 5: Banner Alerts */}
      
        Design 5: Banner Alerts
        
          

          
            
          

          
            
              Subscription Activated
              Your premium subscription has been successfully activated.
            
            
              View Account
            
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/neo-brutalist-alert-dialog.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { NeoBrutalistButton } from "./neo-brutalist-buttons"
import { AlertTriangle, Info, CheckCircle, XCircle } from "lucide-react"

export function NeoBrutalistAlertDialog() {
  const [isOpen, setIsOpen] = useState(false)
  const [activeDialog, setActiveDialog] = useState(null)

  const openDialog = (dialogType: string) => {
    setActiveDialog(dialogType)
    setIsOpen(true)
  }

  const closeDialog = () => {
    setIsOpen(false)
  }

  return (
    
      
        Alert Dialog Designs
      

      {/* Design 1: Basic Alert Dialogs */}
      
        Design 1: Basic Alert Dialogs
        
          
            Confirmation Dialog
            A simple confirmation dialog with confirm and cancel actions.
             openDialog("confirmation")}>Open Confirmation Dialog
          

          
            Destructive Dialog
            A dialog for destructive actions that require confirmation.
             openDialog("destructive")}>
              Open Destructive Dialog
            
          
        
      

      {/* Design 2: Styled Alert Dialogs */}
      
        Design 2: Styled Alert Dialogs
        
          
            Warning Dialog
            A warning dialog with a distinctive style.
             openDialog("warning")}>
              Open Warning Dialog
            
          

          
            Success Dialog
            A success dialog with a positive message.
             openDialog("success")}>
              Open Success Dialog
            
          
        
      

      {/* Design 3: Dialog with Form */}
      
        Design 3: Dialog with Form
        
          Form Dialog
          A dialog containing a form for user input.
           openDialog("form")}>Open Form Dialog
        
      

      {/* Alert Dialog Overlay */}
      {isOpen && (
        
          {/* Confirmation Dialog */}
          {activeDialog === "confirmation" && (
            
              
                
                Confirmation
              
              
                Are you sure you want to continue with this action?
                
                  
                    Cancel
                  
                  Confirm
                
              
            
          )}

          {/* Destructive Dialog */}
          {activeDialog === "destructive" && (
            
              
                
                Delete Item
              
              
                
                  This action cannot be undone. Are you sure you want to delete this item?
                
                
                  
                    Cancel
                  
                  
                    Delete
                  
                
              
            
          )}

          {/* Warning Dialog */}
          {activeDialog === "warning" && (
            
              
                
                Warning
              
              
                This action might have consequences. Proceed with caution.
                
                  
                    Cancel
                  
                  
                    Proceed Anyway
                  
                
              
            
          )}

          {/* Success Dialog */}
          {activeDialog === "success" && (
            
              
                
                Success
              
              
                Your action was completed successfully!
                
                  
                    Awesome!
                  
                
              
            
          )}

          {/* Form Dialog */}
          {activeDialog === "form" && (
            
              
                Subscribe to Newsletter
              
              
                
                  
                    Name
                    
                  
                  
                    Email
                    
                  
                  
                    
                    
                      I agree to receive newsletters
                    
                  
                  
                    
                      Cancel
                    
                    
                      Subscribe
                    
                  
                
              
            
          )}
        
      )}
    
  )
}
[V0_FILE]typescriptreact:file="components/neo-brutalist-aspect-ratio.tsx" isMerged="true"
"use client"

import type React from "react"

import { cn } from "@/lib/utils"

interface AspectRatioProps {
  ratio?: number
  className?: string
  children: React.ReactNode
}

function AspectRatio({ ratio = 16 / 9, className, children }: AspectRatioProps) {
  return (
    
      {children}
    
  )
}

export function NeoBrutalistAspectRatio() {
  return (
    
      
        Aspect Ratio Designs
      

      {/* Design 1: Basic Aspect Ratios */}
      
        Design 1: Basic Aspect Ratios
        
          
            16:9 Ratio
            
              
            
          

          
            4:3 Ratio
            
              
            
          

          
            1:1 Ratio (Square)
            
              
            
          
        
      

      {/* Design 2: Styled Aspect Ratios */}
      
        Design 2: Styled Aspect Ratios
        
          
            
            
              
            
          

          
            
              
            
          
        
      

      {/* Design 3: Content in Aspect Ratio */}
      
        Design 3: Content in Aspect Ratio
        
          
            
              
                Video Placeholder
                16:9 aspect ratio for video content
              
            
          

          
            
              
                Profile Card
                1:1 aspect ratio for profile content
              
            
          
        
      

      {/* Design 4: Nested Aspect Ratios */}
      
        Design 4: Nested Aspect Ratios
        
          Product Gallery
          
            
              
            

            
              
            

            
              
            
          
        
      

      {/* Design 5: Interactive Aspect Ratios */}
      
        Design 5: Interactive Aspect Ratios
        
          
            
              
              
                View Details
              
            
          

          
            
              
              
                View Details
              
            
          

          
            
              
              
                View Details
              
            
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/neo-brutalist-avatar.tsx" isMerged="true"
"use client"

import { cn } from "@/lib/utils"

interface AvatarProps {
  src?: string
  alt?: string
  initials?: string
  size?: "sm" | "md" | "lg" | "xl"
  shape?: "circle" | "square"
  className?: string
}

function Avatar({ src, alt = "", initials, size = "md", shape = "circle", className }: AvatarProps) {
  const sizeStyles = {
    sm: "w-8 h-8 text-xs",
    md: "w-12 h-12 text-sm",
    lg: "w-16 h-16 text-base",
    xl: "w-24 h-24 text-xl",
  }

  const shapeStyles = {
    circle: "rounded-full",
    square: "rounded-none",
  }

  return (
    
      {src ? (
        
      ) : (
        {initials}
      )}
    
  )
}

export function NeoBrutalistAvatar() {
  return (
    
      
        Avatar Designs
      

      {/* Design 1: Basic Avatars */}
      
        Design 1: Basic Avatars
        
          
            
            Small
          

          
            
            Medium
          

          
            
            Large
          

          
            
            Extra Large
          
        
      

      {/* Design 2: Avatar Shapes */}
      
        Design 2: Avatar Shapes
        
          
            
            Circle
          

          
            
            Square
          

          
            
            Rotated
          
        
      

      {/* Design 3: Initials Avatars */}
      
        Design 3: Initials Avatars
        
          
            
            John Doe
          

          
            
            Alice Smith
          

          
            
            Robert Johnson
          

          
            
            Mary Williams
          
        
      

      {/* Design 4: Styled Avatars */}
      
        Design 4: Styled Avatars
        
          
            
              
              
            
            Offset
          

          
            
            Thick Border
          

          
            
            Dashed Border
          
        
      

      {/* Design 5: Avatar Groups */}
      
        Design 5: Avatar Groups
        
          
            Overlapping Group
            
              
              
              
              
            
          

          
            Team Group
            
              
                
                  
                  
                  
                
                Design Team
              
            
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/neo-brutalist-badge.tsx" isMerged="true"
"use client"

import type React from "react"

import { cn } from "@/lib/utils"

interface BadgeProps {
  variant?: "default" | "secondary" | "destructive" | "success" | "warning" | "outline"
  size?: "sm" | "md" | "lg"
  className?: string
  children: React.ReactNode
}

function Badge({ variant = "default", size = "md", className, children }: BadgeProps) {
  const variantStyles = {
    default: "bg-black text-white border-black",
    secondary: "bg-white text-black border-black",
    destructive: "bg-red-500 text-white border-black",
    success: "bg-green-500 text-white border-black",
    warning: "bg-yellow-400 text-black border-black",
    outline: "bg-transparent text-black border-black",
  }

  const sizeStyles = {
    sm: "text-xs px-2 py-0.5",
    md: "text-sm px-3 py-1",
    lg: "text-base px-4 py-1.5",
  }

  return (
    
      {children}
    
  )
}

export function NeoBrutalistBadge() {
  return (
    
      
        Badge Designs
      

      {/* Design 1: Basic Badges */}
      
        Design 1: Basic Badges
        
          Default
          Secondary
          Destructive
          Success
          Warning
          Outline
        
      

      {/* Design 2: Badge Sizes */}
      
        Design 2: Badge Sizes
        
          
            Small
          
          
            Medium
          
          
            Large
          
        
      

      {/* Design 3: Styled Badges */}
      
        Design 3: Styled Badges
        
          
            Shadow
          
          
            Dashed
          
          
            Rotated
          
          
            Rounded
          
        
      

      {/* Design 4: Badges in Context */}
      
        Design 4: Badges in Context
        
          
            
              Product Status
              In Stock
            
            This product is currently available for purchase.
          

          
            
              Order Status
              Processing
            
            Your order is currently being processed.
          
        
      

      {/* Design 5: Badge Combinations */}
      
        Design 5: Badge Combinations
        
          
            
              Product Tags:
              
                New
              
              
                Limited
              
              
                Featured
              
              
                Sale
              
            
          

          
            
              
                
                  3
                
              
              
                Notifications
              
            

            
              
                
                  New
                
              
              
                Messages
              
            
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/neo-brutalist-breadcrumb.tsx" isMerged="true"
"use client"

import type React from "react"

import { ChevronRight, Home } from "lucide-react"
import { cn } from "@/lib/utils"

interface BreadcrumbProps {
  items: {
    label: string
    href?: string
    icon?: React.ReactNode
  }[]
  separator?: React.ReactNode
  className?: string
}

function Breadcrumb({ items, separator = , className }: BreadcrumbProps) {
  return (
    
      
        {items.map((item, index) => {
          const isLast = index === items.length - 1

          return (
            
              {index > 0 && (
                
                  {separator}
                
              )}

              {isLast ? (
                
                  {item.icon && {item.icon}}
                  {item.label}
                
              ) : (
                
                  {item.icon && {item.icon}}
                  {item.label}
                
              )}
            
          )
        })}
      
    
  )
}

export function NeoBrutalistBreadcrumb() {
  return (
    
      
        Breadcrumb Designs
      

      {/* Design 1: Basic Breadcrumbs */}
      
        Design 1: Basic Breadcrumbs
        
      

      {/* Design 2: Breadcrumbs with Icons */}
      
        Design 2: Breadcrumbs with Icons
         },
            { label: "Products", href: "#" },
            { label: "Laptops", href: "#" },
            { label: "MacBook Pro" },
          ]}
        />
      

      {/* Design 3: Styled Breadcrumbs */}
      
        Design 3: Styled Breadcrumbs
        
          /}
          />
        
      

      {/* Design 4: Neo-Brutalist Breadcrumbs */}
      
        Design 4: Neo-Brutalist Breadcrumbs
        
          
            
              
                Home
              
            
            
              
            
            
              
                Products
              
            
            
              
            
            
              
                Current Page
              
            
          
        
      

      {/* Design 5: Responsive Breadcrumbs */}
      
        Design 5: Responsive Breadcrumbs
        
          
            
          
          
            
          
        
      
    
  )
}
[V0_FILE]png:file="public/abstract-geometric-shapes.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-geometric-shapes-0xNoh0LVz3IHELRYxxBlaZK6XLSLF4.png" isMerged="true"
[V0_FILE]png:file="public/placeholder-msxjd.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/abstract-geometric-pattern.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-geometric-pattern-PVPE8a4zE1CxuMyE9lzNBJyFsVskYE.png" isMerged="true"
[V0_FILE]png:file="public/placeholder-650rc.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/placeholder-sce1z.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/neo-brutalist-buttons.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import { cn } from "@/lib/utils"
import { ComponentShowcase } from "./component-showcase"

interface ButtonProps {
  variant?: "primary" | "secondary" | "danger" | "success" | "warning"
  size?: "sm" | "md" | "lg"
  className?: string
  children: React.ReactNode
  onClick?: () => void
}

export function NeoBrutalistButton({
  variant = "primary",
  size = "md",
  className,
  children,
  onClick,
  ...props
}: ButtonProps & React.ButtonHTMLAttributes) {
  const variantStyles = {
    primary: "bg-black text-white border-black",
    secondary: "bg-white text-black border-black",
    danger: "bg-red-500 text-white border-black",
    success: "bg-green-500 text-white border-black",
    warning: "bg-yellow-400 text-black border-black",
  }

  const sizeStyles = {
    sm: "text-sm px-3 py-1",
    md: "text-base px-4 py-2",
    lg: "text-xl px-6 py-3",
  }

  return (
    
  )
}

// Code for button variants showcase
const buttonVariantsCode = `Primary Button
Secondary Button
Danger Button
Success Button
Warning Button`

const buttonSizesCode = `Small Button
Medium Button
Large Button`

const buttonStatesCode = `// Default State
Default State

// Hover State (CSS handles this)

  Hover State


// Active State (CSS handles this)

  Active State
`

const buttonWithIconsCode = `
  
  Add New



  
  Download
`

export function NeoBrutalistButtons() {
  // Button Variants Showcase
  const ButtonVariantsDesign = () => (
    
      Primary
      Secondary
      Danger
      Success
      Warning
    
  )

  // Button Sizes Showcase
  const ButtonSizesDesign = () => (
    
      Small
      Medium
      Large
    
  )

  // Button States Showcase
  const ButtonStatesDesign = () => (
    
      
        Default
        Default State
      
      
        Hover (Mouse Over)
        
          Hover State
        
      
      
        Active (Click)
        
          Active State
        
      
    
  )

  // Buttons with Icons Showcase
  const ButtonsWithIconsDesign = () => (
    
      
        
        Add New
      

      
        
        Download
      
    
  )

  return (
    
      
        Button Designs
      

      {/* Design 1: Button Variants */}
      }
        codeString={buttonVariantsCode}
      />

      {/* Design 2: Button Sizes */}
      }
        codeString={buttonSizesCode}
      />

      {/* Design 3: Button States */}
      }
        codeString={buttonStatesCode}
      />

      {/* Design 4: Buttons with Icons */}
      }
        codeString={buttonWithIconsCode}
      />
    
  )
}
[V0_FILE]typescriptreact:file="components/component-showcase.tsx" isMerged="true"
"use client"

import * as React from "react"
import { Code, Eye } from "lucide-react"
import { cn } from "@/lib/utils"
import { NeoBrutalistButton } from "./neo-brutalist-buttons"

interface ComponentShowcaseProps {
  title: string
  description?: string
  designComponent: React.ReactNode
  codeString: string
}

export function ComponentShowcase({ title, description, designComponent, codeString }: ComponentShowcaseProps) {
  const [activeView, setActiveView] = React.useState<"design" | "code">("design")
  const [copied, setCopied] = React.useState(false)

  const copyToClipboard = () => {
    navigator.clipboard.writeText(codeString)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

  return (
    
      {title}
      {description && {description}}

      
         setActiveView("design")}
        >
          
          Preview Design
        

         setActiveView("code")}
        >
          
          View Code
        
      


      
        {designComponent}
      

      
        
          
                      {codeString}
          
        
      
    

  )
}
[V0_FILE]typescriptreact:file="app/sidebar-demo/page.tsx" isMerged="true"
import { NeoBrutalistSidebarDemo } from "@/components/neo-brutalist-sidebar-demo"

export default function SidebarDemoPage() {
  return (
    
      
        
          
            Neo-Brutalist Sidebar
          
          Customizable sidebar components with neo-brutalist styling
        

        
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/neo-brutalist-sidebar-demo.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { NeoBrutalistSidebarProvider, NeoBrutalistSidebar, SidebarGroup, SidebarItem } from "./neo-brutalist-sidebar"
import { ComponentShowcase } from "./component-showcase"
import {
  Home,
  Settings,
  User,
  FileText,
  BarChart2,
  ShoppingCart,
  MessageSquare,
  Bell,
  ImageIcon,
  Layers,
  Briefcase,
  HelpCircle,
} from "lucide-react"
import { useState } from "react"

export function NeoBrutalistSidebarDemo() {
  // Basic Sidebar Demo code
  const basicSidebarCode = `
  
    
      } href="#" isActive>
        Dashboard
      
      } href="#">
        Documents
      
      } href="#">
        Analytics
      
      } href="#">
        Profile
      
      } href="#">
        Settings
      
    
  
  
  
    {/* Your content here */}
    
  
`

  // Grouped Sidebar Demo code
  const groupedSidebarCode = `
  
    
      } href="#" isActive>
        Dashboard
      
      } href="#">
        Products
      
      } href="#">
        Messages
      
    
    
    
      } href="#">
        Profile
      
      } href="#">
        Notifications
      
      } href="#">
        Settings
      
    
  
  
  
    {/* Your content here */}
    
  
`

  // Colored Sidebar Demo code
  const coloredSidebarCode = `
  
    
      } href="#" color="yellow">
        Dashboard
      
      } href="#" color="blue">
        Products
      
      } href="#" color="red" isActive>
        Calendar
      
      } href="#" color="green">
        Gallery
      
      } href="#" color="pink">
        Projects
      
      } href="#" color="purple">
        Jobs
      
      } href="#" color="black">
        Help
      
    
  
  
  
    {/* Your content here */}
    
  
`

  // Interactive Sidebar Demo code (simplified)
  const interactiveSidebarCode = `// In a real implementation, you would use state management and routing
// This is a simplified example
const [activeItem, setActiveItem] = useState("dashboard")


  
    
      } 
        isActive={activeItem === "dashboard"} 
        onClick={() => setActiveItem("dashboard")}
      >
        Dashboard
      
      } 
        isActive={activeItem === "documents"} 
        onClick={() => setActiveItem("documents")}
      >
        Documents
      
      } 
        isActive={activeItem === "products"} 
        onClick={() => setActiveItem("products")}
      >
        Products
      
      } 
        isActive={activeItem === "settings"} 
        onClick={() => setActiveItem("settings")}
      >
        Settings
      
    
  
  
  
    
      
        {activeItem.charAt(0).toUpperCase() + activeItem.slice(1)}
      
      This is the {activeItem} content area.
    
    
  
`

  // Render the demos with ComponentShowcase
  return (
    
      
        Sidebar Designs
      

      {/* Design 1: Basic Sidebar */}
      }
        codeString={basicSidebarCode}
      />

      {/* Design 2: Grouped Sidebar */}
      }
        codeString={groupedSidebarCode}
      />

      {/* Design 3: Colored Sidebar */}
      }
        codeString={coloredSidebarCode}
      />

      {/* Design 4: Interactive Sidebar */}
      }
        codeString={interactiveSidebarCode}
      />
    
  )
}

// Basic Sidebar Demo component
function BasicSidebarDemo() {
  return (
    
      
        
          
            
              } href="#" isActive>
                Dashboard
              
              } href="#">
                Documents
              
              } href="#">
                Analytics
              
              } href="#">
                Profile
              
              } href="#">
                Settings
              
            
          

          
            Dashboard
            Welcome to your dashboard!
          
        
      
    
  )
}

// Grouped Sidebar Demo component
function GroupedSidebarDemo() {
  return (
    
      
        
          
            
              } href="#" isActive>
                Dashboard
              
              } href="#">
                Products
              
              } href="#">
                Messages
              
            

            
              } href="#">
                Profile
              
              } href="#">
                Notifications
              
              } href="#">
                Settings
              
            
          

          
            Dashboard
            Welcome to your dashboard!
          
        
      
    
  )
}

// Colored Sidebar Demo component
function ColoredSidebarDemo() {
  return (
    
      
        
          
            
              } href="#" color="yellow">
                Dashboard
              
              } href="#" color="blue">
                Products
              
              } href="#" color="red" isActive>
                Calendar
              
              } href="#" color="green">
                Gallery
              
              } href="#" color="pink">
                Projects
              
              } href="#" color="purple">
                Jobs
              
              } href="#" color="black">
                Help
              
            
          

          
            Calendar
            View and manage your schedule!
          
        
      
    
  )
}

// Interactive Sidebar Demo component
function InteractiveSidebarDemo() {
  const [activeItem, setActiveItem] = useState("dashboard")

  return (
    
      
        
          
            
              }
                isActive={activeItem === "dashboard"}
                onClick={() => setActiveItem("dashboard")}
              >
                Dashboard
              
              }
                isActive={activeItem === "documents"}
                onClick={() => setActiveItem("documents")}
              >
                Documents
              
              }
                isActive={activeItem === "products"}
                onClick={() => setActiveItem("products")}
              >
                Products
              
              }
                isActive={activeItem === "settings"}
                onClick={() => setActiveItem("settings")}
              >
                Settings
              
            
          

          
            
              
                {activeItem.charAt(0).toUpperCase() + activeItem.slice(1)}
              
              This is the {activeItem} content area.
            
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import { NeoBrutalistSidebarProvider, NeoBrutalistSidebar } from "@/components/neo-brutalist-sidebar"
import { HeroBanner } from "@/components/hero-banner"
import { ProductCard } from "@/components/product-card"
import { NeoBrutalistForm } from "@/components/neo-brutalist-form"
import { NeoBrutalistCalendar } from "@/components/neo-brutalist-calendar"
import { NeoBrutalistChart } from "@/components/neo-brutalist-chart"
import { NeoBrutalistButtons } from "@/components/neo-brutalist-buttons"
import { NeoBrutalistAccordion } from "@/components/neo-brutalist-accordion"
import { NeoBrutalistAlert } from "@/components/neo-brutalist-alert"
import { NeoBrutalistAlertDialog } from "@/components/neo-brutalist-alert-dialog"
import { NeoBrutalistAspectRatio } from "@/components/neo-brutalist-aspect-ratio"
import { NeoBrutalistAvatar } from "@/components/neo-brutalist-avatar"
import { NeoBrutalistBadge } from "@/components/neo-brutalist-badge"
import { NeoBrutalistBreadcrumb } from "@/components/neo-brutalist-breadcrumb"

export default function Home() {
  const [activeComponent, setActiveComponent] = useState("hero")

  const renderComponent = () => {
    switch (activeComponent) {
      case "hero":
        return 
      case "product":
        return 
      case "form":
        return 
      case "calendar":
        return 
      case "chart":
        return 
      case "buttons":
        return 
      case "accordion":
        return 
      case "alert":
        return 
      case "alertdialog":
        return 
      case "aspectratio":
        return 
      case "avatar":
        return 
      case "badge":
        return 
      case "breadcrumb":
        return 
      default:
        return 
    }
  }

  return (
    
      
        
          
            Brutalist UI
            Component Library
          

          
            {[
              { id: "hero", label: "Hero Banner" },
              { id: "product", label: "Product Card" },
              { id: "form", label: "Form" },
              { id: "calendar", label: "Calendar" },
              { id: "chart", label: "Chart" },
              { id: "buttons", label: "Buttons" },
              { id: "accordion", label: "Accordion" },
              { id: "alert", label: "Alert" },
              { id: "alertdialog", label: "Alert Dialog" },
              { id: "aspectratio", label: "Aspect Ratio" },
              { id: "avatar", label: "Avatar" },
              { id: "badge", label: "Badge" },
              { id: "breadcrumb", label: "Breadcrumb" },
            ].map((item) => (
              
            ))}
          
        

        
          
            
              
                Neo-Brutalist UI
              
              Raw, bold, and unapologetically brutalist design
            

            {renderComponent()}
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="app/layout-with-sidebar-example/page.tsx" isEdit="true" isQuickEdit="true"
"use client"

import {
  NeoBrutalistSidebarProvider,
  NeoBrutalistSidebar,
  SidebarGroup,
  SidebarItem,
  SidebarToggle,
} from "@/components/neo-brutalist-sidebar"
import { Home, ShoppingCart, BarChart2, Users, Settings, FileText, Mail, HelpCircle, Bell } from "lucide-react"
import { useState } from "react"
import { NeoBrutalistButton } from "@/components/neo-brutalist-buttons"

export default function LayoutWithSidebarExample() {
  const [activeItem, setActiveItem] = useState("dashboard")

  const getContent = () => {
    switch (activeItem) {
      case "dashboard":
        return (
          
            
              Dashboard
            
            
              
                Sales
                $12,835
                ↑ 12% from last month
              
              
                Orders
                284
                ↑ 8% from last month
              
              
                Customers
                1,482
                ↑ 3% from last month
              
            
            
              Recent Activity
              
                
                  
                  New order #1234 from John Doe
                  2 min ago
                
                
                  
                  Customer support ticket #5678 closed
                  15 min ago
                
                
                  
                  New user registration: Jane Smith
                  1 hour ago
                
              
            
          
        )
      case "products":
        return (
          
            
              
                Products
              
              Add Product
            
            
              
                {[1, 2, 3, 4].map((i) => (
                  
                    
                    
                      Product {i}
                      Category • $99.99
                    
                    
                      
                        Edit
                      
                      
                        Delete
                      
                    
                  
                ))}
              
            
          
        )
      default:
        return (
          
            
              {activeItem.charAt(0).toUpperCase() + activeItem.slice(1)}
            
            This is the {activeItem} page content. The sidebar is fully interactive!
          
        )
    }
  }

  return (
    
      
        
          
            Brutalist UI
            Admin Dashboard
          

          
            }
              isActive={activeItem === "dashboard"}
              onClick={() => setActiveItem("dashboard")}
            >
              Dashboard
            
            }
              isActive={activeItem === "products"}
              onClick={() => setActiveItem("products")}
            >
              Products
            
            }
              isActive={activeItem === "analytics"}
              onClick={() => setActiveItem("analytics")}
            >
              Analytics
            
            }
              isActive={activeItem === "customers"}
              onClick={() => setActiveItem("customers")}
            >
              Customers
            
          

          
            } isActive={activeItem === "orders"} onClick={() => setActiveItem("orders")}>
              Orders
            
            } isActive={activeItem === "messages"} onClick={() => setActiveItem("messages")}>
              Messages
            
          

          
            }
              isActive={activeItem === "notifications"}
              onClick={() => setActiveItem("notifications")}
            >
              Notifications
            
            }
              isActive={activeItem === "settings"}
              onClick={() => setActiveItem("settings")}
            >
              Settings
            
            } isActive={activeItem === "help"} onClick={() => setActiveItem("help")}>
              Help & Support
            
          
        

        
          
          {getContent()}
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/neo-brutalist-sidebar.tsx" isEdit="true" isQuickEdit="true"
"use client"

import * as React from "react"
import { cn } from "@/lib/utils"
import { ChevronLeft, Menu, ChevronDown } from "lucide-react"
import { NeoBrutalistButton } from "./neo-brutalist-buttons"

interface NeoBrutalistSidebarProps {
  children: React.ReactNode
  className?: string
}

interface SidebarContext {
  expanded: boolean
  toggleSidebar: () => void
  isMobile: boolean
  mobileOpen: boolean
  setMobileOpen: (open: boolean) => void
}

const SidebarContext = React.createContext(null)

export function useSidebar() {
  const context = React.useContext(SidebarContext)
  if (!context) {
    throw new Error("useSidebar must be used within a NeoBrutalistSidebarProvider")
  }
  return context
}

export function NeoBrutalistSidebarProvider({
  children,
  defaultExpanded = true,
  className,
}: {
  children: React.ReactNode
  defaultExpanded?: boolean
  className?: string
}) {
  const [expanded, setExpanded] = React.useState(defaultExpanded)
  const [mobileOpen, setMobileOpen] = React.useState(false)

  // Check if we're on mobile
  const [isMobile, setIsMobile] = React.useState(false)

  React.useEffect(() => {
    const checkIfMobile = () => {
      setIsMobile(window.innerWidth < 768)
    }
    // Initial check
    checkIfMobile()
    // Listen for window resize
    window.addEventListener("resize", checkIfMobile)
    // Cleanup
    return () => window.removeEventListener("resize", checkIfMobile)
  }, [])

  const toggleSidebar = React.useCallback(() => {
    if (isMobile) {
      setMobileOpen((prev) => !prev)
    } else {
      setExpanded((prev) => !prev)
    }
  }, [isMobile])

  return (
    
      {children}
    
  )
}

// Modify the NeoBrutalistSidebar component to include its own provider if needed
export function NeoBrutalistSidebar({ children, className }: NeoBrutalistSidebarProps) {
  // Try to use the existing context
  const context = React.useContext(SidebarContext)

  // If no context is found, render with a provider
  if (!context) {
    return (
      
        {children}
      
    )
  }

  // If context exists, use it
  const { expanded, toggleSidebar, isMobile, mobileOpen, setMobileOpen } = context

  // If on mobile, render a mobile sidebar
  if (isMobile) {
    return (
      <>
         setMobileOpen(false)}
        />

        
          
            Menu
            
          
          {children}
        

        
      
    )
  }

  // Desktop sidebar
  return (
    
      
        
          {expanded ? (
            Menu
          ) : (
            Menu
          )}
          
        
      
      
        {expanded ? children : {children}}
      
    
  )
}

// Helper component to render a collapsed version of the sidebar content
function CollapsedSidebarContent({ children }: { children: React.ReactNode }) {
  if (!React.isValidElement(children)) return null

  // Clone and modify children to render only icons
  return React.Children.map(children, (child) => {
    if (React.isValidElement(child)) {
      if (child.type === SidebarGroup) {
        return React.cloneElement(child, {
          ...child.props,
          collapsed: true,
        })
      }
      return child
    }
    return null
  })
}

interface SidebarGroupProps {
  title?: string
  children: React.ReactNode
  collapsed?: boolean
}

export function SidebarGroup({ title, children, collapsed = false }: SidebarGroupProps) {
  const [open, setOpen] = React.useState(true)

  // If sidebar is collapsed, we only render the SidebarItem components
  if (collapsed) {
    const items = React.Children.map(children, (child) => {
      if (React.isValidElement(child) && child.type === SidebarItem) {
        return React.cloneElement(child, {
          ...child.props,
          collapsed: true,
        })
      }
      return null
    })
    return {items}
  }

  return (
    
      {title && (
        
      )}
      {children}
    
  )
}

interface SidebarItemProps {
  icon?: React.ReactNode
  isActive?: boolean
  href?: string
  onClick?: () => void
  children: React.ReactNode
  collapsed?: boolean
  color?: "yellow" | "blue" | "red" | "green" | "pink" | "purple" | "black" | "white"
}

export function SidebarItem({
  icon,
  isActive = false,
  href,
  onClick,
  children,
  collapsed = false,
  color = "blue",
}: SidebarItemProps) {
  const colorStyles = {
    yellow: "bg-yellow-400 hover:bg-yellow-500",
    blue: "bg-blue-400 hover:bg-blue-500",
    red: "bg-red-400 hover:bg-red-500",
    green: "bg-green-400 hover:bg-green-500",
    pink: "bg-pink-400 hover:bg-pink-500",
    purple: "bg-purple-400 hover:bg-purple-500",
    black: "bg-black text-white hover:bg-gray-900",
    white: "bg-white text-black hover:bg-gray-100",
  }

  const content = (
    
      {icon && {icon}}
      {!collapsed && {children}}
      {collapsed && {children}}
    
  )

  if (href) {
    return {content}
  }

  return (
    
  )
}

export function SidebarToggle() {
  const { toggleSidebar } = useSidebar()

  return (
    
      
    
  )
}

{title}

Product Card Designs

Design 1: Classic Vertical

Brutalist Chair

Design 2: Horizontal Layout

Raw Concrete Lamp

Design 3: Feature-Rich

Block Table

Design 4: Minimal

Geometric Vase

Concrete Planter

Design 5: Image-Focused

Brutalist Chair

Concrete Lamp

Hero Banner Designs

Design 1: Split Layout

Bold Design For The Digital Age

Design 2: Centered with Background Shapes

Unapologetically Bold Design

Design 3: Overlapping Elements

Raw. Bold. Unfiltered.

Design 4: Grid-Based Layout

Neo-Brutalist Design System

Grid-Based Brutalism

Design 5: Asymmetrical Layout

Asymmetrical Brutalism

Form Designs

Design 1: Login Form

Login

Design 2: Sign-up Form

Create Account

Design 3: Contact Form

Get In Touch

Design 5: Date Picker

Single Date Picker

{months[month]} {year}

Range Date Picker

{months[month]} {year}

Chart Designs

Design 1: Bar Chart

Sales Data

{period} Growth

Design 2: Line Chart

Weekly Trends

Growth Rate

Design 3: Pie Chart

Product Distribution

Design 4: Comparison Chart

Year-over-Year Comparison

Growth

Design 5: Stats Dashboard

Business Dashboard

Revenue

Users

Orders

Revenue Trend

User Growth

Orders by Month

FREQUENTLY ASKED QUESTIONS

PRODUCT SPECIFICATIONS

Dimensions

Weight

SHIPPING INFO

SUPPORT

PRODUCT CATEGORIES

FREQUENTLY ASKED QUESTIONS

PRODUCT SPECIFICATIONS

Dimensions

Weight

Power Requirements

Connectivity

Battery Life

SHIPPING INFO

SUPPORT

PRODUCT CATEGORIES

Accordion Designs

Neo-Brutalist Accordion

{title}

{title}

Alert Designs

Raw. Bold.
Unfiltered.

Asymmetrical
Brutalism