Package Exports

@getufy/flint-ui
@getufy/flint-ui/__benchmarks__/component-render.bench
@getufy/flint-ui/_shared/decorate-B1hCE6tV
@getufy/flint-ui/_shared/flint-accordion-DNGKcW4Y
@getufy/flint-ui/_shared/flint-alert-DOTOiLMu
@getufy/flint-ui/_shared/flint-app-bar-CV_BSvun
@getufy/flint-ui/_shared/flint-autocomplete-CUktZLCG
@getufy/flint-ui/_shared/flint-avatar-jWwsf1ad
@getufy/flint-ui/_shared/flint-backdrop-baxdO0gY
@getufy/flint-ui/_shared/flint-badge-BHUBZJy7
@getufy/flint-ui/_shared/flint-bottom-navigation-BqWCGs9W
@getufy/flint-ui/_shared/flint-bottom-navigation-action-BBkHBezr
@getufy/flint-ui/_shared/flint-box-0kNsc8nJ
@getufy/flint-ui/_shared/flint-breadcrumbs-vd18TxD8
@getufy/flint-ui/_shared/flint-button-CrQsTq4n
@getufy/flint-ui/_shared/flint-button-group-BYe22BPG
@getufy/flint-ui/_shared/flint-card-BSJBQDJH
@getufy/flint-ui/_shared/flint-card-action-area-CAI9th-d
@getufy/flint-ui/_shared/flint-card-actions-vJHdfKih
@getufy/flint-ui/_shared/flint-card-content-DSv5xB4Z
@getufy/flint-ui/_shared/flint-card-header-DOMtfPbH
@getufy/flint-ui/_shared/flint-card-media-gcCqZNL-
@getufy/flint-ui/_shared/flint-carousel-By-7QD7L
@getufy/flint-ui/_shared/flint-checkbox-CujSb0Pq
@getufy/flint-ui/_shared/flint-chip-DuBHy1Oy
@getufy/flint-ui/_shared/flint-circular-progress-HbOZWpZr
@getufy/flint-ui/_shared/flint-collapsible-CfCNCU--
@getufy/flint-ui/_shared/flint-command-TzGmyTRc
@getufy/flint-ui/_shared/flint-container-Bcx8y6gs
@getufy/flint-ui/_shared/flint-copy-button-DJ7R4e4H
@getufy/flint-ui/_shared/flint-date-field-VaBkagWq
@getufy/flint-ui/_shared/flint-date-picker-DnP5zPwB
@getufy/flint-ui/_shared/flint-date-range-calendar-BHB17m-M
@getufy/flint-ui/_shared/flint-date-range-picker-BKHFjlAk
@getufy/flint-ui/_shared/flint-dialog-vUkrbBdl
@getufy/flint-ui/_shared/flint-divider-BXMOmFKp
@getufy/flint-ui/_shared/flint-drawer-Dsvw3spe
@getufy/flint-ui/_shared/flint-element-BzYCpzj3
@getufy/flint-ui/_shared/flint-empty-etB8JmFU
@getufy/flint-ui/_shared/flint-fab-D518ZxJC
@getufy/flint-ui/_shared/flint-form-field-CcIzKFvf
@getufy/flint-ui/_shared/flint-format-date-DwQnwMNT
@getufy/flint-ui/_shared/flint-format-number-BI1ZpuqE
@getufy/flint-ui/_shared/flint-grid-DRtg_oS7
@getufy/flint-ui/_shared/flint-hover-card-Dmw_ExwF
@getufy/flint-ui/_shared/flint-image-comparer-CShoZR91
@getufy/flint-ui/_shared/flint-image-list-Cy9hVMXj
@getufy/flint-ui/_shared/flint-image-list-item-bar-DMTyEx3F
@getufy/flint-ui/_shared/flint-image-list-item-rm944wxl
@getufy/flint-ui/_shared/flint-input-BGFsYd-4
@getufy/flint-ui/_shared/flint-input-otp-DQgDZISH
@getufy/flint-ui/_shared/flint-item-Bq2g7nwk
@getufy/flint-ui/_shared/flint-kbd-BlY1PDJ1
@getufy/flint-ui/_shared/flint-linear-progress-DiydVaBn
@getufy/flint-ui/_shared/flint-link-Czk1PLWw
@getufy/flint-ui/_shared/flint-list-C6-isBzM
@getufy/flint-ui/_shared/flint-menu-BCnjYE7N
@getufy/flint-ui/_shared/flint-menubar-6FVPNrSk
@getufy/flint-ui/_shared/flint-pagination-C8_gdMBh
@getufy/flint-ui/_shared/flint-paper-qOY-bJxe
@getufy/flint-ui/_shared/flint-radio-K17381lK
@getufy/flint-ui/_shared/flint-range-slider-BpqZ64wx
@getufy/flint-ui/_shared/flint-rating-Do7YRgaH
@getufy/flint-ui/_shared/flint-relative-time-DauC34RO
@getufy/flint-ui/_shared/flint-rich-tree-view-BVJwmcYf
@getufy/flint-ui/_shared/flint-scroll-area-BEBGw0dG
@getufy/flint-ui/_shared/flint-select-B2XEd4LY
@getufy/flint-ui/_shared/flint-simple-tree-view-Ccqy-SPc
@getufy/flint-ui/_shared/flint-single-input-date-range-field-CjhgMNul
@getufy/flint-ui/_shared/flint-skeleton-Kv0hdZt0
@getufy/flint-ui/_shared/flint-slider-26iKWQbz
@getufy/flint-ui/_shared/flint-snackbar-BhQPeUZh
@getufy/flint-ui/_shared/flint-sonner-CGkNt6cs
@getufy/flint-ui/_shared/flint-speed-dial-1NbPwXoQ
@getufy/flint-ui/_shared/flint-stack-UeFAo49s
@getufy/flint-ui/_shared/flint-stepper-BlzP8xow
@getufy/flint-ui/_shared/flint-switch-Bmh-eBqz
@getufy/flint-ui/_shared/flint-table-B9NphI_x
@getufy/flint-ui/_shared/flint-table-pagination-Bn1iBCZf
@getufy/flint-ui/_shared/flint-table-sort-label-DnnPzG58
@getufy/flint-ui/_shared/flint-tabs-BWFgJj06
@getufy/flint-ui/_shared/flint-text-field-DsBC9m3X
@getufy/flint-ui/_shared/flint-textarea-B1IbGKbt
@getufy/flint-ui/_shared/flint-time-picker-B_Gnf5Qh
@getufy/flint-ui/_shared/flint-toggle-button-group-BndUDBgq
@getufy/flint-ui/_shared/flint-toggle-button.component-D_bsb-K9
@getufy/flint-ui/_shared/flint-toggle-o7X9zQGv
@getufy/flint-ui/_shared/flint-tooltip-6l5mWL2I
@getufy/flint-ui/_shared/flint-transfer-list-D96R76Dg
@getufy/flint-ui/_shared/flint-tree-item-DAag8ocB
@getufy/flint-ui/_shared/flint-typography-AcVEUdxO
@getufy/flint-ui/_shared/flint-visually-hidden-DkkDnezt
@getufy/flint-ui/_shared/form-associated-BYEE-r5o
@getufy/flint-ui/_shared/localize-CfOfVbCK
@getufy/flint-ui/accordion/flint-accordion
@getufy/flint-ui/accordion/flint-accordion.component
@getufy/flint-ui/alert/flint-alert
@getufy/flint-ui/alert/flint-alert.component
@getufy/flint-ui/app-bar/flint-app-bar
@getufy/flint-ui/app-bar/flint-app-bar.component
@getufy/flint-ui/autocomplete/flint-autocomplete
@getufy/flint-ui/autocomplete/flint-autocomplete.component
@getufy/flint-ui/autoloader
@getufy/flint-ui/avatar/flint-avatar
@getufy/flint-ui/avatar/flint-avatar.component
@getufy/flint-ui/backdrop/flint-backdrop
@getufy/flint-ui/backdrop/flint-backdrop.component
@getufy/flint-ui/badge/flint-badge
@getufy/flint-ui/badge/flint-badge.component
@getufy/flint-ui/bottom-navigation/flint-bottom-navigation
@getufy/flint-ui/bottom-navigation/flint-bottom-navigation-action
@getufy/flint-ui/bottom-navigation/flint-bottom-navigation-action.component
@getufy/flint-ui/bottom-navigation/flint-bottom-navigation.component
@getufy/flint-ui/box/flint-box
@getufy/flint-ui/box/flint-box.component
@getufy/flint-ui/breadcrumbs/flint-breadcrumbs
@getufy/flint-ui/breadcrumbs/flint-breadcrumbs.component
@getufy/flint-ui/button/flint-button
@getufy/flint-ui/button/flint-button-group
@getufy/flint-ui/button/flint-button-group.component
@getufy/flint-ui/button/flint-button.component
@getufy/flint-ui/button/flint-toggle-button
@getufy/flint-ui/button/flint-toggle-button-group
@getufy/flint-ui/button/flint-toggle-button-group.component
@getufy/flint-ui/button/flint-toggle-button.component
@getufy/flint-ui/card/flint-card
@getufy/flint-ui/card/flint-card-action-area
@getufy/flint-ui/card/flint-card-action-area.component
@getufy/flint-ui/card/flint-card-actions
@getufy/flint-ui/card/flint-card-actions.component
@getufy/flint-ui/card/flint-card-content
@getufy/flint-ui/card/flint-card-content.component
@getufy/flint-ui/card/flint-card-header
@getufy/flint-ui/card/flint-card-header.component
@getufy/flint-ui/card/flint-card-media
@getufy/flint-ui/card/flint-card-media.component
@getufy/flint-ui/card/flint-card.component
@getufy/flint-ui/carousel/flint-carousel
@getufy/flint-ui/carousel/flint-carousel.component
@getufy/flint-ui/checkbox/flint-checkbox
@getufy/flint-ui/checkbox/flint-checkbox.component
@getufy/flint-ui/chip/flint-chip
@getufy/flint-ui/chip/flint-chip.component
@getufy/flint-ui/collapsible/flint-collapsible
@getufy/flint-ui/collapsible/flint-collapsible.component
@getufy/flint-ui/command/flint-command
@getufy/flint-ui/command/flint-command.component
@getufy/flint-ui/container/flint-container
@getufy/flint-ui/container/flint-container.component
@getufy/flint-ui/controllers/form-control
@getufy/flint-ui/copy-button/flint-copy-button
@getufy/flint-ui/copy-button/flint-copy-button.component
@getufy/flint-ui/date-field/flint-date-field
@getufy/flint-ui/date-field/flint-date-field.component
@getufy/flint-ui/date-picker/flint-date-picker
@getufy/flint-ui/date-picker/flint-date-picker.component
@getufy/flint-ui/date-range-picker/date-range-helpers
@getufy/flint-ui/date-range-picker/flint-date-range-calendar
@getufy/flint-ui/date-range-picker/flint-date-range-calendar.component
@getufy/flint-ui/date-range-picker/flint-date-range-picker
@getufy/flint-ui/date-range-picker/flint-date-range-picker.component
@getufy/flint-ui/date-range-picker/flint-single-input-date-range-field
@getufy/flint-ui/date-range-picker/flint-single-input-date-range-field.component
@getufy/flint-ui/dialog/flint-dialog
@getufy/flint-ui/dialog/flint-dialog.component
@getufy/flint-ui/divider/flint-divider
@getufy/flint-ui/divider/flint-divider.component
@getufy/flint-ui/drawer/flint-drawer
@getufy/flint-ui/drawer/flint-drawer.component
@getufy/flint-ui/empty/flint-empty
@getufy/flint-ui/empty/flint-empty.component
@getufy/flint-ui/fab/flint-fab
@getufy/flint-ui/fab/flint-fab.component
@getufy/flint-ui/flint-element
@getufy/flint-ui/flint-range-slider/flint-range-slider
@getufy/flint-ui/flint-range-slider/flint-range-slider.component
@getufy/flint-ui/form-field/flint-form-field
@getufy/flint-ui/form-field/flint-form-field.component
@getufy/flint-ui/format-date/flint-format-date
@getufy/flint-ui/format-date/flint-format-date.component
@getufy/flint-ui/format-number/flint-format-number
@getufy/flint-ui/format-number/flint-format-number.component
@getufy/flint-ui/grid/flint-grid
@getufy/flint-ui/grid/flint-grid.component
@getufy/flint-ui/hover-card/flint-hover-card
@getufy/flint-ui/hover-card/flint-hover-card.component
@getufy/flint-ui/image-comparer/flint-image-comparer
@getufy/flint-ui/image-comparer/flint-image-comparer.component
@getufy/flint-ui/image-list/flint-image-list
@getufy/flint-ui/image-list/flint-image-list-item
@getufy/flint-ui/image-list/flint-image-list-item-bar
@getufy/flint-ui/image-list/flint-image-list-item-bar.component
@getufy/flint-ui/image-list/flint-image-list-item.component
@getufy/flint-ui/image-list/flint-image-list.component
@getufy/flint-ui/index
@getufy/flint-ui/input-otp/flint-input-otp
@getufy/flint-ui/input-otp/flint-input-otp.component
@getufy/flint-ui/input/flint-input
@getufy/flint-ui/input/flint-input.component
@getufy/flint-ui/item/flint-item
@getufy/flint-ui/item/flint-item.component
@getufy/flint-ui/kbd/flint-kbd
@getufy/flint-ui/kbd/flint-kbd.component
@getufy/flint-ui/link/flint-link
@getufy/flint-ui/link/flint-link.component
@getufy/flint-ui/list/flint-list
@getufy/flint-ui/list/flint-list.component
@getufy/flint-ui/menu/flint-menu
@getufy/flint-ui/menu/flint-menu.component
@getufy/flint-ui/menubar/flint-menubar
@getufy/flint-ui/menubar/flint-menubar.component
@getufy/flint-ui/mixins/form-associated
@getufy/flint-ui/navigation-menu/flint-navigation-menu
@getufy/flint-ui/navigation-menu/flint-navigation-menu-content
@getufy/flint-ui/navigation-menu/flint-navigation-menu-content.component
@getufy/flint-ui/navigation-menu/flint-navigation-menu-item
@getufy/flint-ui/navigation-menu/flint-navigation-menu-item.component
@getufy/flint-ui/navigation-menu/flint-navigation-menu-link
@getufy/flint-ui/navigation-menu/flint-navigation-menu-link.component
@getufy/flint-ui/navigation-menu/flint-navigation-menu-list
@getufy/flint-ui/navigation-menu/flint-navigation-menu-list.component
@getufy/flint-ui/navigation-menu/flint-navigation-menu-trigger
@getufy/flint-ui/navigation-menu/flint-navigation-menu-trigger.component
@getufy/flint-ui/navigation-menu/flint-navigation-menu.component
@getufy/flint-ui/pagination/flint-pagination
@getufy/flint-ui/pagination/flint-pagination.component
@getufy/flint-ui/paper/flint-paper
@getufy/flint-ui/paper/flint-paper.component
@getufy/flint-ui/progress/flint-circular-progress
@getufy/flint-ui/progress/flint-circular-progress.component
@getufy/flint-ui/progress/flint-linear-progress
@getufy/flint-ui/progress/flint-linear-progress.component
@getufy/flint-ui/radio/flint-radio
@getufy/flint-ui/radio/flint-radio.component
@getufy/flint-ui/rating/flint-rating
@getufy/flint-ui/rating/flint-rating.component
@getufy/flint-ui/relative-time/flint-relative-time
@getufy/flint-ui/relative-time/flint-relative-time.component
@getufy/flint-ui/resizable/flint-resizable
@getufy/flint-ui/resizable/flint-resizable.component
@getufy/flint-ui/scroll-area/flint-scroll-area
@getufy/flint-ui/scroll-area/flint-scroll-area.component
@getufy/flint-ui/select/flint-select
@getufy/flint-ui/select/flint-select.component
@getufy/flint-ui/skeleton/flint-skeleton
@getufy/flint-ui/skeleton/flint-skeleton.component
@getufy/flint-ui/slider/flint-slider
@getufy/flint-ui/slider/flint-slider.component
@getufy/flint-ui/snackbar/flint-snackbar
@getufy/flint-ui/snackbar/flint-snackbar.component
@getufy/flint-ui/sonner/flint-sonner
@getufy/flint-ui/sonner/flint-sonner.component
@getufy/flint-ui/speed-dial/flint-speed-dial
@getufy/flint-ui/speed-dial/flint-speed-dial.component
@getufy/flint-ui/split-panel/flint-split-panel
@getufy/flint-ui/split-panel/flint-split-panel.component
@getufy/flint-ui/stack/flint-stack
@getufy/flint-ui/stack/flint-stack.component
@getufy/flint-ui/stepper/flint-stepper
@getufy/flint-ui/stepper/flint-stepper.component
@getufy/flint-ui/suppress-warnings
@getufy/flint-ui/switch/flint-switch
@getufy/flint-ui/switch/flint-switch.component
@getufy/flint-ui/table/flint-table
@getufy/flint-ui/table/flint-table-pagination
@getufy/flint-ui/table/flint-table-pagination.component
@getufy/flint-ui/table/flint-table-sort-label
@getufy/flint-ui/table/flint-table-sort-label.component
@getufy/flint-ui/table/flint-table.component
@getufy/flint-ui/tabs/flint-tabs
@getufy/flint-ui/tabs/flint-tabs.component
@getufy/flint-ui/test-utils/axe
@getufy/flint-ui/text-field/flint-text-field
@getufy/flint-ui/text-field/flint-text-field.component
@getufy/flint-ui/textarea/flint-textarea
@getufy/flint-ui/textarea/flint-textarea.component
@getufy/flint-ui/theme-amber.css
@getufy/flint-ui/theme-dark.css
@getufy/flint-ui/theme-emerald.css
@getufy/flint-ui/theme-rose.css
@getufy/flint-ui/theme-slate.css
@getufy/flint-ui/theme-teal.css
@getufy/flint-ui/theme-violet.css
@getufy/flint-ui/theme.css
@getufy/flint-ui/time-picker/flint-time-picker
@getufy/flint-ui/time-picker/flint-time-picker.component
@getufy/flint-ui/toggle/flint-toggle
@getufy/flint-ui/toggle/flint-toggle.component
@getufy/flint-ui/tooltip/flint-tooltip
@getufy/flint-ui/tooltip/flint-tooltip.component
@getufy/flint-ui/transfer-list/flint-transfer-list
@getufy/flint-ui/transfer-list/flint-transfer-list.component
@getufy/flint-ui/translations/en
@getufy/flint-ui/tree-view/flint-rich-tree-view
@getufy/flint-ui/tree-view/flint-rich-tree-view.component
@getufy/flint-ui/tree-view/flint-simple-tree-view
@getufy/flint-ui/tree-view/flint-simple-tree-view.component
@getufy/flint-ui/tree-view/flint-tree-item
@getufy/flint-ui/tree-view/flint-tree-item.component
@getufy/flint-ui/typography/flint-typography
@getufy/flint-ui/typography/flint-typography.component
@getufy/flint-ui/utilities/animation-presets
@getufy/flint-ui/utilities/animation-registry
@getufy/flint-ui/utilities/form
@getufy/flint-ui/utilities/localize
@getufy/flint-ui/utilities/theme
@getufy/flint-ui/visually-hidden/flint-visually-hidden
@getufy/flint-ui/visually-hidden/flint-visually-hidden.component

