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

  • An invoices table with a caption, totals footer and a sortable amount column. shadcn/ui, Data-display, 0 votes, MIT licence
    data-display0

    shadcn/ui Table

    An invoices table with a caption, totals footer and a sortable amount column.

    shadcn/uicompiled-cssdata-displayinteractiveMIT
  • A profile header split by horizontal and vertical separators. shadcn/ui, Data-display, 0 votes, MIT licence
    data-display0

    shadcn/ui Separator

    A profile header split by horizontal and vertical separators.

    shadcn/uicompiled-cssdata-displayinteractiveMIT
  • A tag list in a custom-scrollbar area and a horizontally scrolling row of release cards. shadcn/ui, Data-display, 0 votes, MIT licence
    data-display0

    shadcn/ui Scroll Area

    A tag list in a custom-scrollbar area and a horizontally scrolling row of release cards.

    shadcn/uicompiled-cssdata-displayinteractiveMIT
  • An editor layout of resizable panels built on react-resizable-panels, with a nested vertical split and drag handles. shadcn/ui, Data-display, 0 votes, MIT licence
    data-display0

    shadcn/ui Resizable

    An editor layout of resizable panels built on react-resizable-panels, with a nested vertical split and drag handles.

    shadcn/uicompiled-cssdata-displayinteractiveMIT
  • A keyboard shortcut sheet for an editor, with single keys and key groups. shadcn/ui, Data-display, 0 votes, MIT licence
    data-display0

    shadcn/ui Kbd

    A keyboard shortcut sheet for an editor, with single keys and key groups.

    shadcn/uicompiled-cssdata-displayinteractiveMIT
  • A list of integration items with media, descriptions and actions in default, outline and muted styles. shadcn/ui, Data-display, 0 votes, MIT licence
    data-display0

    shadcn/ui Item

    A list of integration items with media, descriptions and actions in default, outline and muted styles.

    shadcn/uicompiled-cssdata-displayinteractiveMIT
  • A direction provider that switches a checkout summary between left-to-right and right-to-left layout. shadcn/ui, Data-display, 0 votes, MIT licence
    data-display0

    shadcn/ui Direction

    A direction provider that switches a checkout summary between left-to-right and right-to-left layout.

    shadcn/uicompiled-cssdata-displaydirectionMIT
  • A themed chart container with tooltip and legend built on recharts, shown as bars or lines for five models, with a toggle for the 95th percentile series. shadcn/ui, Data-display, 0 votes, MIT licence
    data-display0

    shadcn/ui Chart

    A themed chart container with tooltip and legend built on recharts, shown as bars or lines for five models, with a toggle for the 95th percentile series.

    shadcn/uichartcompiled-cssdata-displayMIT
  • A product carousel built on Embla, with previous and next buttons and a slide counter. shadcn/ui, Data-display, 0 votes, MIT licence
    data-display0

    shadcn/ui Carousel

    A product carousel built on Embla, with previous and next buttons and a slide counter.

    shadcn/uicarouselcompiled-cssdata-displayMIT
  • Team avatars with images, initials fallbacks, a status badge and an overflow count. shadcn/ui, Data-display, 0 votes, MIT licence
    data-display0

    shadcn/ui Avatar

    Team avatars with images, initials fallbacks, a status badge and an overflow count.

    shadcn/uiavatarcompiled-cssdata-displayMIT
  • Message attachments in done, uploading and failed states, with a remove action on each. shadcn/ui, Data-display, 0 votes, MIT licence
    data-display0

    shadcn/ui Attachment

    Message attachments in done, uploading and failed states, with a remove action on each.

    shadcn/uiattachmentcompiled-cssdata-displayMIT
  • A media frame that keeps a chosen aspect ratio as the card resizes. shadcn/ui, Data-display, 0 votes, MIT licence
    data-display0

    shadcn/ui Aspect Ratio

    A media frame that keeps a chosen aspect ratio as the card resizes.

    shadcn/uiaspect-ratiocompiled-cssdata-displayMIT
  • A captioned project table with controlled local numeric/name sorting. React-Bootstrap, Data-display, 0 votes, MIT licence
    data-display0

    React-Bootstrap Table

    A captioned project table with controlled local numeric/name sorting.

    React-Bootstrapinteractivereact-bootstraptableMIT
  • A list of status cards laid out with Stack, switchable between vertical and horizontal. React-Bootstrap, Data-display, 0 votes, MIT licence
    data-display0

    React-Bootstrap Stack

    A list of status cards laid out with Stack, switchable between vertical and horizontal.

    React-Bootstrapdata-displayinteractivereact-bootstrapMIT
  • A video placeholder that keeps 1:1, 4:3, 16:9 or 21:9 proportions as you switch. React-Bootstrap, Data-display, 0 votes, MIT licence
    data-display0

    React-Bootstrap Ratio

    A video placeholder that keeps 1:1, 4:3, 16:9 or 21:9 proportions as you switch.

    React-Bootstrapdata-displayinteractiveratioMIT
  • A selectable folder list with counts and an unavailable item. React-Bootstrap, Data-display, 0 votes, MIT licence
    data-display0

    React-Bootstrap List Group

    A selectable folder list with counts and an unavailable item.

    React-Bootstrapinteractivelist-groupreact-bootstrapMIT
  • A profile photo shown as rounded, circle or thumbnail images, with inline image data. React-Bootstrap, Data-display, 0 votes, MIT licence
    data-display0

    React-Bootstrap Image

    A profile photo shown as rounded, circle or thumbnail images, with inline image data.

    React-Bootstrapdata-displayimageinteractiveMIT
  • Container, Row and Col laying out pricing columns with responsive widths and a fluid toggle. React-Bootstrap, Data-display, 0 votes, MIT licence
    data-display0

    React-Bootstrap Grid

    Container, Row and Col laying out pricing columns with responsive widths and a fluid toggle.

    React-Bootstrapdata-displaygridinteractiveMIT
  • A captioned figure gallery with previous and next buttons and inline images. React-Bootstrap, Data-display, 0 votes, MIT licence
    data-display0

    React-Bootstrap Figure

    A captioned figure gallery with previous and next buttons and inline images.

    React-Bootstrapdata-displayfigureinteractiveMIT
  • A manual carousel of feature slides with labelled controls, indicators and no autoplay. React-Bootstrap, Data-display, 0 votes, MIT licence
    data-display0

    React-Bootstrap Carousel

    A manual carousel of feature slides with labelled controls, indicators and no autoplay.

    React-Bootstrapcarouseldata-displayinteractiveMIT
  • A trail of emoji that follows the pointer inside a celebration panel. React Bits, Data-display, 0 votes, MIT + Commons Clause License Condition v1.0 licence
    data-display0

    React Bits Text Cursor

    A trail of emoji that follows the pointer inside a celebration panel.

    React Bitsanimationinteractivereact-bitsMIT + Commons Clause License Condition v1.0
  • An inbox whose rows swipe left to reveal Archive and Delete actions, with a full swipe deleting the row. React Bits, Data-display, 0 votes, MIT + Commons Clause License Condition v1.0 licence
    data-display0

    React Bits Swipe Row

    An inbox whose rows swipe left to reveal Archive and Delete actions, with a full swipe deleting the row.

    React Bitsanimationinteractivereact-bitsMIT + Commons Clause License Condition v1.0
  • A stack of draft documents you can drag into a shredder slot, or focus and press Delete, to cut them into falling strips, with a reset. React Bits, Data-display, 0 votes, MIT + Commons Clause License Condition v1.0 licence
    data-display0

    React Bits Shredder

    A stack of draft documents you can drag into a shredder slot, or focus and press Delete, to cut them into falling strips, with a reset.

    React Bitsanimationinteractivereact-bitsMIT + Commons Clause License Condition v1.0
  • Release cards that pin and stack with smooth scrolling as you scroll the panel. React Bits, Data-display, 0 votes, MIT + Commons Clause License Condition v1.0 licence
    data-display0

    React Bits Scroll Stack

    Release cards that pin and stack with smooth scrolling as you scroll the panel.

    React Bitsanimationinteractivereact-bitsMIT + Commons Clause License Condition v1.0

Page 1 of 11

Next