[V0_FILE]typescriptreact:file="components/Spinner/Spinner.tsx" isMerged="true" import type React from "react" import styles from "./Spinner.module.css" interface SpinnerProps { srAnnouncement?: string size?: "small" | "medium" | "large" } const Spinner: React.FC = ({ srAnnouncement = "Loading...", size = "medium" }) => { return (

{srAnnouncement && {srAnnouncement}}

) } Spinner.displayName = "Spinner" export default Spinner [V0_FILE]css:file="components/Spinner/Spinner.module.css" isMerged="true" .spinner { display: inline-flex; align-items: center; justify-content: center; } .circle { width: 16px; height: 16px; border: 2px solid transparent; border-top: 2px solid currentColor; border-radius: 50%; animation: spin 1s linear infinite; } .spinner[data-size="small"] .circle { width: 12px; height: 12px; border-width: 1.5px; } .spinner[data-size="large"] .circle { width: 20px; height: 20px; border-width: 2.5px; } .srOnly { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } [V0_FILE]typescriptreact:file="components/Button/Button.tsx" isMerged="true" "use client" import type React from "react" import { forwardRef } from "react" import clsx from "clsx" import Spinner from "../Spinner/Spinner" import styles from "./Button.module.css" interface ButtonProps { children: React.ReactNode hierarchy?: "loud" | "quiet" | "mute" | "transparent" size?: "small" | "medium" | "large" disabled?: boolean loading?: boolean fullWidth?: boolean backgroundType?: "default" | "complexBackground" className?: string href?: string id?: string srAnnouncement?: string srLabel?: string type?: "button" | "submit" | "reset" onClick?: (event: React.MouseEvent) => void } const Button = forwardRef( ( { children, hierarchy = "loud", size = "large", disabled = false, loading = false, fullWidth = false, backgroundType = "default", className, href, srAnnouncement, srLabel, type = "button", onClick, ...props }, ref, ) => { const Component = href ? "a" : "button" return ( {loading ? : children} ) }, ) Button.displayName = "Button" export default Button [V0_FILE]css:file="components/Button/Button.module.css" isMerged="true" .button { display: inline-flex; align-items: center; justify-content: center; font-family: inherit; font-weight: var(--andes-font-weight-semibold); border: 1px solid transparent; cursor: pointer; transition: all 0.18s ease-out; text-decoration: none; box-sizing: border-box; white-space: nowrap; outline: none; } .button:focus-visible { box-shadow: 0 0 0 3px var(--andes-blue-300); } /* Sizes */ .button[data-size="small"] { height: 24px; padding: 0 var(--andes-spacing-8); font-size: var(--andes-font-size-small); border-radius: 4px; } .button[data-size="medium"] { height: 32px; padding: 0 var(--andes-spacing-12); font-size: var(--andes-font-size-medium); border-radius: 5px; } .button[data-size="large"] { height: 48px; padding: 0 var(--andes-spacing-24); font-size: var(--andes-font-size-large); border-radius: 6px; } /* Full Width */ .button[data-full-width="true"] { width: 100%; } /* Hierarchy: Loud */ .button[data-hierarchy="loud"] { background-color: var(--andes-blue-500); color: var(--andes-white); } .button[data-hierarchy="loud"]:hover:not(:disabled) { background-color: var(--andes-blue-600); } .button[data-hierarchy="loud"]:active:not(:disabled) { background-color: var(--andes-blue-700); } /* Hierarchy: Quiet */ .button[data-hierarchy="quiet"] { background-color: var(--andes-blue-150); color: var(--andes-blue-500); } .button[data-hierarchy="quiet"]:hover:not(:disabled) { background-color: var(--andes-blue-200); } .button[data-hierarchy="quiet"]:active:not(:disabled) { background-color: var(--andes-blue-300); } /* Hierarchy: Mute */ .button[data-hierarchy="mute"] { background-color: transparent; color: var(--andes-blue-500); } .button[data-hierarchy="mute"]:hover:not(:disabled) { background-color: var(--andes-blue-150); } .button[data-hierarchy="mute"]:active:not(:disabled) { background-color: var(--andes-blue-200); } /* Hierarchy: Transparent */ .button[data-hierarchy="transparent"] { background-color: transparent; color: var(--andes-blue-500); } .button[data-hierarchy="transparent"]:hover:not(:disabled) { background-color: rgba(52, 131, 250, 0.08); } /* Disabled State */ .button:disabled { background-color: var(--andes-gray-100); color: var(--andes-gray-700); cursor: not-allowed; opacity: 0.5; } .button[data-hierarchy="mute"]:disabled, .button[data-hierarchy="transparent"]:disabled { background-color: transparent; } /* Loading State */ .button[data-loading="true"] { pointer-events: none; } [V0_FILE]typescriptreact:file="components/Card/Card.tsx" isMerged="true" "use client" import type React from "react" import { forwardRef } from "react" import clsx from "clsx" import styles from "./Card.module.css" interface CardProps { children: React.ReactNode variant?: "default" | "outlined" | "elevated" padding?: "sm" | "md" | "lg" clickable?: boolean onClick?: (event: React.MouseEvent) => void className?: string } const Card = forwardRef( ({ children, variant = "default", padding = "md", clickable = false, onClick, className, ...props }, ref) => { return (

{children}

) }, ) Card.displayName = "Card" export default Card [V0_FILE]css:file="components/Card/Card.module.css" isMerged="true" .card { background-color: var(--andes-white); border-radius: 8px; box-sizing: border-box; transition: all 0.18s ease-out; } /* Padding */ .card[data-padding="sm"] { padding: 12px; } .card[data-padding="md"] { padding: 16px; } .card[data-padding="lg"] { padding: 24px; } /* Variants */ .card[data-variant="default"] { border: 1px solid var(--andes-gray-100); } .card[data-variant="outlined"] { border: 1px solid var(--andes-gray-700); } .card[data-variant="elevated"] { border: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } /* Clickable */ .card[data-clickable="true"] { cursor: pointer; } .card[data-clickable="true"]:hover { background-color: var(--andes-gray-50); } .card[data-clickable="true"]:focus-visible { outline: 2px solid var(--andes-blue-500); outline-offset: 2px; } [V0_FILE]typescriptreact:file="components/Badge/Badge.tsx" isMerged="true" import type React from "react" import { forwardRef } from "react" import clsx from "clsx" import styles from "./Badge.module.css" interface BadgeProps { children: React.ReactNode variant?: "default" | "success" | "warning" | "error" size?: "small" | "medium" className?: string } const Badge = forwardRef( ({ children, variant = "default", size = "medium", className, ...props }, ref) => { return ( {children} ) }, ) Badge.displayName = "Badge" export default Badge [V0_FILE]css:file="components/Badge/Badge.module.css" isMerged="true" .badge { display: inline-flex; align-items: center; justify-content: center; font-weight: var(--andes-font-weight-medium); border-radius: 12px; white-space: nowrap; box-sizing: border-box; } /* Sizes */ .badge[data-size="small"] { height: 16px; padding: 2px 6px; font-size: var(--andes-font-size-caption); } .badge[data-size="medium"] { height: 20px; padding: 4px 8px; font-size: var(--andes-font-size-small); } /* Variants */ .badge[data-variant="default"] { background-color: var(--andes-gray-100); color: var(--andes-gray-700); } .badge[data-variant="success"] { background-color: var(--andes-green-100); color: var(--andes-green-700); } .badge[data-variant="warning"] { background-color: var(--andes-yellow-100); color: var(--andes-yellow-700); } .badge[data-variant="error"] { background-color: var(--andes-red-100); color: var(--andes-red-700); } [V0_FILE]css:file="app/globals.css" isFixed="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Andes Color System */ --andes-blue-500: #3483fa; --andes-blue-600: #2968c8; --andes-blue-700: #1e4f96; --andes-blue-150: #e6f4ff; --andes-blue-200: #cce7ff; --andes-blue-300: #99d1ff; --andes-white: #ffffff; --andes-gray-50: #fafafa; --andes-gray-100: #f5f5f5; --andes-gray-700: #666666; --andes-green-100: #e8f5e8; --andes-green-700: #00a650; --andes-yellow-100: #fff8e1; --andes-yellow-700: #ff8f00; --andes-red-100: #ffebee; --andes-red-700: #d32f2f; /* Andes Typography */ --andes-font-weight-medium: 500; --andes-font-weight-semibold: 600; --andes-font-size-caption: 11px; --andes-font-size-small: 12px; --andes-font-size-medium: 14px; --andes-font-size-large: 16px; /* Andes Spacing */ --andes-spacing-4: 4px; --andes-spacing-8: 8px; --andes-spacing-12: 12px; --andes-spacing-16: 16px; --andes-spacing-24: 24px; /* Design Tokens */ --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { /* optional: --font-sans, --font-serif, --font-mono if they are applied in the layout.tsx */ --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]jpg:file="public/shopping-online-ecommerce-illustration.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/shopping-online-ecommerce-illustration-mhpb7MA8LffE83UxEP7IEaSG4p4XZO.jpg" isMerged="true" [V0_FILE]png:file="public/modern-tech-devices.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-tech-devices-EIRvJlSdbnWp3TLHq9ohAfarjqoTc0.png" isMerged="true" [V0_FILE]png:file="public/diverse-fashion-apparel.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/diverse-fashion-apparel-J0zgMkX2pB7XHis0jDIuatwuwbMdQ6.png" isMerged="true" [V0_FILE]jpg:file="public/home-furniture-decor.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/home-furniture-decor-yI9OJW6JQnSzFDoWKmL94Yi1e35aSf.jpg" isMerged="true" [V0_FILE]markdown:file="index.md" isMerged="true" # Andes UI Components Reference This directory contains usage documentation for Andes UI components. Each component file provides: - Import statements - Common props and usage patterns - Accessibility requirements - Code examples ## Available Components ### Core Components - **[Button](./button.md)** - Action triggers with multiple hierarchies and variants - **[Form](./form.md)** - Form wrapper (MANDATORY for all form controls) - **[Textfield](./textfield.md)** - Text input fields - **[Card](./card.md)** - Container component with header, body, footer - **[Badge](./badge.md)** - Status indicators and notification badges ### Menu & Navigation Components - **[List](./list.md)** - List container and items - **[FloatingMenu](./floating-menu.md)** - Positioned floating menus ### Additional Components Available via Andes Tools The Andes Design System includes many more components. Use the `andes-components` tool to get detailed specifications for: - Modal/Dialog components - Navigation components - Layout components - Data display components (Table, etc.) - Feedback components (Toast, Alert, etc.) - And more... **To discover all available components:** 1. Use the `andes-components-list` tool to see the full component catalog 2. Use the `andes-components` tool with specific component names to get detailed specs 3. Check component documentation files in this directory for commonly used ones ## Component Discovery Workflow 1. Check this directory for documented components 2. If not found, query `andes-components-list` for available components 3. Query `andes-components` with component name(s) for full specifications 4. Install required packages: `npm i --save @andes/{package}@9` 5. Add SCSS imports to `styles/andes.scss` [V0_FILE]markdown:file="floating-menu.md" isMerged="true" # FloatingMenu Usage - Import: `import { FloatingMenu } from '@andes/floating-menu'` - Styles: `@import '@andes/floating-menu/base';` - Purpose: Positioned menu that floats relative to a trigger element - Use cases: - Dropdown menus - Context menus - Popover menus - Tooltip-like menus - Common props: - `side`: Placement relative to trigger ('bottom', 'top', 'left', 'right', etc.) - `open`: Whether menu is open - `onOpenChange`: Handler for open state changes - `anchor`: Reference element to position relative to - Integration: - Used internally by `DropdownButton` and `SplitButton` - Can be used standalone for custom menu implementations - Accessibility: - Handles keyboard navigation (Arrow keys, Enter, Escape) - Proper ARIA attributes for menu dialogs - Examples: ``` import { FloatingMenu } from '@andes/floating-menu'; import { List, ListItem } from '@andes/list'; Action 1 Action 2 ``` [V0_FILE]markdown:file="list.md" isMerged="true" # List Usage - Import: `import { List, ListItem } from '@andes/list'` - Styles: `@import '@andes/list/base';` - Use cases: - Dropdown menus (with FloatingMenu) - Navigation lists - Option lists - Menu items - Common props: - `List`: Container for list items - `ListItem`: Individual list item - `href`: Link destination for list item - `onClick`: Click handler for list item - `disabled`: Whether item is disabled - Integration: - Often used with `DropdownButton` and `FloatingMenu` components - Supports keyboard navigation - Examples: ``` import { List, ListItem } from '@andes/list'; import { DropdownButton } from '@andes/button'; // Used with DropdownButton const menuItems = [ { title: 'Option 1', onClick: () => {} }, { title: 'Option 2', href: '/link' } ]; Menu ``` [V0_FILE]markdown:file="badge.md" isMerged="true" # Badge Usage - Import: `import { Badge } from '@andes/badge'` - Purpose: Small indicator for statuses, counts, or new content - Use cases: - Status indicators (new, active, pending) - Notification counts - Inline labels over other elements - Common props: - `children`: Badge content (text or number) - `variant`: Visual style variant - `size`: Size of the badge - `srLabel`: Screen reader label - Accessibility: - Provide `srLabel` when badge conveys important information - Use semantic meaning appropriate to context - Examples: ``` import { Badge } from '@andes/badge'; New Active 5 ``` [V0_FILE]markdown:file="card.md" isMerged="true" # Card Usage - Import: `import { Card, CardHeader, CardBody, CardFooter } from '@andes/card'` - Use proper parent-child relationships: - `CardHeader` inside `Card` - `CardBody` inside `Card` - `CardFooter` inside `Card` - Common props: - `Card`: Container component - `CardHeader`: Header section with title/actions - `CardBody`: Main content area - `CardFooter`: Footer section with actions - Layout: - Use Flexbox for internal layout - No fixed widths/heights - Responsive spacing using Andes spacing tokens - Examples: ``` import { Card, CardHeader, CardBody, CardFooter } from '@andes/card'; import { Button } from '@andes/button';

