21st.dev Magic

Design

Generate polished UI components instantly through Neotask on OpenClaw

What You Can Do

Neotask connects to 21st.dev Magic through OpenClaw, giving you instant access to a massive library of production-ready UI components and AI-powered component generation — all through conversation.

Component Generation

  • Generate from descriptions — Describe the UI you need in plain English and get complete, styled React components with Tailwind CSS, shadcn/ui, or your preferred library
  • Iterate with feedback — Say "make it more compact" or "add a loading state" and Neotask applies your feedback immediately with a new code output
  • Multi-variant generation — Request multiple design variations at once so you can choose the best fit for your project
  • Accessibility built-in — Generated components follow ARIA best practices and keyboard navigation patterns from the start

    • Component Library Search

  • Search by pattern — Find components matching your use case: "a pricing table with toggle for monthly/annual billing" or "a notification drawer with unread count"
  • Browse by category — Explore components by type: navbars, modals, forms, cards, data tables, dashboards, and more
  • Filter by stack — Search for components specific to your tech stack (React, Vue, Tailwind, shadcn, Radix UI)
  • Copy-ready snippets — Every component from the library is formatted for immediate use in your codebase

    • Design System Integration

  • Match your existing style — Provide your color tokens or Tailwind config and Neotask generates components that match your design system
  • Component composition — Ask for a full page layout by composing multiple component snippets together
  • Dark mode variants — Request dark mode versions of any component with consistent token usage

    • Try Asking

  • "Generate a pricing card component with a popular badge, feature list, and a CTA button using Tailwind"
  • "I need a responsive navigation bar with a logo on the left, nav links in the center, and a Sign In button on the right"
  • "Search 21st.dev for a data table component with sorting, filtering, and pagination"
  • "Create a hero section with a large headline, subtitle, two CTA buttons, and a mockup image on the right"
  • "Make the component more compact and add a skeleton loading state"
  • "Find a modal dialog component that slides in from the right as a drawer"
  • "Generate an onboarding stepper with 4 steps and progress indicator"
  • "I need a toast notification system that stacks notifications in the bottom-right corner"

    • Pro Tips

  • Be specific about your design intent — "enterprise SaaS style with subtle borders" or "consumer app with rounded corners and soft shadows" produces dramatically different results
  • Ask Neotask to adapt a found 21st.dev component to your existing color palette by providing your primary/secondary color values
  • Use component generation early in your design process to quickly prototype layouts before committing to a full design system
  • Combine with your code editor workflow through OpenClaw — generate a component, refine it conversationally, and output the final file directly to your project

    • Works Well With