Package Exports

@getufy/flint-ui
@getufy/flint-ui/__benchmarks__/component-render.bench
@getufy/flint-ui/_shared/animation-presets-tID-R4dK
@getufy/flint-ui/_shared/decorate-B1hCE6tV
@getufy/flint-ui/_shared/flint-accordion-BkSRD3D1
@getufy/flint-ui/_shared/flint-alert-zlwPWTaj
@getufy/flint-ui/_shared/flint-app-bar-eIm8Wqxz
@getufy/flint-ui/_shared/flint-autocomplete-DNsbM7NF
@getufy/flint-ui/_shared/flint-avatar-CQYCLZ7Z
@getufy/flint-ui/_shared/flint-backdrop-CjB26im2
@getufy/flint-ui/_shared/flint-badge-DQSENaWH
@getufy/flint-ui/_shared/flint-bottom-navigation-BUDnGKEo
@getufy/flint-ui/_shared/flint-bottom-navigation-action-BPkN9jn_
@getufy/flint-ui/_shared/flint-box-rSpdpW4n
@getufy/flint-ui/_shared/flint-breadcrumbs-hizDBhQ4
@getufy/flint-ui/_shared/flint-button-CrQsTq4n
@getufy/flint-ui/_shared/flint-button-group-BYe22BPG
@getufy/flint-ui/_shared/flint-card-DhwvF8yo
@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-DPnUwbvs
@getufy/flint-ui/_shared/flint-checkbox-DoerdSS1
@getufy/flint-ui/_shared/flint-chip-Dik6SHEY
@getufy/flint-ui/_shared/flint-circular-progress-DR8Bu_1m
@getufy/flint-ui/_shared/flint-collapsible-B7NMoklo
@getufy/flint-ui/_shared/flint-command-C8x5z8EW
@getufy/flint-ui/_shared/flint-container-pv21bP4t
@getufy/flint-ui/_shared/flint-copy-button-B9Hg0hxD
@getufy/flint-ui/_shared/flint-date-field-CohIRvTr
@getufy/flint-ui/_shared/flint-date-picker-02rBa0fN
@getufy/flint-ui/_shared/flint-date-range-calendar-6FHXE9NX
@getufy/flint-ui/_shared/flint-date-range-picker-ClCgdSHB
@getufy/flint-ui/_shared/flint-dialog-CUy3wy9N
@getufy/flint-ui/_shared/flint-divider-yDT1_41t
@getufy/flint-ui/_shared/flint-drawer-_ywJc-Us
@getufy/flint-ui/_shared/flint-element-BzYCpzj3
@getufy/flint-ui/_shared/flint-empty-eUwRvYA5
@getufy/flint-ui/_shared/flint-fab-DV7LAM3y
@getufy/flint-ui/_shared/flint-form-field-MWkYFu3-
@getufy/flint-ui/_shared/flint-format-date-CGLtvlR9
@getufy/flint-ui/_shared/flint-format-number-Co5xWZeW
@getufy/flint-ui/_shared/flint-grid-C9jX_RCX
@getufy/flint-ui/_shared/flint-hover-card-PlCHKTKI
@getufy/flint-ui/_shared/flint-image-comparer-BOTfAFCU
@getufy/flint-ui/_shared/flint-image-list-item-aCdN2cfH
@getufy/flint-ui/_shared/flint-image-list-item-bar-Cz_nhy-Q
@getufy/flint-ui/_shared/flint-image-list-nDn32w3V
@getufy/flint-ui/_shared/flint-input-BGFsYd-4
@getufy/flint-ui/_shared/flint-input-otp-CfWQ-6K8
@getufy/flint-ui/_shared/flint-item-bOgsrhgp
@getufy/flint-ui/_shared/flint-kbd-DY030U0e
@getufy/flint-ui/_shared/flint-linear-progress-dgAMmfK4
@getufy/flint-ui/_shared/flint-link-DAJ5pjrD
@getufy/flint-ui/_shared/flint-list-BRsXZNpB
@getufy/flint-ui/_shared/flint-menu-Bi-YCOE9
@getufy/flint-ui/_shared/flint-menubar-CYI7yHTP
@getufy/flint-ui/_shared/flint-pagination-BjRJDnZl
@getufy/flint-ui/_shared/flint-paper-qOY-bJxe
@getufy/flint-ui/_shared/flint-radio-C1LY8WEN
@getufy/flint-ui/_shared/flint-range-slider-C_BtwoGh
@getufy/flint-ui/_shared/flint-rating-CI5WLDot
@getufy/flint-ui/_shared/flint-relative-time-BOE8avWn
@getufy/flint-ui/_shared/flint-rich-tree-view-I7B4-Oyq
@getufy/flint-ui/_shared/flint-scroll-area-DXsA23RE
@getufy/flint-ui/_shared/flint-select-JB_a5FNB
@getufy/flint-ui/_shared/flint-simple-tree-view-DGZf3GjA
@getufy/flint-ui/_shared/flint-single-input-date-range-field-DP2ZBxaI
@getufy/flint-ui/_shared/flint-skeleton-B4vjy5dh
@getufy/flint-ui/_shared/flint-slider-CdG-CThX
@getufy/flint-ui/_shared/flint-snackbar-y1c0XPdO
@getufy/flint-ui/_shared/flint-sonner-BFzmkymY
@getufy/flint-ui/_shared/flint-speed-dial-F-ZVZKmS
@getufy/flint-ui/_shared/flint-stack-CGuxfyHI
@getufy/flint-ui/_shared/flint-stepper-duOGZPDe
@getufy/flint-ui/_shared/flint-switch-C1V_lZB3
@getufy/flint-ui/_shared/flint-table-DKBqkAUX
@getufy/flint-ui/_shared/flint-table-pagination-DhL1xIhz
@getufy/flint-ui/_shared/flint-table-sort-label-CMcPUqFE
@getufy/flint-ui/_shared/flint-tabs-Djff9BVZ
@getufy/flint-ui/_shared/flint-text-field-DdeN9GCK
@getufy/flint-ui/_shared/flint-textarea-CGr7-vzn
@getufy/flint-ui/_shared/flint-time-picker-BJ-05NeH
@getufy/flint-ui/_shared/flint-toggle-D0nP3X0i
@getufy/flint-ui/_shared/flint-toggle-button-group-BzXyL8qC
@getufy/flint-ui/_shared/flint-toggle-button.component-BtY050MQ
@getufy/flint-ui/_shared/flint-tooltip-CyFLS9XG
@getufy/flint-ui/_shared/flint-transfer-list-pR_VSj-i
@getufy/flint-ui/_shared/flint-tree-item-DWGzNWpl
@getufy/flint-ui/_shared/flint-typography-8KSR4DLD
@getufy/flint-ui/_shared/flint-visually-hidden-vlPDMaa9
@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/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