JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 63
  • Score
    100M100P100Q82131F
  • License MIT

A Lit-based web component library with 75+ accessible, themeable UI components

Package Exports

  • @getufy/flint-ui
  • @getufy/flint-ui/__benchmarks__/component-render.bench
  • @getufy/flint-ui/_shared/decorate-DPS9PT8d
  • @getufy/flint-ui/_shared/flint-accordion-C1ZeUTPt
  • @getufy/flint-ui/_shared/flint-alert-XVhCfLTJ
  • @getufy/flint-ui/_shared/flint-app-bar-CNbq6ggt
  • @getufy/flint-ui/_shared/flint-autocomplete-B1tLM8lN
  • @getufy/flint-ui/_shared/flint-avatar-DSQJv4gX
  • @getufy/flint-ui/_shared/flint-backdrop-B28XJbZN
  • @getufy/flint-ui/_shared/flint-badge-AzmcBWUq
  • @getufy/flint-ui/_shared/flint-bottom-navigation-_0CMIMiw
  • @getufy/flint-ui/_shared/flint-bottom-navigation-action-CW0ZUZlF
  • @getufy/flint-ui/_shared/flint-box-TbPTowiO
  • @getufy/flint-ui/_shared/flint-breadcrumbs-DjFiMWIj
  • @getufy/flint-ui/_shared/flint-button-DwrmFg7O
  • @getufy/flint-ui/_shared/flint-button-group-CdwiDTLI
  • @getufy/flint-ui/_shared/flint-card-C-j6SYxM
  • @getufy/flint-ui/_shared/flint-card-action-area-07Emwi1d
  • @getufy/flint-ui/_shared/flint-card-actions-C74ZbYNI
  • @getufy/flint-ui/_shared/flint-card-content-C3Gv3Ps5
  • @getufy/flint-ui/_shared/flint-card-header-HxL5TlBx
  • @getufy/flint-ui/_shared/flint-card-media-B1U9TYsC
  • @getufy/flint-ui/_shared/flint-carousel-jwZ5C4e_
  • @getufy/flint-ui/_shared/flint-checkbox-GnuZq0Yy
  • @getufy/flint-ui/_shared/flint-chip-CBKDllYk
  • @getufy/flint-ui/_shared/flint-circular-progress-CuR8VdqI
  • @getufy/flint-ui/_shared/flint-collapsible-BJ4LwGpz
  • @getufy/flint-ui/_shared/flint-command-BuXwceg_
  • @getufy/flint-ui/_shared/flint-container-CYSq758Y
  • @getufy/flint-ui/_shared/flint-copy-button-Y4yVbPxo
  • @getufy/flint-ui/_shared/flint-date-field-lcBa5fNS
  • @getufy/flint-ui/_shared/flint-date-picker-C_7LYa9d
  • @getufy/flint-ui/_shared/flint-date-range-calendar-BPBdO9n3
  • @getufy/flint-ui/_shared/flint-date-range-picker-D7Ehbx-c
  • @getufy/flint-ui/_shared/flint-dialog-kIyxDuO7
  • @getufy/flint-ui/_shared/flint-divider-Boj8Ggbt
  • @getufy/flint-ui/_shared/flint-drawer-jR9Z3p_w
  • @getufy/flint-ui/_shared/flint-empty-Bq8DuJQT
  • @getufy/flint-ui/_shared/flint-fab-D8nKcAan
  • @getufy/flint-ui/_shared/flint-format-date-_jfKYO_2
  • @getufy/flint-ui/_shared/flint-format-number-g8MkggyM
  • @getufy/flint-ui/_shared/flint-grid-ClCXGz3k
  • @getufy/flint-ui/_shared/flint-hover-card-BTdefGOR
  • @getufy/flint-ui/_shared/flint-image-comparer-DDF_wCjc
  • @getufy/flint-ui/_shared/flint-image-list-CS-XDM0T
  • @getufy/flint-ui/_shared/flint-image-list-item-CE1j29Ay
  • @getufy/flint-ui/_shared/flint-image-list-item-bar-BZfSoVrZ
  • @getufy/flint-ui/_shared/flint-input-CuVd-L9A
  • @getufy/flint-ui/_shared/flint-input-otp-__geY8N4
  • @getufy/flint-ui/_shared/flint-item-XvdemneV
  • @getufy/flint-ui/_shared/flint-kbd-DXSl3YcK
  • @getufy/flint-ui/_shared/flint-linear-progress-B4sGgZrk
  • @getufy/flint-ui/_shared/flint-link-CnzR1CYQ
  • @getufy/flint-ui/_shared/flint-list-DJCPEDre
  • @getufy/flint-ui/_shared/flint-menu-rsxjVen9
  • @getufy/flint-ui/_shared/flint-menubar-C1Q_-F8q
  • @getufy/flint-ui/_shared/flint-pagination-D-KNsfjM
  • @getufy/flint-ui/_shared/flint-paper-CArGvvRa
  • @getufy/flint-ui/_shared/flint-radio-B_C3wNRn
  • @getufy/flint-ui/_shared/flint-range-slider-IfXMtey2
  • @getufy/flint-ui/_shared/flint-rating-CqUGdPR_
  • @getufy/flint-ui/_shared/flint-relative-time-BFh5nQqz
  • @getufy/flint-ui/_shared/flint-rich-tree-view-D1Cmqb3L
  • @getufy/flint-ui/_shared/flint-scroll-area-Dn9yT7ZU
  • @getufy/flint-ui/_shared/flint-select-Bhc3BR09
  • @getufy/flint-ui/_shared/flint-simple-tree-view-DD3zHLzJ
  • @getufy/flint-ui/_shared/flint-single-input-date-range-field-CnKdZow6
  • @getufy/flint-ui/_shared/flint-skeleton-CWFa-PkE
  • @getufy/flint-ui/_shared/flint-slider-CVb_rYPp
  • @getufy/flint-ui/_shared/flint-snackbar-D8-hpqLp
  • @getufy/flint-ui/_shared/flint-sonner-DD_qGTfm
  • @getufy/flint-ui/_shared/flint-speed-dial-DYU66D0P
  • @getufy/flint-ui/_shared/flint-stack-GAeGPdLR
  • @getufy/flint-ui/_shared/flint-stepper-Dh0ZOPQc
  • @getufy/flint-ui/_shared/flint-switch-DN7VI9jT
  • @getufy/flint-ui/_shared/flint-table-DQ--YqEC
  • @getufy/flint-ui/_shared/flint-table-pagination-BrJ56t-r
  • @getufy/flint-ui/_shared/flint-table-sort-label-C4mkQmDM
  • @getufy/flint-ui/_shared/flint-tabs-Do8hU-DT
  • @getufy/flint-ui/_shared/flint-text-field--jqYDj7o
  • @getufy/flint-ui/_shared/flint-textarea-D15Eq154
  • @getufy/flint-ui/_shared/flint-time-picker-DNj-mTOW
  • @getufy/flint-ui/_shared/flint-toggle-DTT9i3J2
  • @getufy/flint-ui/_shared/flint-toggle-button-GmL4rbZa
  • @getufy/flint-ui/_shared/flint-toggle-button-group-Bb9ysTf-
  • @getufy/flint-ui/_shared/flint-tooltip-C9nJvtJi
  • @getufy/flint-ui/_shared/flint-transfer-list-DZsAcF0l
  • @getufy/flint-ui/_shared/flint-tree-item-iMT216uo
  • @getufy/flint-ui/_shared/flint-typography-D0vqF15X
  • @getufy/flint-ui/_shared/flint-visually-hidden-CqgpY__B
  • @getufy/flint-ui/_shared/form-associated-EGIhyHHt
  • @getufy/flint-ui/accordion/flint-accordion
  • @getufy/flint-ui/alert/flint-alert
  • @getufy/flint-ui/app-bar/flint-app-bar
  • @getufy/flint-ui/autocomplete/flint-autocomplete
  • @getufy/flint-ui/avatar/flint-avatar
  • @getufy/flint-ui/backdrop/flint-backdrop
  • @getufy/flint-ui/badge/flint-badge
  • @getufy/flint-ui/bottom-navigation/flint-bottom-navigation
  • @getufy/flint-ui/bottom-navigation/flint-bottom-navigation-action
  • @getufy/flint-ui/box/flint-box
  • @getufy/flint-ui/breadcrumbs/flint-breadcrumbs
  • @getufy/flint-ui/button/flint-button
  • @getufy/flint-ui/button/flint-button-group
  • @getufy/flint-ui/button/flint-toggle-button
  • @getufy/flint-ui/button/flint-toggle-button-group
  • @getufy/flint-ui/card/flint-card
  • @getufy/flint-ui/card/flint-card-action-area
  • @getufy/flint-ui/card/flint-card-actions
  • @getufy/flint-ui/card/flint-card-content
  • @getufy/flint-ui/card/flint-card-header
  • @getufy/flint-ui/card/flint-card-media
  • @getufy/flint-ui/carousel/flint-carousel
  • @getufy/flint-ui/checkbox/flint-checkbox
  • @getufy/flint-ui/chip/flint-chip
  • @getufy/flint-ui/collapsible/flint-collapsible
  • @getufy/flint-ui/command/flint-command
  • @getufy/flint-ui/container/flint-container
  • @getufy/flint-ui/copy-button/flint-copy-button
  • @getufy/flint-ui/date-field/flint-date-field
  • @getufy/flint-ui/date-picker/flint-date-picker
  • @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-picker
  • @getufy/flint-ui/date-range-picker/flint-single-input-date-range-field
  • @getufy/flint-ui/dialog/flint-dialog
  • @getufy/flint-ui/divider/flint-divider
  • @getufy/flint-ui/drawer/flint-drawer
  • @getufy/flint-ui/empty/flint-empty
  • @getufy/flint-ui/fab/flint-fab
  • @getufy/flint-ui/flint-range-slider/flint-range-slider
  • @getufy/flint-ui/format-date/flint-format-date
  • @getufy/flint-ui/format-number/flint-format-number
  • @getufy/flint-ui/grid/flint-grid
  • @getufy/flint-ui/hover-card/flint-hover-card
  • @getufy/flint-ui/image-comparer/flint-image-comparer
  • @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/index
  • @getufy/flint-ui/input-otp/flint-input-otp
  • @getufy/flint-ui/input/flint-input
  • @getufy/flint-ui/item/flint-item
  • @getufy/flint-ui/kbd/flint-kbd
  • @getufy/flint-ui/link/flint-link
  • @getufy/flint-ui/list/flint-list
  • @getufy/flint-ui/menu/flint-menu
  • @getufy/flint-ui/menubar/flint-menubar
  • @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-item
  • @getufy/flint-ui/navigation-menu/flint-navigation-menu-link
  • @getufy/flint-ui/navigation-menu/flint-navigation-menu-list
  • @getufy/flint-ui/navigation-menu/flint-navigation-menu-trigger
  • @getufy/flint-ui/pagination/flint-pagination
  • @getufy/flint-ui/paper/flint-paper
  • @getufy/flint-ui/progress/flint-circular-progress
  • @getufy/flint-ui/progress/flint-linear-progress
  • @getufy/flint-ui/radio/flint-radio
  • @getufy/flint-ui/rating/flint-rating
  • @getufy/flint-ui/relative-time/flint-relative-time
  • @getufy/flint-ui/resizable/flint-resizable
  • @getufy/flint-ui/scroll-area/flint-scroll-area
  • @getufy/flint-ui/select/flint-select
  • @getufy/flint-ui/skeleton/flint-skeleton
  • @getufy/flint-ui/slider/flint-slider
  • @getufy/flint-ui/snackbar/flint-snackbar
  • @getufy/flint-ui/sonner/flint-sonner
  • @getufy/flint-ui/speed-dial/flint-speed-dial
  • @getufy/flint-ui/split-panel/flint-split-panel
  • @getufy/flint-ui/stack/flint-stack
  • @getufy/flint-ui/stepper/flint-stepper
  • @getufy/flint-ui/suppress-warnings
  • @getufy/flint-ui/switch/flint-switch
  • @getufy/flint-ui/table/flint-table
  • @getufy/flint-ui/table/flint-table-pagination
  • @getufy/flint-ui/table/flint-table-sort-label
  • @getufy/flint-ui/tabs/flint-tabs
  • @getufy/flint-ui/text-field/flint-text-field
  • @getufy/flint-ui/textarea/flint-textarea
  • @getufy/flint-ui/theme-dark.css
  • @getufy/flint-ui/theme.css
  • @getufy/flint-ui/time-picker/flint-time-picker
  • @getufy/flint-ui/toggle/flint-toggle
  • @getufy/flint-ui/tooltip/flint-tooltip
  • @getufy/flint-ui/transfer-list/flint-transfer-list
  • @getufy/flint-ui/tree-view/flint-rich-tree-view
  • @getufy/flint-ui/tree-view/flint-simple-tree-view
  • @getufy/flint-ui/tree-view/flint-tree-item
  • @getufy/flint-ui/typography/flint-typography
  • @getufy/flint-ui/visually-hidden/flint-visually-hidden

Readme

@getufy/flint-ui

npm license

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

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