React Components
Last React components generated by our users
home page modern, compact, and elegant for wedding app Dev Nice Try
about 3 hours ago
use tailwind css The interface of the site, like Onlyfans, contains three columns for the computer screen, two columns for the tablet screen, and one column for mobile phones with a hidden menu. fais moi une petite grenouille en te basant sur ce code
<div className="absolute bottom-2 right-2 w-12 h-12 opacity-20 transform -scale-x-100">
<svg viewBox="0 0 100 100" className="w-full h-full fill-current">
<path d="M50 95C74.8528 95 95 74.8528 95 50C95 25.1472 74.8528 5 50 5C25.1472 5 5 25.1472 5 50C5 74.8528 25.1472 95 50 95ZM50 80C66.5685 80 80 66.5685 80 50C80 33.4315 66.5685 20 50 20C33.4315 20 20 33.4315 20 50C20 66.5685 33.4315 80 50 80ZM35 45C38.866 45 42 41.866 42 38C42 34.134 38.866 31 35 31C31.134 31 28 34.134 28 38C28 41.866 31.134 45 35 45ZM65 45C68.866 45 72 41.866 72 38C72 34.134 68.866 31 65 31C61.134 31 58 34.134 58 38C58 41.866 61.134 45 65 45Z" />
</svg>
</div>
je veux qu'elle soit le plus fidele possible au site flexbox froggy Create a React form using TypeScript, react-hook-form, zod, and zodResolver for validating the required data to generate an income invoice (Ingreso) using Facturapi.
The form must include all necessary fields:
customer: Either a customer_id (string) or an object containing customer details.
items: An array of objects (LineItem), with a maximum of 5,000 items.
payment_form: A string (2 characters) representing the payment form, following SAT codes.
use: A string representing CFDI usage, defaulting to "G01".
type: A string, always "I" for income invoices.
payment_method: A string with "PUE" (single payment) or "PPD" (deferred payment).
currency: A string (default "MXN"), following ISO 4217 currency codes.
exchange: A number representing the exchange rate (default 1).
conditions: A string (optional, max 1000 characters) describing payment conditions.
related_documents: An array of objects linking related documents.
global: An optional object required for global invoices.
export: A string ("01", "02", "03", "04") indicating export status.
complements: An array of objects (CustomComplement) for invoice complements.
status: A string ("pending" by default, or "draft" for saving as a draft).
date: A string in ISO 8601 format representing the invoice issue date.
address: An optional object containing the invoice issuance address.
external_id: A string (optional) for tracking the invoice.
idempotency_key: A string (optional) to prevent duplicate submissions.
folio_number: An optional integer for internal control (default auto-increment).
series: A string (max 25 characters) for internal control.
pdf_custom_section: A string containing custom HTML content for the PDF.
addenda: A string containing XML addenda.
namespaces: An array of objects required when using addenda.
pdf_options: An object configuring optional fields in the generated PDF.
The form should be structured with sections and include "Next" and "Previous" buttons to navigate between steps. A "Submit" button should send the form data.
To the right of the form, display a real-time invoice preview that updates dynamically as the user fills in the fields. This preview should be structured similarly to an actual invoice, reflecting entered values.
Use shadcn/ui for styling and UI components like Input, Select, Button, and Card. The layout should be clean, modern, and responsive, ensuring a good user experience. KatzuneStarky
about 7 hours ago
Starknet Squirrels Society
Project Details:
- Name: Starknet Squirrels Society
- Version: 1.4.0
- Framework: React with Vite
- Styling: Tailwind CSS
- UI Components: shadcn/ui
Project Structure:
1. Header
- Logo: 🐿️ SQUIRRELS
- Navigation: Roadmap, About
- Connect Wallet button
2. Main Content Layout
- Two-column grid
- Comic book style design
3. Left Section (NFT Preview)
- Large NFT image
- Current price in STRK
- Mint button
- Price doubles every 1000 NFTs
- Starting price: 0.025 STRK
4. Right Section
- Comic-style title section
* Text: "STARKNET SQUIRRELS SOCIETY
CAME TO INVADE THE SPACE,"
* Highlighted title: "HOLD UP,
DONT LOSE
THE NUTTS!"
- Background: Trapezium-shaped with starry effect
- Collage grid (8x5)
* 50 randomly shuffling images
* 35x35 pixel images
* Shuffle every 0.5 seconds
5. Mint Progress Bar
- 10 checkpoints
- Labels: 0.025, 0.05, 0.1, 0.2, 0.4, 0.8, 1.6, 3.2, 6.4, 12.8 STRK
- Progress updates with slider
6. NFT Slider
- Range: 0-10000 NFTs
- Updates mint progress and price
7. Footer
- About link
- Twitter link
- Copyright notice
Design Principles:
- Comic book aesthetic
- Yellow, black, and purple color scheme
- Retro grid background
- Bangers font
- Playful, dynamic interactions
Technical Requirements:
- TypeScript
- Tailwind CSS
- shadcn/ui components
- Responsive design
- Comic-style animations and effects
This prompt provides a comprehensive overview of the Starknet Squirrels Society project, including its structure, design principles, and technical requirements. You can use this to regenerate the project with all its specific details and styling. Zakir Erimbetov
about 10 hours ago
Give me a basic ui that shows a list of government websites for cities (city name, website name, url) Michael Cowden
about 12 hours ago
Create a modern UI display of menu cards representing different work area menus. Each card should contain the following elements:
A representative image at the top that visually describes the menu.
The menu name displayed prominently in a bold, readable font.
A clickable link to the menu, styled as a button or text with a subtle hover effect.
The menu order number, displayed in a small but visible way.
A checkbox in the top right corner that visually toggles when selected.
The cards should have a clean, minimalistic design with soft colors, rounded corners, and a shadow effect. They should be neatly arranged in a grid layout with a slight hover lift effect. The background should be light, allowing the images and text to stand out clearly. The overall design should be professional and user-friendly KatzuneStarky
about 12 hours ago
Create a modern UI display of menu cards representing different work area menus. Each card should have a unique icon, a title with the menu name, and a subtle shadow effect. The cards should be arranged neatly with a hover effect that slightly lifts them. Each menu card should also include a checkbox in the top right corner, which visually toggles when selected. Use a soft color scheme with rounded edges and a clean, professional design. The background should be light, allowing the icons and text to stand out. The design should be minimalistic and user-friendly KatzuneStarky
about 12 hours ago
Luuk Battjes
about 13 hours ago
An ecommerce dashboard with a sidebar navigation and a table of recent orders. HU Coding
about 14 hours ago
Standard logo like google with text "HomeTown" Dinesh N K
about 14 hours ago
Create a beautifully formated landing page for a developer portfolio. doru oprea
about 16 hours ago
An ecommerce dashboard with a sidebar navigation and a table of recent orders. JuanCa Velez
about 16 hours ago
Create a cutting-edge, immersive website for 'Affordeals' that combines Apple's premium aesthetic with engaging 3D elements and fluid interactions. The design should feature:
Visual Design:
- A sophisticated dark theme using deep charcoal (#121212) as the base, accented with electric blue (#0066FF) and subtle pearl white (#F5F5F7)
- Large, cinematic product presentations with 3D-rendered iPhones that users can rotate and explore, similar to Apple's product pages
- Parallax scrolling effects where products elegantly float and respond to mouse movement
- Custom animated micro-interactions for buttons, hover states, and transitions
- Frosted glass morphism effects for cards and modal windows, creating depth and sophistication
Layout & Navigation:
- A minimal, sticky header that transforms on scroll
- Horizontal product carousels with smooth drag interactions
- Dynamic grid layouts that smoothly transition between list and grid views
- A floating navigation bar for mobile that expands into a full-screen menu with fluid animations
Interactive Features:
- 3D product configurator allowing users to customize iPhone colors and storage options in real-time
- Animated price comparisons that dynamically illustrate savings
- Interactive spec sheets that expand with gesture controls
- Progressive loading with skeleton screens for seamless content delivery
Product Presentation:
- Cinema-grade product photography with dynamic lighting effects
- Exploded view animations highlighting key features
- AR preview capability for compatible devices
- Side-by-side comparison tool with smooth transitions
Mobile Experience:
- Native-feeling swipe gestures and haptic feedback
- Bottom sheet interactions for filters and product details
- Adaptive layouts that reorganize content based on device orientation
- Performance-optimized 3D renders for mobile devices
Technical Focus:
- Hardware-accelerated animations for butter-smooth performance
- Implementation of view transitions API for page changes
- Intersection Observer usage for scroll-based animations
- Dynamic image loading with blur-up technique
Checkout Flow:
- Single-page checkout with multi-step progress indicator
- Real-time validation with subtle animations
- Smart autofill suggestions
- Dynamic shipping calculator with visual delivery timeline
This enhanced design approach combines the premium feel of Apple.com's 3D product experiences, the smooth transitions of Stripe.com, and the interactive elements of Nike.com's product configurator, while maintaining focus on Affordeals' value proposition of quality and affordability.
The website should feel premium and engaging while clearly communicating the cost-effectiveness of the products, creating a perfect balance between high-end presentation and accessible pricing. create an Landing Page with a road map animation where when it scroll down it will animate left to right Generate a professional invoice preview with the following structured details:
1. Customer Details
Legal Name: [customerDetails.legalName]
Email: [customerDetails.email]
Tax ID: [customerDetails.taxId] (if available)
Tax System: [customerDetails.taxSystem]
Address:
Street: [customerDetails.address.street]
Exterior Number: [customerDetails.address.exteriorNumber]
Interior Number: [customerDetails.address.interiorNumber] (if available)
Neighborhood: [customerDetails.address.neighborhood]
Zip Code: [customerDetails.address.zipCode]
City: [customerDetails.address.city]
State: [customerDetails.address.state]
Country: [customerDetails.address.country]
2. Invoice Items
A table listing all invoice items with the following columns:
Description Quantity Unit Price Tax (if applicable) Total
For each item in [invoiceItems]:
Description: [invoiceItems.description]
Quantity: [invoiceItems.quantity]
Unit Price: [invoiceItems.price]
Tax: [invoiceItems.tax] (if applicable)
Total: (quantity * unit price + tax)
At the bottom of the table, display the Grand Total as the sum of all item totals.
3. Payment Terms
Payment Method: [paymentTerms.paymentMethod] (either "PUE" or "PPD")
Currency: [paymentTerms.currency] (default is "MXN")
Exchange Rate: [paymentTerms.exchange]
Payment Form: [paymentTerms.paymentForm]
Payment Conditions: [paymentTerms.conditions] (if available)
4. Invoice Metadata
Date: [date] (default to current date)
Status: [status] (default: "pending")
Invoice Type: [type] (default: "I" for Ingreso)
External ID: [externalId] (if available)
Folio Number: [folioNumber] (if available)
Series: [series] (if available)
PDF Custom Section: [pdfCustomSection] (if available)
Ensure the invoice is formatted professionally, with section headings in bold, clear separation of sections, and an easy-to-read layout. Use consistent spacing and alignment for readability. The total amount should be prominently displayed at the bottom. KatzuneStarky
about 23 hours ago
{
"prompt": "Generate a React form using react-hook-form, zod, zodResolver, and shadcn ui to create an invoice step by step. The form should have several steps, each capturing different pieces of information needed for an invoice such as the customer details, invoice items, payment method, and additional settings. The form should dynamically update a live preview of the invoice being generated as the user fills out each step. Use shadcn ui components to build a sleek and modern user interface. The steps should include: 1. Customer details (legal name, email, tax id, address), 2. Invoice items (description, quantity, price, tax), 3. Payment method and terms, and 4. Final confirmation with the ability to review all information before submitting. The live preview of the invoice should be shown on the side of the form and update as users make changes to the fields. The form should be fully validated using zod schemas and handle errors appropriately. Include buttons for navigation between the steps, such as 'Next', 'Previous', and 'Submit'."
}
Detailed breakdown:
Form Structure:
Step 1: Customer Details (Legal name, Email, Tax ID, Address)
Step 2: Invoice Items (Description, Quantity, Price, Tax)
Step 3: Payment Method and Terms
Step 4: Review and Submit (Final confirmation and summary of the invoice)
Live Preview:
On the right side, a dynamic invoice preview should update as users complete the form. This should mirror the fields in the form but be read-only, showing how the generated invoice will look.
Shadcn UI:
Use Shadcn UI components for a clean and modern design. Shadcn is known for flexible, accessible components with great visual aesthetics.
Zod Validation:
Use zod for schema validation in combination with react-hook-form and zodResolver to ensure all inputs are validated properly.
Step Navigation:
Buttons to navigate between steps (Next, Previous, and Submit) KatzuneStarky
about 24 hours ago
Create a multi-step form using Shadcn UI. The form should have two steps. In the first step, collect the main customer details: legal name, tax ID, tax system, and email. In the second step, collect the address information: street, exterior number, interior (optional), neighborhood, ZIP code, city, state, and country. Each step should be clearly separated, and the user should be able to navigate between the steps by clicking 'Next' and 'Back' buttons. Ensure that the form integrates with react-hook-form and uses zod for validation. The form should display errors for invalid fields and should be easy to navigate. The 'Next' button should only be enabled if the form on the current step is valid. Provide a submit button on the last step to submit the form data Create a small React component that displays the status of the Facturapi API. The component should show 'Online' or 'Offline' based on the API's response. When clicked, the component should open a modal using ShadCN where a more detailed description of the API status is shown, including potential error messages or additional information. Ensure the component handles loading, success, and error states appropriately Create a small React component that continuously monitors the status of the Facturapi API. The component should fetch the status of the API once when it mounts and periodically check for updates. Display the status as either 'Online' or 'Offline' based on the response. If an error occurs or the API is unreachable, show an error message. The component should handle loading, success, and error states gracefully. Create a visually appealing business card for a customer using the following details:
ID: Unique identifier of the customer.
Legal Name: Full legal name of the customer.
Tax ID: Customer's tax identification number.
Tax System: The tax system under which the customer is registered.
Email: Contact email address.
Phone: Contact phone number.
Default Invoice Use: The default purpose for which the customer uses invoices.
Address: A structured address containing:
Street
Exterior number
Interior number (if applicable)
Neighborhood
Zip code
City
State
Country
The business card should be modern, clean, and professional with a structured layout that prioritizes readability. The customer's legal name and tax ID should be prominent. The design should include subtle icons for email, phone, and location to enhance clarity. The color scheme should be professional, with a balance of neutral and corporate tones. The font should be modern and easily readable. The card should have a sleek, polished appearance suitable for corporate use. Start generate beautiful responsive website for nail salon spa with business name : Bee You Nail & Spa sign in screen but with only a password input Website for budgeting with monthly payments table containing: Type Amount Date Company Reference Number Notes 
