DOCSEARCHbyAlgolia
Submit Docs

Konsta UI Documentation

repository·master·Indexed 26 days ago

https://github.com/konstaui/konsta

A library of pixel-perfect mobile UI components built with Tailwind CSS for React, Vue, and Svelte. It provides high-fidelity iOS and Material Design styles for mobile-first web applications. Version 5.3.0 includes comprehensive color utilities for Material Design, including HCT color space manipulation, CAM16 color instances, and dynamic color generation via ColorSpecDelegateImpl2021 and ColorSpecDelegateImpl2025.

Tokens
5.9K
Snippets
7
Records
59
Agent score
87%

What's inside Konsta UI

  5. Use Konsta UI Vue components

    master

    Konsta UI provides a comprehensive set of Vue components for building mobile-style interfaces. You can import components using either their prefixed names (e.g., kButton) or their PascalCase aliases (e.g., Button).

    Available Components

    Layout & Containers

    • App (kApp): The root application component.
    • Page (kPage): A container for page content.
    • Navbar (kNavbar): Navigation bar.
    • NavbarBackLink (kNavbarBackLink): Back link for navigation bars.
    • Tabbar (kTabbar): Tab bar for navigation.
    • TabbarLink (kTabbarLink): Individual tab links.
    • Panel (kPanel): Side panels.
    • Sheet (kSheet): Bottom sheets.
    • Toolbar (kToolbar): Bottom or top toolbars.
    • ToolbarPane (kToolbarPane): Panes within a toolbar.
    • Block (kBlock): Content blocks with header, footer, and title.
    • Card (kCard): Card containers.
    • Glass (kGlass): Glassmorphism effect container.

    Navigation & Selection

    • Breadcrumbs (kBreadcrumbs): Breadcrumb navigation.
    • BreadcrumbsItem (kBreadcrumbsItem): Individual breadcrumb items.
    • BreadcrumbsSeparator (kBreadcrumbsSeparator): Separator for breadcrumbs.
    • BreadcrumbsCollapsed (kBreadcrumbsCollapsed): Collapsed breadcrumb state.
    • Segmented (kSegmented): Segmented control.
    • SegmentedButton (kSegmentedButton): Individual buttons within a segmented control.
    • Stepper (kStepper): Stepper component.

    Lists & Menus

    • List (kList): List container.
    • ListGroup (kListGroup): Grouping for list items.
    • ListItem (kListItem): Individual list items.
    • ListButton (kListButton): Clickable list items.
    • ListInput (kListInput): Input fields within a list.
    • MenuList (kMenuList): Menu list container.
    • MenuListItem (kMenuListItem): Individual menu items.
    • Actions (kActions): Actions container.
    • ActionsGroup (kActionsGroup): Grouping for action buttons.
    • ActionsButton (kActionsButton): Individual action buttons.
    • ActionsLabel (kActionsLabel): Label for actions.

    Data Display & Feedback

    • Badge (kBadge): Status badges.
    • Chip (kChip): Chip components.
    • Icon (kIcon): Icon component.
    • Table (kTable): Table container.
    • TableHead (kTableHead): Table header.
    • TableBody (kTableBody): Table body.
    • TableRow (kTableRow): Individual table rows.
    • TableCell (kTableCell): Individual table cells.
    • Preloader (kPreloader): Loading indicator.
    • Progressbar (kProgressbar): Progress bar.
    • Notification (kNotification): Notification component.
    • Toast (kToast): Toast messages.

    Form Elements

    • Button (kButton): Standard buttons.
    • Link (kLink): Text links.
    • Checkbox (kCheckbox): Checkbox inputs.
    • Radio (kRadio): Radio button inputs.
    • Toggle (kToggle): Switch/Toggle inputs.
    • Range (kRange): Range slider inputs.
    • Searchbar (kSearchbar): Search input bar.

    Overlays & Dialogs

    • Dialog (kDialog): Modal dialogs.
    • DialogButton (kDialogButton): Buttons within a dialog.
    • Popover (kPopover): Popover overlays.
    • Popup (kPopup): Popup overlays.
    • Messages (kMessages): Message list container.
    • MessagesTitle (kMessagesTitle): Title for message lists.
    • Message (kMessage): Individual message bubble.
    • Messagebar (kMessagebar): Input bar for messages.

    Utilities

    • Provider (kProvider): Context provider for theme and configuration.
    • useTheme: Hook to access theme information.
    • useThemeClasses: Hook to access theme-specific CSS classes.

  6. Run the React Kitchen Sink

    master
    To run the Kitchen Sink (a comprehensive component showcase) in a development environment, use the react npm script. This will build the development version of the Konsta UI React package before running the showcase.

  10. Translate HCT colors to different viewing conditions

    master

    Use the inViewingConditions(vc) method to calculate how a color will appear under different lighting or environmental settings. This method uses the CAM16 color appearance model to account for color relativity (how colors change appearance based on surroundings and lighting).

    Pass a ViewingConditions object (created via ViewingConditions.make()) to the method to receive a new Hct instance representing the color in those conditions.