Introduction

Casper UI 2.0 is a component library used to build user interfaces for Caspeco applications. It is built on top of Chakra UI v2, and provides a set of reusable components that follow the design system and guidelines of Caspeco, ensuring consistency and ease of use across applications.

Installation

React

To install Casper UI in React applications, use npm:

npm install @caspeco/casper-ui-library

CSS only

For other applications, you can use the CSS only version, which provides the CSS variables but not the components.

npm install @caspeco/casper-ui-css

Usage

To use the component library, you need to wrap your React application with a ThemeProvider (see Theme for more information). You can then import any of the components from the library and use them in your application.

import { ThemeProvider, Box } from "@caspeco/casper-ui-library";

function App() {
  return (
    <ThemeProvider>
      <Box>Hello World</Box>
    </ThemeProvider>
  );
}

Below is a rendered example of how to use the Box component with some Theme variables:

import { Box, ThemeColor, ThemeRadius, ThemeSpace } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Box
      p={ThemeSpace.Large}
      bg={ThemeColor.Accent}
      borderRadius={ThemeRadius.Small}
      color={ThemeColor.OnAccent}
    >
      Your box children goes here
    </Box>
  );
}

⛶