# VOODO - Voxel51 Design System

> Official React component library for FiftyOne applications.
> Import components from @voxel51/voodo when building FiftyOne plugins.

## Components

- [ActivityToast](https://voodo.dev.fiftyone.ai/?path=/docs/components-activitytoast--docs): Default, Secondary, Success, Danger
- [Button](https://voodo.dev.fiftyone.ai/?path=/docs/components-button--docs): Primary, Secondary, Success, Danger, Extra Small, Small, Medium, Disabled, With Click Handler, With Leading Icon, With Trailing Icon, Borderless, Icon Only
- [Checkbox](https://voodo.dev.fiftyone.ai/?path=/docs/components-checkbox--docs): Default, Checked, Unchecked, Unset, Disabled, Disabled Checked, Sizes, Without Label
- [DatePicker](https://voodo.dev.fiftyone.ai/?path=/docs/components-datepicker--docs): Date Only, Datetime, Sizes, Disabled, Errored, Min Max Date
- [FormField](https://voodo.dev.fiftyone.ai/?path=/docs/components-formfield--docs): Basic Example, Raw Input, With Label, With Description, Disabled, With Error
- [FormFieldGroup](https://voodo.dev.fiftyone.ai/?path=/docs/components-formfieldgroup--docs): Basic Example, Vertical, Horizontal, Disabled
- [Heading](https://voodo.dev.fiftyone.ai/?path=/docs/components-heading--docs): H 1, H 2, H 3, H 4
- [Icon](https://voodo.dev.fiftyone.ai/?path=/docs/components-icon--docs): Default, All Icons
- [Input](https://voodo.dev.fiftyone.ai/?path=/docs/components-input--docs): Default, Controlled, With Icon, Sizes, Types, Disabled, Unset, Errored, Read Only, Full Rounded
- [ListItem](https://voodo.dev.fiftyone.ai/?path=/docs/components-listitem--docs): Selectable, Draggable, With Primary Content, With Secondary Content, With Actions
- [Pill](https://voodo.dev.fiftyone.ai/?path=/docs/components-pill--docs): Primary, Approved, In Review, Failed, Extra Small, Small, Medium, With Shadow, With Large Shadow, Rounded, Square, Custom Colors
- [Radio](https://voodo.dev.fiftyone.ai/?path=/docs/components-radio--docs): Default, Radio Group Sizes, Checked, Unchecked, Unset, Disabled, Disabled Checked, Radio Group Horizontal, Radio Group With One Disabled, Radio Group All Disabled, Without Label
- [RichButton](https://voodo.dev.fiftyone.ai/?path=/docs/components-richbutton--docs): Full Example, Basic, With Icon, With Description, Active, With Click Handler
- [RichButtonGroup](https://voodo.dev.fiftyone.ai/?path=/docs/components-richbuttongroup--docs): Exclusive Selection, Multiple Selection, Controlled
- [RichList](https://voodo.dev.fiftyone.ai/?path=/docs/components-richlist--docs): With Selection State, Draggable, Draggable With Selection, Draggable With Additional Content, Controlled
- [Select](https://voodo.dev.fiftyone.ai/?path=/docs/components-select--docs): Controlled, Uncontrolled, Uncontrolled Multi Select, With Rich Content, Unset
- [Slider](https://voodo.dev.fiftyone.ai/?path=/docs/components-slider--docs): Controlled, Multiple Knobs, With Slider Labels, With Input Labels, With All Labels, Bare, Unset
- [Spinner](https://voodo.dev.fiftyone.ai/?path=/docs/components-spinner--docs): Default, Xs, Sm, Md, Lg, With Custom Color
- [Stack](https://voodo.dev.fiftyone.ai/?path=/docs/components-stack--docs): Basic Example, Vertical, Horizontal
- [Text](https://voodo.dev.fiftyone.ai/?path=/docs/components-text--docs): XXS, XS, SM, MD, LG, XL, XXL
- [TextArea](https://voodo.dev.fiftyone.ai/?path=/docs/components-textarea--docs): Default, With Placeholder, With Error, Disabled, Disabled With Value, Unset, Sizes, Resize Behaviors, Different Rows, Border Radii, With Value, Interactive Form
- [TextBadge](https://voodo.dev.fiftyone.ai/?path=/docs/components-textbadge--docs): Default, Custom Color
- [Toast](https://voodo.dev.fiftyone.ai/?path=/docs/components-toast--docs): Default, Secondary, Success, Danger
- [ToastContainer](https://voodo.dev.fiftyone.ai/?path=/docs/components-toastcontainer--docs): Default, Top, Top Right, Right, Bottom Right, Bottom, Bottom Left, Left, Top Left
- [Toggle](https://voodo.dev.fiftyone.ai/?path=/docs/components-toggle--docs): Default, Checked, Unchecked, Unset, Disabled, Disabled Checked, Sizes, Without Label
- [ToggleSwitch](https://voodo.dev.fiftyone.ai/?path=/docs/components-toggleswitch--docs): Default, Full, Soft Toggle, Borderless, Extra Small, Small, Medium, Default Second Tab, With Rich Content, With Two Tabs, With Many Tabs
- [Tooltip](https://voodo.dev.fiftyone.ai/?path=/docs/components-tooltip--docs): Default, Top, Right, Bottom, Left, Long Tooltip

## Design Tokens

- [Borders](https://voodo.dev.fiftyone.ai/?path=/docs/design-system-borders--docs): Empty
- [Colors](https://voodo.dev.fiftyone.ai/?path=/docs/design-system-colors--docs): Empty
- [Shadows](https://voodo.dev.fiftyone.ai/?path=/docs/design-system-shadows--docs): Empty
- [Spacing](https://voodo.dev.fiftyone.ai/?path=/docs/design-system-spacing--docs): Empty
- [Typography](https://voodo.dev.fiftyone.ai/?path=/docs/design-system-typography--docs): Empty

## Resources

- [Storybook](https://voodo.dev.fiftyone.ai/)
- [npm package](https://www.npmjs.com/package/@voxel51/voodo)
- [GitHub](https://github.com/voxel51/design-system)