07 - Frontend Components
Onborda Demo - Next.js Onboarding Flow!
onborda.devA modern onboarding flow for Next.js applications!
Editor | JSON For You | The best online JSON tool
json4u.comOnline JSON view, format, minify, validate and compare. It also provides graph view to preview JSON data, semantic comparing two JSON diffs, convert JSON to CSV or CSV to JSON and support jq online.Nyxb UI
nyxbui.designBeautiful UI components and templates to make your landing page look stunning.
10000+ Themes for shadcn/ui
ui.jln.devExplore 10000+ themes for shadcn/ui and easily copy them into your project. Or just create your own theme from scratch!Onborda Demo - Next.js Onboarding Flow!
onborda.devA modern onboarding flow for Next.js applications!birobirobiro/awesome-shadcn-ui: A curated list of awesome things related to shadcn/ui.
github.comA curated list of awesome things related to shadcn/ui. - birobirobiro/awesome-shadcn-ui
inlang Marketplace - The ecosystem to go global
inlang.comQuickly find the best solution to globalize (i18n) your app. inlang helps you to expand to new markets and acquire new customers.
windstatic.
windstatic.comA set of elements & layouts made with Tailwind CSS and Alpine.js.runic.design
runic.design
Calendar - Bits UI
bits-ui.comHeadless components for Svelte.
Open Props: sub-atomic styles
open-props.styleOpen source CSS custom properties to help accelerate adaptive and consistent design. Available from a CDN or NPM, as CSS or Javascript.
Installation • Tremor Raw
raw.tremor.soCustomizable, accessible React components to build dashboards and modern web applications.
Tools for designers & frontend developers – By the MagicPattern toolbox
magicpattern.designUseful tools to speed up your daily workflow. Design and code your projects with beautiful background patterns.
React Scheduler
scheduler.bitnoise.pl
Lab
julienthibeaut.xyzExperimental UI elements and components. Mostly built with React and Tailwind CSS.
Variant Vault - A collection of Framer Motion variants for your next project.
variantvault.chrisabdo.devVariant Vault is a collection of Framer Motion variants for your next project. All free to use and open source.
Tremor
tremor.soThe open-source library for dashboards built on top of Tailwind CSS.
Logspot - Opensource changelog template
logspot.vercel.appLogspot is an open source change log template made with Nuxt, Vue, and Tailwindcss.daminort/reservation-grid: A modular grid that allows managing reservations for a hotel
github.com
Notion Avatar Maker
notion-avatar.vercel.appAn online tool for making notion-style avatars.
rodz/input-otp
input-otp.rodz.devOne-time password input component for React. Accessible. Unstyled. Customizable. Open Source. Build your own OTP form effortlessly.Variant Vault - A collection of Framer Motion variants for your next project.
variantvault.chrisabdo.devVariant Vault is a collection of Framer Motion variants for your next project. All free to use and open source.
UI Colorgen
ui-colorgen.vercel.appAn ui colorgen application built to help you with color setup in shadcn/ui.
Shadcn UI — Veryfront Libraries
veryfront.comRapid web app build and deploy for professional developers.Themes
shadcn-ui-customizer.vercel.appHand-picked themes that you can copy and paste into your apps.
Date Range Picker for shadcn
date-range-picker-for-shadcn-demo.vercel.appAdvanced Date Selection Component built for shadcn with multi-month views, text entry, preset ranges, and date comparisons. Ideal for applications like dashboards, analytics reports or booking systems.Plan Your Work
planner-tau-two.vercel.appA simple calendar app to help you plan your work.
Edil Ozi
edilozi.proOpen Source components for React.js that you can seamlessly integrate into your projects
The Powerful Conversational AI JavaScript Library | NLUX
docs.nlkit.comNLUX is an open-source, zero dependency JavaScript and React library for rapidly building conversational AI interfaces. Integrate with ChatGPT and other LLMs. Highly customizable and configurable. Get outstanding NLU performance and usability with a focus on simplicity. Build chatbots, voice assistants, knowledge bases, and AI frontends in minutes with NLUX.
SortableList - cult/ui
cult-ui.comAn animated sortable list
App
interactionmagic.coLibrary of micro interactions to use in your Framer projects.
Tailwind CSS Color Generator | UI Colors
uicolors.appGenerate, edit, save and share Tailwind CSS color shades based on a given hexcode or HSL color.
svgl
svgl.vercel.appA beautiful library with SVG logos
Paranoid (@irsyadadl) / irsyad.co
paranoid.irsyad.coA library of beautifully crafted react icons, perfect for enhancing the visual appeal and user experience of your web applications.
Avatar generator playground - Boring Avatars
boringavatars.comBoring avatars is a tiny JavaScript React library that generates custom, SVG-based, round avatars from any username and color palette.
Next.js video embedding with next-video
next-video.devNext Video solves the hard problems with embedding, storing, streaming, and customizing video in your Next.js app.
Tailwind CSS Bento Box | Cards
tailwindcomponents.com'Modern bento box built with Tailus UI'
Image-editor | TOAST UI :: Make Your Web Delicious!
ui.toast.comWith the UI that is the perfect combination of simple and beautiful, the Image Editor is a Full-Featured one that is perfect for everyday use.
Geist Font — Vercel
vercel.comGeist is a typeface made for developers and designers, embodying Vercel's design principles of simplicity, minimalism, and speed, drawing inspiration from the renowned Swiss design movement.
Tailwind Timeline Component — Tailwind CSS Components ( version 4 update is here )
daisyui.comTailwind Timeline examples: Timeline component shows a list of events in chronological order. component
Nextra – Next.js Static Site Generator – Nextra
nextra.siteMake beautiful websites with Next.js & MDX.
Node-Based UIs in React – React Flow
reactflow.devHighly customizable React library for workflow builders, no-code apps, image processing, visualizers, and more
Contentlayer makes content easy for developers
contentlayer.devContentlayer is a content SDK that validates and transforms your content into type-safe JSON data you can easily import into your application.
Animations on the web
animations.devA course that teaches you how to craft animations that make people feel something.
Grayscales
grayscal.esBeutiful and clean grayscales to use in your projects.