Modern UI components for granular, inspired by Mantine, built for a no-build, DOM-first workflow.
import { Container, Stack, Title, Text, Button, useDisclosure, Modal } from '@granularjs/ui';
const [opened, { open, close }] = useDisclosure(false);
const App = () =>
Container(
Stack({ gap: 16 },
Title({ order: 2 }, 'Granular UI'),
Text({ dimmed: true }, 'Fast, clean, and modern.'),
Button({ onClick: open }, 'Open modal'),
Modal({ opened, onClose: close, title: 'Hello' },
Text('This is a modal.')
)
)
);ButtonTextTitleContainerStackGroupCardBadgeTextInputTextareaNumberInputModalLoadingCheckboxSwitchSelectTabsTableAccordionTooltipMenuDrawerNotificationDividerPaperAlertAvatarKbdCodeBlockquoteSimpleGridListAnchorImageProgressSliderSkeletonChipSegmentedControlPaginationRadioRadioGroupBreadcrumbsCenterSpaceCollapseActionIconPopoverHoverCardAffixFieldsetAppBarSidebarTimelineStepperRatingTagCalendarMultiSelectToastStackDatePickerNotificationsRangeSliderDateInputNumberFieldPopperPasswordInputSearchInputCopyButtonProgressRingToastSelectSearchSwitchGroupRangePickerFlexNavLinkIndicatorBurgerLoadingOverlayGridColScrollAreaPinInputCheckboxGroupAvatarGroupBadgeGroup
useDisclosure