Skip to main content

RizzUI 1.0.0

· 4 min read
Idris
Idris
Sr. Software Engineer
Nahid
Nahid
Software Engineer

In this ever-evolving landscape of web development, creating modern, accessible, and responsive user interfaces has become more critical than ever. To meet these demands, we are thrilled to introduce RizzUI, a next-generation React UI library that offers limitless customization options, unparalleled ease of use, and robust type safety.

RizzUI 1.0.0 brings core upgrades, new APIs, and improvements to the developer experience. Key updates include:


React 19 Support​

RizzUI now supports React 19. You can now use the latest version of React with RizzUI.


Versioned Doc​

We have introduced versioned documentation for RizzUI. You can now switch between different versions of the documentation to view the changes and updates made in each version.


Tree Shaking​

RizzUI now supports tree shaking. You can now import components individually or in bulk.


Client Components​

Whenever you are importing these components you have to use "use client" as a prefix. Because of the use cases of these components they are mostly used in the client side.

"use client";

import { Input } from "rizzui/input";

export default App () {
  return (
    <Input label="Input" />
  );
}

List of client components​

Components that are not listed here can be used in server components.

"use client"; // prefix is required for all client components

import { Input } from "rizzui/input";
import { Password } from "rizzui/password";
import { Textarea } from "rizzui/textarea";
import { CheckboxGroup } from "rizzui/checkbox-group";
import { RadioGroup } from "rizzui/radio-group";
import { Select } from "rizzui/select";
import { MultiSelect } from "rizzui/multi-select";
import { PinCode } from "rizzui/pin-code";
import { NumberInput } from "rizzui/number-input";
import { Dropdown } from "rizzui/dropdown";
import { Tabs } from "rizzui/tabs";
import { Stepper } from "rizzui/stepper";
import { Tooltip } from "rizzui/tooltip";
import { Popover } from "rizzui/popover";
import { Modal } from "rizzui/modal";
import { Drawer } from "rizzui/drawer";
import { Accordion } from "rizzui/accordion";
import { FileInput } from 'rizzui/upload';
import { RadialProgressBar } from 'rizzui/radial-progressbar';
import { Avatar } from "rizzui/avatar";

Server Components​

Components that supports server side rendering. Whenever you are importing these components you don't need to use "use client" as a prefix. But if you are using events like onClick, onChange etc. you have to use "use client" as a prefix.

import { Button } from "rizzui/button";

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

Example: if you are using events

"use client";

import { Button } from "rizzui/button";

export default App () {
  return (
    <Button onClick={() => console.log('clicked')}>Click Me</Button>
  );
}

Integrated Components​

These components are categorized as integration components due to their varied use cases. To use them, simply copy and paste the code from the documentation into your project. You can customize them to fit your requirements. By default, if you copy the code from the documentation, they will support our design system.

List of integration components​


Select Search Field Sticky​

The search field in the Select component is now can be sticky. When you scroll down the list of options, the search field will remain visible at the top of the dropdown.

Example:

"use client";

import { Select } from "rizzui/select";

export default App () {
  return (
    <Select label="Select" options={options} stickySearch={true} />
  );
}

MultiSelect Search Field Sticky​

The search field in the MultiSelect component is now can be sticky. When you scroll down the list of options, the search field will remain visible at the top of the dropdown.

Example:

"use client";

import { MultiSelect } from "rizzui/multi-select";

export default App () {
  return (
    <MultiSelect label="MultiSelect" options={options} stickySearch={true} />
  );
}