Card Title

Card content goes here

``` [V0_FILE]markdown:file="textfield.md" isMerged="true" # Textfield Usage - Import: `import { Textfield } from '@andes/textfield'` - Must be wrapped inside Andes `

` parent - Accessibility: - Form handles form submission and validation context - Provides proper ARIA attributes for form structure - Examples: ``` import { Form } from '@andes/form'; import { Button, ProgressButton } from '@andes/button'; import { Textfield } from '@andes/textfield'; Submit ``` [V0_FILE]markdown:file="button.md" isMerged="true" # Button Usage - Import: `import { Button, ButtonText, DropdownButton, SplitButton, ProgressButton, FloatingActionButton } from '@andes/button'` - Sizes: small, medium, large (variant-dependent) - Hierarchy: loud, quiet, mute, transparent (variant-dependent) - Accessibility: - Provide `srLabel` when icon-only or non-textual context - Use `srAnnouncement` for loading states - Examples: ``` import { Button, ButtonText } from '@andes/button'; import Attach24 from '@andes/icons/Attach24'; ``` [V0_FILE]markdown:file="setup-andes.md" isMerged="true" # Setup 1) Install required packages: ``` nvm use npm i --save @andes/button@9 @andes/list@9 @andes/floating-menu@9 @andes/icons@9 @andes/common@9 ``` 2) Import styles (safe order): ``` // styles/andes.scss @import '@andes/button/index'; @import '@andes/list/base'; @import '@andes/floating-menu/base'; @import '@andes/common/index'; ``` 3) Include page-level SCSS: ``` // app/layout.tsx or pages/_app.tsx import '@/styles/andes.scss'; import '@/styles/primitives.scss'; import '@/styles/blocks/_pricing.scss'; import '@/styles/blocks/_contact-form.scss'; ``` 4) Private registry? - Map your `.npmrc` auth to environment variables (see `.env.example`) and configure your CI. [V0_FILE]markdown:file="andes-guidelines.md" isMerged="true" # Andes Guidelines (Essential Excerpts) - Prefer Andes components - No custom styles or className on Andes components - Provide required accessibility props: `srLabel`, `aria-*` - Use proper component composition (e.g., `CardHeader` inside `Card`) - Use Flexbox and responsive breakpoints - Ensure SCSS includes all necessary `@import` for used components [V0_FILE]markdown:file="overview.md" isMerged="true" # Overview This template configures v0 to generate code aligned with Andes UI: - Imports and versioning - Accessibility requirements - BEM + SCSS for any non-Andes elements - Examples for Pricing and Contact flows ## Component Documentation - See `v0/instructions/components/` for usage guides on commonly used components (Button, Form, Textfield, Card, Badge, List, FloatingMenu) - **Many more components are available** via Andes tools: - Use `andes-components-list` to discover all available components - Use `andes-components` with component name(s) to get detailed specifications - Common components include: Modal, Table, Toast, Alert, Navigation, and more [V0_FILE]markdown:file="system-prompt.md" isMerged="true" # Andes Design System — System Prompt ## Objective Always generate UI using Andes UI components to match Mercado Libre's UX and brand language. ## Mandatory Rules - Prefer Andes components over native HTML. Do not apply custom styles or className to Andes components. - Wrap all form controls in an Andes `

