UI sections built for AI coding agents.
Your AI agent runs a CLI, gets a complete integration package — code, dependencies, shadcn components, design tokens — and ships it straight into your project.
npx sectioncn search "orbit hero" --variant=modern --library=reactHow agents use it
Search
The agent runs sectioncn search with a natural query and filter flags. Short queries use trigram similarity; longer ones use full-text ranking.
npx sectioncn search "pricing with three tiers" --library=reactFetch
The agent picks a slug and calls sectioncn get. In non-TTY mode the output is structured JSON — easy to parse, no ANSI codes.
npx sectioncn get orbit-hero --library=react --format=jsonIntegrate
The response contains files, dependencies, shadcn components, Tailwind config additions, and a designTokens map. The agent replaces the hardcoded hex values with the user's design tokens.
Why sectioncn
AI-first output
Every response is a complete integration package, not just a code snippet. The CLI detects TTY and emits clean JSON when piped.
Design-token aware
All colors, radii, and fonts are hardcoded as arbitrary values. The designTokens field documents the purpose of every value so the agent can remap to the target design system.
Multi-library
React is required; Vue, Svelte, Angular, Solid, and HTML are optional per section. Each section has its own dedicated implementation — no cross-compilation.