# Kokonut UI

> 100+ modern UI components built with Tailwind CSS, shadcn/ui, and Motion.

- Owner: [Kokonut Baffier](https://21st.dev/@kokonutd)
- Components: 49
- Website: https://kokonutui.com/
- GitHub: https://github.com/kokonut-labs/kokonutui
- Live page: https://21st.dev/@kokonutd/library/kokonut-ui

## Components

All 49 of them:

- [Action Search Bar](https://21st.dev/@kokonutd/components/action-search-bar.md)
- [Activity Card](https://21st.dev/@kokonutd/components/activity-card.md)
- [AI Input](https://21st.dev/@kokonutd/components/ai-input.md)
- [AI Input With File](https://21st.dev/@kokonutd/components/ai-input-with-file.md)
- [AI Input With Loading](https://21st.dev/@kokonutd/components/ai-input-with-loading.md)
- [AI Input With Search](https://21st.dev/@kokonutd/components/ai-input-with-search.md)
- [AI Input with Suggestions](https://21st.dev/@kokonutd/components/ai-input-with-suggestions.md)
- [AI Voice Input](https://21st.dev/@kokonutd/components/ai-voice-input.md)
- [Animated AI Input](https://21st.dev/@kokonutd/components/animated-ai-input.md)
- [Apple Activity Ring](https://21st.dev/@kokonutd/components/apple-activity-ring.md)
- [Avatar Picker](https://21st.dev/@kokonutd/components/avatar-picker.md)
- [Background Circles](https://21st.dev/@kokonutd/components/background-circles.md)
- [Background Paths](https://21st.dev/@kokonutd/components/background-paths.md)
- [Beams Background](https://21st.dev/@kokonutd/components/beams-background.md)
- [Bento Grid](https://21st.dev/@kokonutd/components/bento-grid.md)
- [Button Colorful with Hover Effect](https://21st.dev/@kokonutd/components/button-colorful.md)
- [Button Shiny](https://21st.dev/@kokonutd/components/button-shiny.md)
- [Chat Card](https://21st.dev/@kokonutd/components/chat-card.md)
- [Color Input](https://21st.dev/@kokonutd/components/color-input.md)
- [Creative Pricing](https://21st.dev/@kokonutd/components/creative-pricing.md)
- [FAQ](https://21st.dev/@kokonutd/components/faq.md)
- [FAQ with Categories](https://21st.dev/@kokonutd/components/faq-with-categories.md)
- [Hand Writing Text](https://21st.dev/@kokonutd/components/hand-writing-text.md)
- [Hold and Release Button](https://21st.dev/@kokonutd/components/hold-and-release-button.md)
- [Input](https://21st.dev/@kokonutd/components/input.md)
- [Interactive Checkout](https://21st.dev/@kokonutd/components/interactive-checkout.md)
- [Magnetize Button](https://21st.dev/@kokonutd/components/magnetize-button.md)
- [Matrix Text](https://21st.dev/@kokonutd/components/matrix-text.md)
- [Minimalist Hero Fashion](https://21st.dev/@kokonutd/components/hero-fashion.md)
- [Modal Pricing](https://21st.dev/@kokonutd/components/modal-pricing.md)
- [Numeric Input](https://21st.dev/@kokonutd/components/numeric-input.md)
- [Particle Button](https://21st.dev/@kokonutd/components/particle-button.md)
- [Password Input](https://21st.dev/@kokonutd/components/password-input.md)
- [Pricing Cards](https://21st.dev/@kokonutd/components/pricing-cards.md)
- [Pricing Section](https://21st.dev/@kokonutd/components/pricing-section.md)
- [Pricing Table](https://21st.dev/@kokonutd/components/pricing-table.md)
- [Profile Dropdown](https://21st.dev/@kokonutd/components/profile-dropdown.md)
- [Shape Landing Hero](https://21st.dev/@kokonutd/components/shape-landing-hero.md)
- [Social Card](https://21st.dev/@kokonutd/components/social-card.md)
- [Tag Input](https://21st.dev/@kokonutd/components/tag-input.md)
- [Team Invitation](https://21st.dev/@kokonutd/components/team-invitation.md)
- [Text Rewind](https://21st.dev/@kokonutd/components/text-rewind.md)
- [Toolbar](https://21st.dev/@kokonutd/components/toolbar.md)
- [useAutoResizeTextarea](https://21st.dev/@kokonutd/components/use-auto-resize-textarea.md)
- [useFileInput](https://21st.dev/@kokonutd/components/use-file-input.md)
- [useTags](https://21st.dev/@kokonutd/components/use-tags.md)
- [v0 AI Chat](https://21st.dev/@kokonutd/components/v0-ai-chat.md)
- [Wave Text](https://21st.dev/@kokonutd/components/wave-text.md)
- [X Gradient Card](https://21st.dev/@kokonutd/components/x-gradient-card.md)

Full component directory: https://21st.dev/llms.txt