` parent. - Include required props (srLabel, aria- labels) and honor documented parent-child hierarchies. - Use Flexbox and responsive grid. Avoid fixed widths/heights. - For non-Andes UI parts, create reusable React components with BEM class names and provide complete SCSS. - Ensure all used Andes components have matching `@import` entries in `styles/andes.scss`. - If a component is needed and not installed, emit shell instructions: - `nvm use` then `npm i --save @andes/{package}@9` ## SASS Import Order - Safe: Import specific components first, then `@andes/common/index` (preferred) - Alternative: If importing common first, set `$andes-theme: 'mercadolibre';` before it. ## Grid & Spacing - 12-column layout. Gutters ~20px. - Breakpoints: Mobile <600px, Tablet 600–960px, Desktop >960px. - Spacing scale: 4, 8, 16, 24, 32, 48, 64. ## How to Use Template Instructions - Read files in `v0/instructions/**/*.md` for setup and component usage patterns. - Use examples under `v0/examples` as canonical patterns. ## Component Discovery - **Many Andes UI components are available** beyond those documented locally. - To discover all available components: 1. Use `andes-components-list` tool to see the full component catalog 2. Use `andes-components` tool with specific component names (e.g., `'Modal,Table,Toast'`) to get detailed specifications 3. Check `v0/instructions/components/` for commonly used component guides - Common components include: Button, Form, Textfield, Card, Badge, List, FloatingMenu, Modal, Table, Toast, Alert, Navigation, and many more. [V0_FILE]markdown:file="instructions/index.md" isMerged="true" # Andes UI Components Reference This directory contains usage documentation for Andes UI components. Each component file provides: - Import statements - Common props and usage patterns - Accessibility requirements - Code examples ## Available Components ### Core Components - **[Button](./button.md)** - Action triggers with multiple hierarchies and variants - **[Form](./form.md)** - Form wrapper (MANDATORY for all form controls) - **[Textfield](./textfield.md)** - Text input fields - **[Card](./card.md)** - Container component with header, body, footer - **[Badge](./badge.md)** - Status indicators and notification badges ### Menu & Navigation Components - **[List](./list.md)** - List container and items - **[FloatingMenu](./floating-menu.md)** - Positioned floating menus ### Additional Components Available via Andes Tools The Andes Design System includes many more components. Use the `andes-components` tool to get detailed specifications for: - Modal/Dialog components - Navigation components - Layout components - Data display components (Table, etc.) - Feedback components (Toast, Alert, etc.) - And more... **To discover all available components:** 1. Use the `andes-components-list` tool to see the full component catalog 2. Use the `andes-components` tool with specific component names to get detailed specs 3. Check component documentation files in this directory for commonly used ones ## Component Discovery Workflow 1. Check this directory for documented components 2. If not found, query `andes-components-list` for available components 3. Query `andes-components` with component name(s) for full specifications 4. Install required packages: `npm i --save @andes/{package}@9` 5. Add SCSS imports to `styles/andes.scss` [V0_FILE]markdown:file="instructions/badge.md" isMerged="true" # Badge Usage - Import: `import { Badge } from '@andes/badge'` - Purpose: Small indicator for statuses, counts, or new content - Use cases: - Status indicators (new, active, pending) - Notification counts - Inline labels over other elements - Common props: - `children`: Badge content (text or number) - `variant`: Visual style variant - `size`: Size of the badge - `srLabel`: Screen reader label - Accessibility: - Provide `srLabel` when badge conveys important information - Use semantic meaning appropriate to context - Examples: \`\`\` import { Badge } from '@andes/badge'; New Active 5 [V0_FILE]markdown:file="instructions/card.md" isMerged="true" # Card Usage - Import: `import { Card, CardHeader, CardBody, CardFooter } from '@andes/card'` - Use proper parent-child relationships: - `CardHeader` inside `Card` - `CardBody` inside `Card` - `CardFooter` inside `Card` - Common props: - `Card`: Container component - `CardHeader`: Header section with title/actions - `CardBody`: Main content area - `CardFooter`: Footer section with actions - Layout: - Use Flexbox for internal layout - No fixed widths/heights - Responsive spacing using Andes spacing tokens - Examples: \`\`\` import { Card, CardHeader, CardBody, CardFooter } from '@andes/card'; import { Button } from '@andes/button';

Card Title

Card content goes here

[V0_FILE]markdown:file="instructions/floating-menu.md" isMerged="true" # FloatingMenu Usage - Import: `import { FloatingMenu } from '@andes/floating-menu'` - Styles: `@import '@andes/floating-menu/base';` - Purpose: Positioned menu that floats relative to a trigger element - Use cases: - Dropdown menus - Context menus - Popover menus - Tooltip-like menus - Common props: - `side`: Placement relative to trigger ('bottom', 'top', 'left', 'right', etc.) - `open`: Whether menu is open - `onOpenChange`: Handler for open state changes - `anchor`: Reference element to position relative to - Integration: - Used internally by `DropdownButton` and `SplitButton` - Can be used standalone for custom menu implementations - Accessibility: - Handles keyboard navigation (Arrow keys, Enter, Escape) - Proper ARIA attributes for menu dialogs - Examples: \`\`\` import { FloatingMenu } from '@andes/floating-menu'; import { List, ListItem } from '@andes/list'; Action 1 Action 2 [V0_FILE]markdown:file="instructions/form.md" isMerged="true" # Form Usage - Import: `import { Form } from '@andes/form'` - **MANDATORY**: All form controls (Button, Textfield, etc.) must be wrapped with Andes `` parent - Accessibility: - Form handles form submission and validation context - Provides proper ARIA attributes for form structure - Examples: \`\`\` import { Form } from '@andes/form'; import { Button, ProgressButton } from '@andes/button'; import { Textfield } from '@andes/textfield'; Submit [V0_FILE]markdown:file="instructions/list.md" isMerged="true" # List Usage - Import: `import { List, ListItem } from '@andes/list'` - Styles: `@import '@andes/list/base';` - Use cases: - Dropdown menus (with FloatingMenu) - Navigation lists - Option lists - Menu items - Common props: - `List`: Container for list items - `ListItem`: Individual list item - `href`: Link destination for list item - `onClick`: Click handler for list item - `disabled`: Whether item is disabled - Integration: - Often used with `DropdownButton` and `FloatingMenu` components - Supports keyboard navigation - Examples: \`\`\` import { List, ListItem } from '@andes/list'; import { DropdownButton } from '@andes/button'; // Used with DropdownButton const menuItems = [ { title: 'Option 1', onClick: () => {} }, { title: 'Option 2', href: '/link' } ]; Menu [V0_FILE]markdown:file="instructions/textfield.md" isMerged="true" # Textfield Usage - Import: `import { Textfield } from '@andes/textfield'` - Must be wrapped inside Andes `

