Charles UI

A personal Next.js component library styled with Tailwind CSS and distributed via the shadcn registry

1: Install shadcn/ui.

2: Copy the command below and run it in your terminal to add the component to your project.

Simple Accordion

Loading component...

Run the command below to install this component in your project.
npx shadcn add https://charlesui.vercel.app/r/Accordion.json
Open in v0

DatePicker

Loading component...

Run the command below to install this component in your project.
npx shadcn add https://charlesui.vercel.app/r/Date-Picker.json
Open in v0

Simple Product Card

Loading component...

Run the command below to install this component in your project.
npx shadcn add https://charlesui.vercel.app/r/ProductCard.json
Open in v0

Section Divider

Loading component...

Run the command below to install this component in your project.
npx shadcn add https://charlesui.vercel.app/r/SectionDivider.json
Open in v0

Navbar

Loading component...

Run the command below to install this component in your project.
npx shadcn add https://charlesui.vercel.app/r/Navbar.json
Open in v0

Dark/Light Mode Switch

Loading component...

Run the command below to install this component in your project.
npx shadcn add https://charlesui.vercel.app/r/DarkLightSwitch.json
Open in v0

Simple Toggle Switch

Loading component...

Run the command below to install this component in your project.
npx shadcn add https://charlesui.vercel.app/r/ToggleSwitch.json
Open in v0

This is just the beginning — more components coming soon!