Skip to main content

Getting started

If you are here, it means only one thing - you are ready to start building a new app based on the SVAR Core components and React. So let’s dive in and get you up and running right away.

Step 1. Install library dependencies​

SVAR Core library of controls is an open-source library distributed under the MIT license. It includes separate packages for Form controls, Menu, Toolbar, Comments, and Tasklist. You can install the necessary package via a package manager. For example, you can use npm and run the following commands:

  • for Form controls (the core library):
npm install @svar-ui/react-core
  • for the Menu widget:
npm install @svar-ui/react-menu
  • for the Toolbar widget:
npm install @svar-ui/react-toolbar
  • for the Comments widget:
npm install @svar-ui/react-comments
  • for the Tasklist widget:
npm install @svar-ui/react-tasklist

Step 2. Import components​

To use the installed package in your application, import the corresponding components. Here's an example importing the Button control from the @svar-ui/react-core package:

import { Button } from "@svar-ui/react-core";

Step 3. Initialize components​

Use the corresponding JSX element to create the chosen control in your React component:

import { Button } from "@svar-ui/react-core";

export default function App() {
  return <Button>Click Me</Button>;
}

Follow the related Controls sections for more information on initialization and configuration.

Step 4. Apply a skin​

To ensure correct initialization and a visually pleasing appearance of the control, it's recommended to apply a skin at the top level of your application. The SVAR React library provides skins such as Willow and WillowDark. Each skin is available in the package you have already installed.

To apply a skin to all the components in your application, import the desired skin component from the same package and wrap your application content with it. Here's an example:

import { Button, Willow } from "@svar-ui/react-core";
import "@svar-ui/react-core/style.css";

export default function App() {
  return (
    <Willow>
      {/* Place your entire application code here */}
      <Button>Click Me</Button>
    </Willow>
  );
}

By applying the skin at the top level, you don't need to wrap each individual component within the skin's tag. It simplifies your code structure and makes it more maintainable.

Learn more about skins in the Styling guide.

Step 5. Next steps​

The last step depends on what you want to do next. Here are the options:

  • Dive into the specificity of each control at the Widgets section
  • Explore the API Reference to get the full picture of the library functionality
  • Check the possibilities of localization, styling and user-app interaction in the Guides
  • Surf the Samples to check all the available features