VOODO: Voxel's Official Design Ontology

This library acts as both a design system and a component library for Voxel51's front-end applications.

Note: this library is currently in a pre-release state and may have frequent breaking changes. This library will adhere to semantic versioning best-practices starting with version 1.0.0.

Installation

npm i @voxel51/voodo

Usage

Using components

This library exports a number of React components which are consistent with VOODO's look and feel.

import { Button } from "@voxel51/voodo";

export const Component = () => {
    return (
        <Button onClick={() => alert("Button clicked!")}>
            Click me!
        </Button>
    )
};

Note that you'll need to import this library's theme somewhere in your application for the components to be styled correctly. See CSS Themes.

Using icons

Every icon is exported as its own component so that bundlers only include the icons you actually import (there is intentionally no icon-name enum or runtime icon map — that would defeat tree-shaking):

import { CheckIcon, Size } from "@voxel51/voodo";

export const Component = () => <CheckIcon size={Size.Md} />;

To add a new icon, drop the SVG in src/img (PascalCase filename) and run npm run generate-icons.

Theming

CSS Themes

This library is based on Tailwind and exports a set of CSS variables which capture the relevant colors, spacing, typography, etc.

To consume the CSS variables, simply include the following line somewhere in your application.

import "@voxel51/voodo/theme.css";

Contributing

This library is based on HeadlessUI and Tailwind. Components should be minimal, intentional, and adhere strictly to the Voxel51's internal design guidelines.

General rules of thumb:

• Prefer explicit behavior over implicit
• Provide configurability where appropriate
  • Ensure top-level properties adhere to design guidelines
  • Allow for property overrides
• Prefer small, composable components

Publishing

This library is published to NPM via GitHub Actions workflows.

This library is currently in a pre-release state, with versions matching 0.x.y. Standard semantic versioning will be enforced starting with version 1.0.0.

License

Copyright 2024-2026 Voxel51, Inc. Licensed under the Apache License, Version 2.0.

A portion of the icon artwork is derived from Google Material Icons (Apache License 2.0), extracted via @mui/icons-material (MIT License). See NOTICE for attribution details.