` parent component - Common props: - `label`: Label text for the field - `name`: Field name for form submission - `required`: Whether field is required - `type`: Input type (text, email, password, etc.) - `srLabel`: Screen reader label for accessibility - `disabled`: Whether field is disabled - `error`: Error message to display - `helperText`: Helper text below the field - Accessibility: - Provide `srLabel` when label is not visible or needs additional context - Use `error` prop for validation feedback - Examples: \`\`\` import { Form } from '@andes/form'; import { Textfield } from '@andes/textfield'; [V0_FILE]markdown:file="instructions/README.md" isMerged="true" # Andes Design System - Documentation This directory contains comprehensive documentation for implementing components using the Andes Design System from Mercado Libre. ## Getting Started 1. **[Setup](./setup-andes.md)** - Installation and configuration instructions 2. **[Guidelines](./andes-guidelines.md)** - Essential best practices and conventions 3. **[Component Reference](./index.md)** - Overview of all available components ## Component Documentation ### Core Components - **[Badge](./badge.md)** - Status indicators and notification badges - **[Card](./card.md)** - Container component with header, body, footer - **[Form](./form.md)** - Form wrapper (MANDATORY for all form controls) - **[Textfield](./textfield.md)** - Text input fields ### Menu & Navigation - **[List](./list.md)** - List container and items for menus - **[FloatingMenu](./floating-menu.md)** - Positioned floating menus and popovers ## Quick Reference ### Installation \`\`\`bash npm i --save @andes/button@9 @andes/list@9 @andes/floating-menu@9 \`\`\` ### Import Styles \`\`\`scss @import '@andes/button/index'; @import '@andes/list/base'; @import '@andes/floating-menu/base'; \`\`\` ### Basic Usage All components follow Andes design principles with proper accessibility, responsive design, and consistent styling. ## Additional Resources For components not documented here, use the Andes MCP tools to get detailed specifications for any component in the Andes catalog. [V0_FILE]markdown:file="README.md" isEdit="true" isMerged="true" # v0 + Andes Design System Template This template configures v0 to generate UI aligned with Mercado Libre's Andes UI. ## Install \`\`\` nvm use npm i \`\`\` If you reference additional Andes packages, install them: \`\`\` npm i --save @andes/{package}@9 \`\`\` ## Styles Use `styles/andes.scss` for Andes imports (safe order: components → common). Add BEM blocks under `styles/blocks`. ## Accessibility - Provide `srLabel` when needed - Use `srAnnouncement` for progress states - Wrap form controls in `

