skill CX Codex

syncfusion-react-dropdown-tree — Claude Code skill

Q: How do I install syncfusion-react-dropdown-tree in Claude Code?

Run `npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-dropdown-tree -a claude-code`, then check `~/.claude/skills/syncfusion-react-dropdown-tree/SKILL.md`.

Helps an agent build a Syncfusion React Dropdown Tree for hierarchical selection, checkboxes, and filtering. Useful with local or remote data sources.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓

npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-dropdown-tree -a claude-code

Open on GitHub

What syncfusion-react-dropdown-tree does

This skill guides implementation of the Syncfusion React Dropdown Tree, where hierarchical items appear inside a dropdown and users can select one or several nodes. It covers hierarchical and self-referential data, selected-value display, filtering, and tree behavior.

The material includes local and remote binding, DataManager with OData adaptors, on-demand child loading, item and value templates, and events such as change, select, filtering, and popup. It also covers keyboard navigation, RTL layouts, localization, and WAI-ARIA support.

Use loadOnDemand for large datasets and autoCheck when parent and child checkbox states must stay linked. Remote binding depends on DataManager and a suitable adaptor, so that setup belongs in the implementation plan.

What it helps with

render hierarchical data inside a dropdown
let users select several nodes with checkboxes
load child nodes only when needed
add search across tree items
connect the component to a remote OData source

Example prompts for the agent

Build a React Dropdown Tree for product categories with multi-select checkboxes and linked parent states.
Add tree filtering and load child nodes on demand.
Configure the Dropdown Tree for remote OData data, RTL layout, and keyboard navigation.

How to install syncfusion-react-dropdown-tree

1Skills CLI (Vercel)

npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-dropdown-tree -a claude-code

2Manually: put the files in place

~/.claude/skills/syncfusion-react-dropdown-tree/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/syncfusion-react-dropdown-tree/

1Skills CLI (Vercel)

npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-dropdown-tree -a codex

2Manually: put the files in place

.agents/skills/syncfusion-react-dropdown-tree/SKILL.md

For all projects use ~/.agents/skills/

1Skills CLI (Vercel)

npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-dropdown-tree -a cursor

2Manually: put the files in place

.cursor/skills/syncfusion-react-dropdown-tree/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install syncfusion/react-ui-components-skills syncfusion-react-dropdown-tree

2Manually: put the files in place

.github/skills/syncfusion-react-dropdown-tree/SKILL.md

1Skills CLI (Vercel)

npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-dropdown-tree -a gemini-cli

2Platform CLI

gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-dropdown-tree

Manually: put the files in place

.devin/skills/syncfusion-react-dropdown-tree/SKILL.md

The legacy .windsurf/skills/ path still works

Skills CLI (Vercel)

npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-dropdown-tree -a opencode

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about syncfusion-react-dropdown-tree

How do I install syncfusion-react-dropdown-tree in Claude Code?

Run npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-dropdown-tree -a claude-code, then check ~/.claude/skills/syncfusion-react-dropdown-tree/SKILL.md.

What does syncfusion-react-dropdown-tree do?

It guides an agent through building a Syncfusion React Dropdown Tree for hierarchical selection inside a dropdown. The skill covers checkboxes, filtering, templates, events, remote data, and accessibility.

Can it work with remote data?

Yes. The skill describes DataManager binding with OData, OData V4, WebAPI, and URL adaptors, including on-demand child loading.

Similar skills

All skills for Frontend and UI →

vercel-react-view-transitions vercel A skill that walks your agent through native view transitions in React: page changes, shared elements, enter and exit animations without third-party libraries. CX Codex +1 168,100installs react vercel-labs This skill turns json-render JSON specs into React component trees. Use it when building JSON-driven UIs or defining a component catalog for generated specs. CX Codex +1 16,300installs clerk-react-router-patterns clerk Guides Clerk integration with React Router v7/v8, including loaders, protected routes, SSR auth, and organization switching. Useful when wiring auth into a router. CX Codex +1 15,500installs react-email Resend A skill for building HTML emails from React components. Use it when the email has to survive Outlook and Gmail without breaking. CX Codex +1 12,600installs react-expert https://github.com/Jeffallan A skill for React 18+, Next.js App Router, and create-react-app work. It writes components and hooks, debugs rendering, and migrates class components to functions. CX Codex +1 5,500installs react-mcp assistant-ui A skill for wiring @assistant-ui/react-mcp into an app: users connect their own MCP servers in the browser and the tools show up in chat. CX Codex +1 4,000installs

From the same set57

syncfusion-react-maps Walks the agent through building geographic maps in React: GeoJSON, markers, bubbles, legends, choropleth. Useful when data has to be shown by region. CX Codex +1 707installs syncfusion-react-blockeditor A skill that walks your agent through the Syncfusion React BlockEditor: block-based content editing with menus, drag-and-drop and Yjs collaboration. CX Codex +1 706installs syncfusion-react-speech-to-text This skill guides React implementations of Syncfusion SpeechToText, including microphone input, transcript events, listening control, and accessible voice forms. CX Codex +1 705installs syncfusion-react-treeview An agent skill for building hierarchical trees with @syncfusion/ej2-react-navigations: node selection, checkboxes, drag-drop, inline editing and templates. CX Codex +1 705installs syncfusion-react-inline-ai-assist This skill guides React implementations of Syncfusion Inline AI Assist with AI suggestions, commands, response handling, and service integrations. CX Codex +1 700installs syncfusion-react-ribbon A skill for building Office-style ribbon toolbars in React with Syncfusion: tabs, groups, galleries, backstage view, KeyTips. Use it when an agent needs to scaffold a command-centric UI. CX Codex +1 700installs syncfusion-react-data-manager Guides coding assistants in setting up Syncfusion DataManager for React apps, managing CRUD tasks, and selecting API adaptors safely. CX Codex +1 676installs syncfusion-react-buttons Provides implementation guides for Syncfusion React button components. Helps code assistants wire up styled buttons, toggle actions, and grouped selections. CX Codex +1 675installs