Readme

@getufy/flint-ui

A modern, lightweight web component library built with Lit. 50+ components for building rich UIs — works with any framework.

Installation

npm install @getufy/flint-ui lit

Resources

Documentation — full component docs, guides, and examples
Live Storybook — interactive component playground
React wrappers — @getufy/flint-ui-react for React projects

Usage

<script type="module">
  import '@getufy/flint-ui/button/flint-button';
</script>

<flint-button variant="contained" color="primary">Click me</flint-button>

Or import the full bundle:

import { FlintButton, FlintTabs, FlintDialog } from '@getufy/flint-ui';

Tree-shakeable imports

import '@getufy/flint-ui/tabs/flint-tabs';
import '@getufy/flint-ui/dialog/flint-dialog';
import '@getufy/flint-ui/date-picker/flint-date-picker';

Components

Inputs: Button, Checkbox, Input, Radio, Rating, Select, Slider, Switch, Textarea, Toggle, Autocomplete, Input OTP, Date Picker, Date Range Picker, Time Picker, Transfer List

Data Display: Avatar, Badge, Chip, Divider, Item, List, Table, Tooltip, Typography, Kbd, Empty, Carousel

Feedback: Alert, Dialog, Progress, Skeleton, Snackbar, Sonner, Backdrop

Surfaces: Accordion, App Bar, Card, Paper

Navigation: Bottom Navigation, Breadcrumbs, Drawer, Link, Menu, Menubar, Navigation Menu, Pagination, Speed Dial, Stepper, Tabs

Layout: Box, Container, Grid, Stack, Image List, Split Panel, Resizable, Scroll Area

Utilities: Collapsible, Command, Copy Button, Hover Card, Image Comparer, Tree View, Relative Time, Format Date, Format Number, Visually Hidden

Theming

:root {
  --flint-primary-color: #3b82f6;
  --flint-text-color: #111827;
  --flint-font-family: system-ui, sans-serif;
}

import '@getufy/flint-ui/theme.css';       // Light theme
import '@getufy/flint-ui/theme-dark.css';   // Dark theme

React

Looking for React wrappers? See @getufy/flint-ui-react.

License

MIT