Getting started

With the CSS imported, using a component is one line. Here, a Button with the primary variant:

import { Button } from "vaiperui";
 
export function Save() {
  return <Button variantColor="primary">Save</Button>;
}

The components share the same layout props — variantColor, size, radius and animation. The Button adds variant and hover; see each component's reference for the full list.

<Button variantColor="success" radius="full">
  Confirm
</Button>
<Button variant="outlined" variantColor="warning">
  Review
</Button>
<Button variantColor="danger" hover="lift">
  Delete
</Button>

The Input formats phones, cards, dates and documents automatically as the user types. Just pass mask.

import { Input } from "vaiperui";
 
export function PhoneField() {
  return <Input label="Phone" mask="phone" />;
}