Skip to main content
kaino.dev

Components, tools, and news for developers.

Explore

LibraryNews

Community

TwitterYouTubeInstagram

© 2026 Kaino.dev

Privacy PolicyTerms of Service

v0.1.0

kaino.dev
LibraryDiscoverNews
LibraryDiscoverNews
Theme
Library/Components

Components

Ready-to-use components curated and voted on by the community.

KainoKaino ComponentsExternalExternal Libraries

Browse by library

Library directory
All librariesAnimate UIAnt DesignArk UIBase UIChakra UIdaisyUIFlowbite ReactHeadless UIHeroUIMagic UIMantineMaterial UIMotion PrimitivesRadix PrimitivesReact AriaReact BitsReact-Bootstrapshadcn/ui

Categories

All 1254Backgrounds 105Buttons 93Cards 84Data-display 252Feedback 88Forms 280Loaders 38Modals 59Navigation 174Text-effects 81

External components · Browse by source

  • Label chips that collapse into a "+N more" summary with OverflowList when the row narrows. Mantine, Data-display, 0 votes, MIT licence
    data-display0

    Mantine Overflow List

    Label chips that collapse into a "+N more" summary with OverflowList when the row narrows.

    Mantinedata-displayinteractivemantineMIT
  • An invoice whose quantities, totals and tax rate are formatted with NumberFormatter. Mantine, Data-display, 0 votes, MIT licence
    data-display0

    Mantine Number Formatter

    An invoice whose quantities, totals and tax rate are formatted with NumberFormatter.

    Mantinedata-displayinteractivemantineMIT
  • A scrolling partner-logo strip with a pause control and hover pause. Mantine, Data-display, 0 votes, MIT licence
    data-display0

    Mantine Marquee

    A scrolling partner-logo strip with a pause control and hover pause.

    Mantinedata-displayinteractivemantineMIT
  • Meeting notes with action items highlighted by Mantine Mark in a chosen colour. Mantine, Data-display, 0 votes, MIT licence
    data-display0

    Mantine Mark

    Meeting notes with action items highlighted by Mantine Mark in a chosen colour.

    Mantinedata-displayinteractivemantineMIT
  • An ordered setup checklist and an unordered list with custom icons for done items. Mantine, Data-display, 0 votes, MIT licence
    data-display0

    Mantine List

    An ordered setup checklist and an unordered list with custom icons for done items.

    Mantinedata-displayinteractivelistMIT
  • A searchable keyboard shortcut sheet with key combinations rendered as Kbd. Mantine, Data-display, 0 votes, MIT licence
    data-display0

    Mantine Kbd

    A searchable keyboard shortcut sheet with key combinations rendered as Kbd.

    Mantinedata-displayinteractivekbdMIT
  • An inbox button with an unread-count indicator that hides when everything is read. Mantine, Data-display, 0 votes, MIT licence
    data-display0

    Mantine Indicator

    An inbox button with an unread-count indicator that hides when everything is read.

    Mantinedata-displayindicatorinteractiveMIT
  • A rounded image with a fallback, switching between cover and contain fit. Mantine, Data-display, 0 votes, MIT licence
    data-display0

    Mantine Image

    A rounded image with a fallback, switching between cover and contain fit.

    Mantinedata-displayimageinteractiveMIT
  • A comment author name that shows a profile hover card on hover or keyboard focus. Mantine, Data-display, 0 votes, MIT licence
    data-display0

    Mantine Hover Card

    A comment author name that shows a profile hover card on hover or keyboard focus.

    Mantinedata-displayhover-cardinteractiveMIT
  • Search results whose matching words are highlighted as you type. Mantine, Data-display, 0 votes, MIT licence
    data-display0

    Mantine Highlight

    Search results whose matching words are highlighted as you type.

    Mantinedata-displayhighlightinteractiveMIT
  • Dashboard tiles in a 12-column Grid with a wide featured column. Mantine, Data-display, 0 votes, MIT licence
    data-display0

    Mantine Grid

    Dashboard tiles in a 12-column Grid with a wide featured column.

    Mantinedata-displaygridinteractiveMIT
  • A header row laid out with Flex, switching direction and alignment. Mantine, Data-display, 0 votes, MIT licence
    data-display0

    Mantine Flex

    A header row laid out with Flex, switching direction and alignment.

    Mantinedata-displayflexinteractiveMIT
  • A sign-in card split by labelled horizontal dividers and a vertical divider. Mantine, Data-display, 0 votes, MIT licence
    data-display0

    Mantine Divider

    A sign-in card split by labelled horizontal dividers and a vertical divider.

    Mantinedata-displaydividerinteractiveMIT
  • An invoice summary in DataList with a divider option. Mantine, Data-display, 0 votes, MIT licence
    data-display0

    Mantine Data List

    An invoice summary in DataList with a divider option.

    Mantinedata-displaydata-listinteractiveMIT
  • Inline and block code samples with a language switcher for an install command. Mantine, Data-display, 0 votes, MIT licence
    data-display0

    Mantine Code

    Inline and block code samples with a language switcher for an install command.

    Mantinecodedata-displayinteractiveMIT
  • Customer quotes in a Mantine Blockquote with a citation and previous/next controls. Mantine, Data-display, 0 votes, MIT licence
    data-display0

    Mantine Blockquote

    Customer quotes in a Mantine Blockquote with a citation and previous/next controls.

    Mantineblockquotedata-displayinteractiveMIT
  • An overlapping attendee avatar group with initials colours and a join action. Mantine, Data-display, 0 votes, MIT licence
    data-display0

    Mantine Avatar

    An overlapping attendee avatar group with initials colours and a join action.

    Mantineavatardata-displayinteractiveMIT
  • A video placeholder kept at 16:9, 4:3 or 1:1 by AspectRatio. Mantine, Data-display, 0 votes, MIT licence
    data-display0

    Mantine Aspect Ratio

    A video placeholder kept at 16:9, 4:3 or 1:1 by AspectRatio.

    Mantineaspect-ratiodata-displayinteractiveMIT
  • A terminal that types an install command and reveals its output line by line, replayable. Magic UI, Data-display, 0 votes, MIT licence
    data-display0

    Magic UI Terminal

    A terminal that types an install command and reveals its output line by line, replayable.

    Magic UIcompiled-cssdata-displayinteractiveMIT
  • A spring-smoothed arrow cursor that tilts in the direction of travel across the preview. Magic UI, Data-display, 0 votes, MIT licence
    data-display0

    Magic UI Smooth Cursor

    A spring-smoothed arrow cursor that tilts in the direction of travel across the preview.

    Magic UIcompiled-cssdata-displayinteractiveMIT
  • A gradient reading-progress bar pinned to the top of a long article as the preview scrolls. Magic UI, Data-display, 0 votes, MIT licence
    data-display0

    Magic UI Scroll Progress

    A gradient reading-progress bar pinned to the top of a long article as the preview scrolls.

    Magic UIcompiled-cssdata-displayinteractiveMIT
  • A Safari browser mockup framing a local landing page, with an editable address. Magic UI, Data-display, 0 votes, MIT licence
    data-display0

    Magic UI Safari

    A Safari browser mockup framing a local landing page, with an editable address.

    Magic UIcompiled-cssdata-displayinteractiveMIT
  • A changelog panel whose top and bottom edges fade out under a progressive blur while scrolling. Magic UI, Data-display, 0 votes, MIT licence
    data-display0

    Magic UI Progressive Blur

    A changelog panel whose top and bottom edges fade out under a progressive blur while scrolling.

    Magic UIcompiled-cssdata-displayinteractiveMIT
  • A custom animated pointer that replaces the cursor inside a pricing card. Magic UI, Data-display, 0 votes, MIT licence
    data-display0

    Magic UI Pointer

    A custom animated pointer that replaces the cursor inside a pricing card.

    Magic UIcompiled-cssdata-displayinteractiveMIT
Previous

Page 5 of 11

Next