` ## Examples - PricingSection: responsive cards with Andes buttons - ContactForm: form wrapped in `` using ProgressButton ## Private Registry See `.env.example` for guidance to map auth from `.npmrc` to env in CI. ## v0 Usage Link this directory as a Design System template in v0 and set `v0/instructions/system-prompt.md` as the System Prompt. [V0_FILE]markdown:file="instructions/system-prompt.md" isEdit="true" isMerged="true" # Andes Design System — System Prompt ## Objective Always generate UI using Andes UI components to match Mercado Libre's UX and brand language. ## Mandatory Rules - Prefer Andes components over native HTML. Do not apply custom styles or className to Andes components. - Wrap all form controls in an Andes `` parent. - Include required props (srLabel, aria- labels) and honor documented parent-child hierarchies. - Use Flexbox and responsive grid. Avoid fixed widths/heights. - For non-Andes UI parts, create reusable React components with BEM class names and provide complete SCSS. - Ensure all used Andes components have matching `@import` entries in `styles/andes.scss`. - If a component is needed and not installed, emit shell instructions: - `nvm use` then `npm i --save @andes/{package}@9` ## SASS Import Order - Safe: Import specific components first, then `@andes/common/index` (preferred) - Alternative: If importing common first, set `$andes-theme: 'mercadolibre';` before it. ## Grid & Spacing - 12-column layout. Gutters ~20px. - Breakpoints: Mobile <600px, Tablet 600–960px, Desktop >960px. - Spacing scale: 4, 8, 16, 24, 32, 48, 64. ## How to Use Template Instructions - Read files in `v0/instructions/**/*.md` for setup and component usage patterns. - Use examples under `v0/examples` as canonical patterns. ## Component Discovery - **Many Andes UI components are available** beyond those documented locally. - To discover all available components: 1. Use `andes-components-list` tool to see the full component catalog 2. Use `andes-components` tool with specific component names (e.g., `'Modal,Table,Toast'`) to get detailed specifications 3. Check `v0/instructions/components/` for commonly used component guides - Common components include: Button, Form, Textfield, Card, Badge, List, FloatingMenu, Modal, Table, Toast, Alert, Navigation, and many more. [V0_FILE]markdown:file="instructions/overview.md" isEdit="true" isMerged="true" # Overview This template configures v0 to generate code aligned with Andes UI: - Imports and versioning - Accessibility requirements - BEM + SCSS for any non-Andes elements - Examples for Pricing and Contact flows ## Component Documentation - See `v0/instructions/components/` for usage guides on commonly used components (Button, Form, Textfield, Card, Badge, List, FloatingMenu) - **Many more components are available** via Andes tools: - Use `andes-components-list` to discover all available components - Use `andes-components` with component name(s) to get detailed specifications - Common components include: Modal, Table, Toast, Alert, Navigation, and more [V0_FILE]markdown:file="instructions/andes-guidelines.md" isEdit="true" isMerged="true" # Andes Guidelines (Essential Excerpts) - Prefer Andes components - No custom styles or className on Andes components - Provide required accessibility props: `srLabel`, `aria-*` - Use proper component composition (e.g., `CardHeader` inside `Card`) - Use Flexbox and responsive breakpoints - Ensure SCSS includes all necessary `@import` for used components [V0_FILE]markdown:file="instructions/setup-andes.md" isEdit="true" isMerged="true" # Setup 1) Install required packages: \`\`\` nvm use npm i --save @andes/button@9 @andes/list@9 @andes/floating-menu@9 @andes/icons@9 @andes/common@9 \`\`\` 2) Import styles (safe order): \`\`\` // styles/andes.scss @import '@andes/button/index'; @import '@andes/list/base'; @import '@andes/floating-menu/base'; @import '@andes/common/index'; \`\`\` 3) Include page-level SCSS: \`\`\` // app/layout.tsx or pages/_app.tsx import '@/styles/andes.scss'; import '@/styles/primitives.scss'; import '@/styles/blocks/_pricing.scss'; import '@/styles/blocks/_contact-form.scss'; \`\`\` 4) Private registry? - Map your `.npmrc` auth to environment variables (see `.env.example`) and configure your CI. [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import Button from "../components/Button/Button" import Card from "../components/Card/Card" import Badge from "../components/Badge/Badge" import Spinner from "../components/Spinner/Spinner" export default function ComponentCatalog() { const [loadingStates, setLoadingStates] = useState({ button1: false, button2: false, button3: false, }) const handleLoadingDemo = (key: string) => { setLoadingStates((prev) => ({ ...prev, [key]: true })) setTimeout(() => { setLoadingStates((prev) => ({ ...prev, [key]: false })) }, 2000) } return (

{/* Header */}

Andes Component Catalog

A comprehensive showcase of all Andes design system components with their variants and states

{/* Button Component */}

Button

{/* Hierarchies */}

Hierarchies

{/* Sizes */}

Sizes

{/* States */}

States

{/* Full Width */}

Full Width

{/* Complex Background */}

Complex Background

{/* All Size + Hierarchy Combinations */}

All Combinations

Loud

Quiet

Mute

Transparent

{/* Badge Component */}

Badge

{/* Variants */}

Variants

Default Success Warning Error

{/* Sizes */}

Sizes

Small Medium

{/* All Combinations */}

All Combinations

Default

Small

Medium

Success

Small

Medium

Warning

Small

Medium

Error

Small

Medium

{/* Card Component */}

Card

{/* Variants */}

Variants

Default Card

White background with subtle border

Outlined Card

White background with prominent border

Elevated Card

White background with box shadow elevation

{/* Padding Sizes */}

Padding Sizes

Small Padding

12px padding

Medium Padding

16px padding

Large Padding

24px padding

{/* Clickable State */}

Interactive State

Non-Clickable Card

Default card without hover effects

alert("Card clicked!")}>

Clickable Card

Hover to see the effect, click to interact

Interactive

{/* Spinner Component */}

Spinner

{/* Sizes */}

Sizes

Small (12px)

Medium (16px)

Large (20px)

{/* In Context */}

In Context

Loading content...

Please wait

{/* Component Usage Example */}

Combined Components Example

Product Card

New

This is an example of combining multiple Andes components together in a realistic scenario.

Notification Card

You have unread notifications waiting for your attention.

) } [V0_FILE]markdown:file="instructions/available-components.md" isMerged="true" # Andes UI Available Components This document lists all available components from the Andes UI Design System. ## Import Patterns \`\`\`tsx // Components - use modularized imports import Button from '@/components/Button/Button' import Card from '@/components/Card/Card' import Badge from '@/components/Badge/Badge' import Spinner from '@/components/Spinner/Spinner' \`\`\` ## Components ### Core Components - **Button** - Primary action trigger with various visual states and hierarchies - **Card** - Container component for grouping related content - **Badge** - Small indicator for statuses, counts, or new content - **Spinner** - Loading indicator with various sizes ## Usage Guidelines - Always use Andes components to maintain design consistency - Follow the component conventions outlined in component-conventions.md - Reference component-reference.md for detailed props and examples - Import components using the patterns shown above [V0_FILE]markdown:file="instructions/component-reference.md" isMerged="true" # Andes Component Reference Comprehensive reference of available Andes components with examples and common usage patterns. ## Core Components ### Button Trigger actions or events like submitting forms or displaying dialogs. \`\`\`tsx import Button from '@/components/Button/Button' // Basic usage \`\`\` **Props:** - `children` (ReactNode) - Button content - `hierarchy` ('loud' | 'quiet' | 'transparent') - Visual hierarchy (default: 'loud') - `size` ('small' | 'medium' | 'large') - Button size (default: 'large') - `disabled` (boolean) - Whether button is disabled - `fullWidth` (boolean) - Whether button takes full width - `onClick` (function) - Click handler - `type` ('button' | 'submit' | 'reset') - Button type (default: 'button') **Sizes:** - Small: 24px height - Medium: 32px height - Large: 48px height **States:** - Default (idle) - Hover - Active (pressed) - Disabled **Hierarchies:** - **Loud**: Primary actions with solid blue background - **Quiet**: Secondary actions with light blue background - **Transparent**: Tertiary actions with transparent background **Examples:** \`\`\`tsx // Primary action button // Secondary action button // Small size button // Disabled button // Full width button \`\`\` --- ### Card Container component for grouping related content with consistent styling. \`\`\`tsx import Card from '@/components/Card/Card' // Basic usage

Card Title

Card content goes here

\`\`\` **Props:** - `children` (ReactNode) - Card content - `padding` ('none' | 'small' | 'medium' | 'large') - Internal padding (default: 'medium') - `interactive` (boolean) - Whether card has hover effects (default: false) - `onClick` (function) - Click handler (makes card interactive) **Padding Sizes:** - None: 0px - Small: 12px - Medium: 16px - Large: 24px **States:** - Default: White background with subtle border - Interactive hover: Slight shadow and border color change - Interactive active: Pressed state with adjusted colors **Examples:** \`\`\`tsx // Basic card

Product Details

Description text

// Large padding card

Welcome

Get started with your account

// Interactive card (clickable) navigate('/details')}>

Click me

This card is interactive

// No padding card (for custom layouts) Hero

Custom Layout

\`\`\` --- ### Badge Small indicator for statuses, counts, or new content. \`\`\`tsx import Badge from '@/components/Badge/Badge' // Basic usage Status \`\`\` **Props:** - `children` (ReactNode) - Badge content (typically text) - `variant` ('gray' | 'blue' | 'red' | 'green' | 'yellow') - Color variant (default: 'gray') - `size` ('small' | 'medium' | 'large') - Badge size (default: 'medium') **Sizes:** - Small: Compact size for inline use - Medium: Standard size - Large: Prominent size **Variants:** - **Gray**: Neutral, default state - **Blue**: Information or primary status - **Red**: Error, urgent, or negative status - **Green**: Success or positive status - **Yellow**: Warning or attention needed **Examples:** \`\`\`tsx // Status indicator Status // Error badge Error // Success badge Complete // Warning badge Pending // Small badge for counts 3 // Large prominent badge New \`\`\` --- ### Spinner Loading indicator with various sizes for different contexts. \`\`\`tsx import Spinner from '@/components/Spinner/Spinner' // Basic usage \`\`\` **Props:** - `srAnnouncement` (string) - Screen reader announcement (default: 'Loading...') - `size` ('small' | 'medium' | 'large') - Spinner size (default: 'medium') **Sizes:** - Small: 16px - For inline use - Medium: 24px - Standard size - Large: 32px - For prominent loading states **Examples:** \`\`\`tsx // Default spinner // Small inline spinner // Large loading state // In a button context \`\`\` --- ## Common Patterns ### Button Groups \`\`\`tsx

\`\`\` ### Card with Badge \`\`\`tsx

Product Name

New

Product description

\`\`\` ### Loading State \`\`\`tsx {isLoading ? (

) : (

Content here

)} \`\`\` ### Interactive Card Grid \`\`\`tsx

{items.map(item => ( handleClick(item.id)}> {item.category}

{item.title}

{item.description}

))}

[V0_FILE]json:file="package.json" isEdit="true" { "name": "mercado-libre-home", "version": "1.0.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start" }, "dependencies": { "react": "^18.0.0", "react-dom": "^18.0.0", "next": "^14.0.0", "clsx": "^2.0.0", "tw-animate-css": "1.4.0", "class-variance-authority": "0.7.1", "lucide-react": "0.545.0", "tailwind-merge": "3.3.1", "tailwindcss-animate": "1.0.7", "geist": "^1.3.0" }, "devDependencies": { "@types/node": "^20.0.0", "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", "@vercel/analytics": "^1.0.0", "typescript": "^5.0.0", "tailwindcss": "^4.1.9", "@tailwindcss/postcss": "^4.1.9", "postcss": "8.5.6" } } [V0_FILE]javascript:file="postcss.config.js" module.exports = { plugins: { "@tailwindcss/postcss": {}, }, } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const inter = Inter({ subsets: ["latin"], variable: "--font-sans", display: "swap", }) export const metadata: Metadata = { title: "Mercado Libre MCP", description: "Andes Design System Components", generator: "v0.app", icons: { icon: "/icon.svg", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This