Granularity
⌘K
v0.41.0

@feugene/granularity

The core: everything an interface is assembled from — buttons, fields, tables, overlays. Zero runtime dependencies, and every component is importable by its own subpath.

version
0.41.0
Public subpaths
136
Components
77
Runtime dependencies
0

How the package describes itself on npm: Granularity design system package with Vue 3 components, consumed via the `@feugene/unocss-preset-granular` preset.

Installation

The command installs the package and its required peer dependencies: the library does not bring them, because your application already has them.

npm i @feugene/granularity @feugene/unocss-preset-granular @floating-ui/dom vue
pnpm add @feugene/granularity @feugene/unocss-preset-granular @floating-ui/dom vue
yarn add @feugene/granularity @feugene/unocss-preset-granular @floating-ui/dom vue
bun add @feugene/granularity @feugene/unocss-preset-granular @floating-ui/dom vue

Optional peer dependencies

Declared optional: they are needed only by the part of the package that uses them. Your package manager will not remind you about them.

  • @feugene/fint-i18n

What is inside

The manifest declares 136 entry points — importing through them is what keeps the bundle free of what you did not use.

No runtime dependencies: only the code of the package itself reaches your application.

Components

  • GrAlertShows an important message, warning or action status.
  • GrAutocompleteA combobox with type-ahead search over options, async loading and multi-select chips.
  • GrAvatarDisplays a user photo, or initials / a fallback when it is missing.
  • GrBadgeA short label for a status, category or counter.
  • GrBadgeWrapAdds a status or count badge on top of an element.
  • GrBottomNavBottom navigation for the key sections of a mobile interface.
  • GrBreadcrumbsShows where the user is and lets them step back up the path.
  • GrButtonTriggers the primary action in a form, dialog or panel.
  • GrButtonGroupGroups related buttons into a compact action cluster.
  • GrCardA container for a meaningful block of content and actions.
  • GrCheckboxLets you toggle independent options and select multiple items.
  • GrCheckboxGroupCollects checkboxes into one multi-select field with a shared model and states.
  • GrChipAn interactive tag: removable, selectable, with an icon. Where GrBadge only shows a status, a chip answers to a click.
  • GrChipGroupA set of chips sharing one value: list filters, record labels, a quick pick.
  • GrCollapseCollapses and expands additional content on demand.
  • GrColorPickerPicks a color for theme and branding settings: hue, saturation, lightness and opacity sliders, a hex field and a palette.
  • GrCommandPaletteOpens a ⌘K search over app commands with groups and shortcuts.
  • GrConfigProviderProvides global defaults (control size, per-component props, i18n) to nested components — imperative dialogs included.
  • GrConfirmDialogAsks to confirm a potentially important or dangerous action.
  • GrContextMenuBrings actions to the pointer: right-click a row, a tree node or a canvas.
  • GrDataTableA table for large data sets with sorting and filtering.
  • GrDeltaShows a signed value with its sign, tone and arrow inline in a sentence.
  • GrDescriptionListLists label-value pairs as a real description list, values aligned in a column.
  • GrDialogA dialog for confirmations, forms and focused scenarios.
  • GrDialogService
  • GrDividerSeparates content with a line, optionally with a centered label.
  • GrDrawerA sliding panel for secondary content and quick actions.
  • GrDropdownOpens a floating list of actions or options next to the trigger.
  • GrDropdownMenuA ready-made actions menu for a button, link or context invocation.
  • GrEmptyStateExplains an empty state and suggests the user’s next step.
  • GrFilePreviewShows a stored file as a tile: the image itself, or an icon for its type.
  • GrFileUploadAccepts files via selection or drag-and-drop and shows their state.
  • GrFormOrchestrates form validation via declarative rules and the GrFormField context.
  • GrFormFieldCombines label, control, hint and error into a single field.
  • GrFormFileBinds file uploads to a form field and validation.
  • GrFormSectionGroups related form fields into a clear, meaningful section.
  • GrIconRenders an icon as a standalone interface element.
  • GrImageViewerOpens an image in a convenient viewing and zooming mode.
  • GrInputA single-line field for text, search and short values.
  • GrInputTagLets you enter and edit a list of tags or values.
  • GrJsonViewerWalks an unknown value as a tree: collapsible nodes, search by key or value, copy a node with its path.
  • GrKbdDisplays a keyboard key or shortcut in a `<kbd>` element.
  • GrLinkA navigation link for moving between pages and resources.
  • GrListDisplays a vertical list of uniform items or actions.
  • GrLoadingIndicates that a section or action is currently loading.
  • GrModalA modal window for an important scenario that temporarily blocks the background.
  • GrNavbarTop navigation for the main sections and global actions.
  • GrNumberInputA number field with stepper controls and range constraints.
  • GrPaginationSplits a long list into pages and manages navigation between them.
  • GrPopoverAn anchored panel for a short form, settings or a confirmation right next to the trigger.
  • GrProgressBarShows the progress of a task or a loading process.
  • GrProgressCircleShows progress as a ring or a gauge, with the value in the middle.
  • GrPromptDialogRequests a short text input from the user in a dialog.
  • GrRadioA single choice within a group of mutually exclusive options.
  • GrRadioGroupCombines radio options into a single-choice selection flow.
  • GrRatingCollect and display a star rating, with half steps and a read-only mode.
  • GrResponseErrorBannerA universal generic banner for server or network response errors: it takes a raw error/response, runs it through a chain of parsers (HTTP statuses, Laravel/JSON:API/RFC 7807 validation, file/network/abort) and renders a title, main message, an optional list of per-field details and retry/dismiss actions — without knowing anything about a specific feature (file upload, forms, transactions).
  • GrSegmentedA compact single-choice control with a pills/button presentation and a moving selection indicator.
  • GrSelectSelection of one or several values from a list of options.
  • GrSidebarSide navigation for sections, filters and supporting actions.
  • GrSkeletonA temporary interface skeleton while the content is still loading.
  • GrSliderPick a number or a range by dragging a thumb, with steps, marks and keyboard support.
  • GrSortableListLet people reorder a list by dragging — or entirely from the keyboard, announced as they go.
  • GrSplitterSplits a layout into two resizable panels with a draggable divider.
  • GrStatisticHighlights a key metric with a caption, formatting and a trend line.
  • GrStepsShows where the user is in a multi-step process and can hold them back until the step checks out.
  • GrSwitchQuickly turns a binary setting on and off.
  • GrTabPanelsRenders tab panels linked to `GrTabs` by ARIA for accessible tabs.
  • GrTableA simple table for compact display of structured data.
  • GrTabsSwitches between related content sections without leaving the page.
  • GrTextareaA multi-line field for long text and comments.
  • GrTimelineShows a chronological feed of events with an axis, markers and day headings.
  • GrToasterShows brief pop-up notifications about the result of actions.
  • GrTooltipShows a short hint on hover or focus.
  • GrTreeShows a hierarchy of items with node expansion and selection.
  • GrTreeSelectSelection of a value from a tree structure in a single control.
  • GrValueA quantity with its affixes: prefix, value, suffix — and nothing else.

Package documentation

Written in the library repository. The portal links to it rather than retelling it.

The npm pageSources in the repositoryChangelogThe licence, one for the whole family