Phantom UI & Component Library

The Phantom Design and Component Library for React is a versatile and powerful package designed to streamline your development workflow by providing a comprehensive collection of modular, reusable React components. Each component is built with flexibility in mind, allowing for easy customization using modern SCSS styling practices. Whether you're building a complex application or a simple interface, Phantom enables you to maintain consistency and efficiency across your projects by leveraging a well-structured design system. With its focus on modularity and reusability, Phantom empowers developers to create visually appealing, responsive, and maintainable UIs with minimal effort.

Components & More

Responsive Design

Through the use of CSS variables and React contexts which span the entire app, it is simple and easy to develop a consistent design style for your websites. Phantom also includes integration with SASS for easily utilizing design tokens such as colors.

General Components

Card Heading Icon Styled Image Typography (Paragraph, Text)

Feedback Components

Banner Loading Modal

Input Components

Button Dropdown File Upload Portal Form Input Segmented Switch Toggle

Interaction Components

Accordion Anchor Hover Mark Popover Tab Group

Layout Components

Adaptive Grid Column Flex Page Row Section Simple Dynamic Header Simple Footer Split Styled App

Hooks

useBackButton, useInterval, useIsVisible, useMousePosition, useOutsideClick, useQueryParams, useScrollDistance, useTheme, useWindowSize