@rokle/components

66 React components that adapt visually to a personality profile. Pass a personality prop to adjust shape, weight, density, and feel across the entire set.

Components

Inputs: Button, IconButton, Input, Textarea, Select, Checkbox, RadioGroup, Toggle, Label, FormLayout, NumberInput, PinInput, PasswordInput, TagsInput, Combobox, OTPField, ColorPicker, AngleSlider, SignaturePad

Display: Typography, ColourSwatch, Card, Badge, Avatar, Separator, Table, QRCode, Timer, RatingGroup

Overlay: Dialog, Toast, Tabs, Accordion, Tooltip, Popover, Menu, AlertDialog, Drawer, HoverCard, DropdownMenu, ContextMenu, Tour

Navigation: Breadcrumbs, Pagination, NavigationMenu, Menubar, Steps, Toolbar

Layout: FormLayout, Splitter, ScrollArea, Collapsible, Carousel, SegmentGroup, ToggleGroup, ImageCropper

Data: Table, TreeView, Listbox, Clipboard, FileUpload, Editable, Field, Form

Key Exports

| Export | Description | | ------------------------------------ | ---------------------------------------------------- | | <Button>, <Card>, <Input>, ... | All 66 components | | personalityToVars(profile) | Convert a personality profile to CSS variable object | | mergeStyles(base, override) | Merge style objects for component customisation |

Usage

import { Button, Card, personalityToVars } from "@rokle/components";

const personality = { shape: 80, weight: 40, density: 60, feel: 70 };

<Card personality={personality}>
  <Button personality={personality} variant="primary">Click me</Button>
</Card>

Types

PersonalityProps, BaseComponentProps, ButtonProps, CardProps, InputProps, and per-component prop types.