DEV Community

Cover image for New React Components Library from SVAR
Olga T.
Olga T.

Posted on • Originally published at svar.dev

New React Components Library from SVAR

#react #webdev #frontend

If you're building data-driven, scalable apps with React, using pre-built, reusable UI components can significantly speed up development. We created SVAR UI components to simplify the process and provide solid, ready-to-use solutions for common UI needs.

In addition to advanced components like the SVAR React Gantt and DataGrid, we’re excited to release an open-source, React 18/19-ready UI library of smaller, essential elements like buttons, tabs, calendar, popups, and multiple form controls - called SVAR React Core.

SVAR React Core UI Components

What's Included

Similar to MUI or Chakra UI libraries, SVAR React Core provides a collection of ready-to-use, pre-styled React components for the most common UI needs:

  • Form controls: buttons, checkboxes, inputs, sliders, toggles
  • Calendar: date picker, range picker, or simple month calendar
  • Dropdowns & selects: from basic selects to multi-combo
  • Navigation: tabs, segmented buttons, pagination
  • Layout & utilities: sidebar, menus, toolbars, notifications

Why Try SVAR React Core?

Although there are many popular React components libraries out there, we invite you to try SVAR React Core, because it might be the missing piece in your React toolkit 😊

The key advantages include:

  • Clear, intuitive API
  • Small bundle size
  • Easily styled with CSS
  • Optimized performance for large datasets
  • React 18/19 support
  • Dark and light themes
  • Detailed documentation and responsive technical team

Also, SVAR React Core components are complementary to SVAR React DataGrid and Gantt. You can use them together in the same project with consistent design and styling.

Get Started

These are the useful links to get started 🔗

You can install the Core package via npm:

npm install @svar-ui/react-core

Example of use:

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

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

Note that some components should be installed as separate packages:

npm install @svar-ui/react-menu
npm install @svar-ui/react-toolbar
npm install @svar-ui/react-comments
npm install @svar-ui/react-tasklist

What's Next for SVAR Core?

We’re planning to further improve SVAR React Core library with this features:

  • TypeScript support
  • Accessibility improvements
  • File uploader component

Wrapping Up

We built SVAR React Core to speed up UI development in our projects, and we’re excited to share it with the React community. Give it a try and let us know what you think!

Top comments (0)