VOODO Design System for FiftyOne

VOODO is the official React component library for FiftyOne applications.

Documentation is fetched dynamically - always get current components from llms.txt before writing code.

Key Directive

ALWAYS fetch llms.txt BEFORE writing any UI code:

WebFetch(
    url="https://voodo.dev.fiftyone.ai/llms.txt",
    prompt="List all available VOODO components with their variants and use cases"
)

This gives you:

• •All current components (buttons, inputs, toasts, etc.)
• •Available variants for each component
• •Design token categories (colors, spacing, typography)
• •Links to interactive Storybook docs

Workflow

1. Fetch component list

WebFetch(
    url="https://voodo.dev.fiftyone.ai/llms.txt",
    prompt="What VOODO components are available for building forms?"
)

2. Use components from the fetched list

// Import only components that exist in llms.txt
import { Button, Input, Select } from "@voxel51/voodo";

3. For detailed props, direct user to Storybook

The llms.txt includes Storybook links for each component. For detailed prop documentation:

"For Button props and examples, see: https://voodo.dev.fiftyone.ai/?path=/docs/components-button--docs"

Note: Storybook is a JavaScript app - WebFetch cannot extract its content. Direct users to browse interactively.

Installation

{
  "dependencies": {
    "@voxel51/voodo": "latest"
  }
}

FiftyOne Patterns

• •Dark theme: FiftyOne App uses dark mode by default
• •Semantic variants: Use success/danger/warning for actions (verify names from llms.txt)
• •Design tokens: Use spacing/color tokens instead of arbitrary values

Integration with FiftyOne SDK

import { useRecoilValue } from "recoil";
import * as fos from "@fiftyone/state";  // Standard FiftyOne alias
import { Button, Text, Stack } from "@voxel51/voodo";

const MyPanel: React.FC = () => {
  const dataset = useRecoilValue(fos.dataset);
  return (
    <Stack>
      <Text>{dataset?.name}</Text>
      <Button>Process</Button>
    </Stack>
  );
};

Resources

Related: Use fiftyone-develop-plugin skill for full plugin setup.

Troubleshooting