website·Indexed 32 days ago
https://ui.convertcompany.com.brA comprehensive React-based design system featuring a wide array of accessible components including OTP Input, MultiSelect, JSON Editor, and Audio Wave Player. The library provides specialized AI interface components like Prompt Input and Prompt Command, custom hooks such as useInfiniteScroll and useAutoSizeTextArea, and a suite of utility functions for CSS and class manipulation.
@convertcompany/ui is the official design system of Convert Company. It is a library of reusable React components built upon shadcn/ui and integrated with Tailwind CSS. It is designed to ensure visual consistency, accessibility, and productivity across both internal projects and large-scale products. Key features include native Tailwind integration, support for themes and dark mode, and adherence to accessibility best practices.globals.css used to standardize spacing, colors, fonts, borders, and other visual properties. These tokens are integrated into Tailwind CSS via the theme.extend configuration, allowing for consistent visual cohesion across components and projects and easy branding overrides.TagInput component is a multi-tag input field that allows users to select multiple options from a list. It supports search filtering, dynamic creation of new tags, custom badge rendering, and infinite scrolling for large datasets. It extends many functionalities from the AutoComplete and MultiSelect components.import {
Pagination, // Root <nav> container with role="navigation"
PaginationContent, // <ul> list wrapper
PaginationItem, // <li> wrapper for each item
PaginationLink, // Page link (supports isActive)
PaginationPrevious, // "Back" button with left chevron
PaginationNext, // "Next" button with right chevron
PaginationEllipsis, // "..." indicator for omitted pages
} from "@convertcompany/ui";Callout component is used to create visual highlights for displaying alerts, tips, or important messages. It can be composed with CalloutTitle and CalloutDescription to structure the content.import { Callout, CalloutTitle, CalloutDescription } from "@convertcompany/ui";CopyToClipboard component is a button that copies a provided string to the clipboard and provides visual feedback to the user. It is built on top of the Button component and internally utilizes the useCopyToClipboard hook to manage the copy state and logic.import { CopyToClipboard } from "@convertcompany/ui";Skeleton component is a utility used to indicate that content is loading by displaying a placeholder with a pulsing animation effect. It is commonly used in loading states for cards or other UI elements to improve perceived performance.import { Skeleton } from "@convertcompany/ui";
export const MyComponent = () => (
<Skeleton className="h-4 w-full" />
);Card component provides a visual container with borders, padding, and shadows, making it ideal for grouping related information or wrapping forms.import { Card } from "@convertcompany/ui";
// Usage example
<Card>
<h3>New York</h3>
<p>This is a basic example of a card to present grouped content.</p>
</Card>Separator component is used to create a subtle and elegant visual division between content sections. By default, it renders as a horizontal line.import { Separator } from "@convertcompany/ui";
export function Example() {
return (
<div>
<section>Section Above</section>
<Separator />
<section>Section Below</section>
</div>
);
}OtpInput component provides a set of input fields specifically designed for two-factor authentication (2FA). It supports keyboard navigation and allows users to paste codes directly into the fields.import { OtpInput } from "@convertcompany/ui";
// Basic usage
<OtpInput />PromptCommand is a UI component that provides an elegant modal for AI interactions. It supports keyboard interaction, animations, and pre-defined suggestions to accelerate the prompt creation process.import { PromptCommand } from "@convertcompany/ui/ai";