Skip to content

coss ui

coss ui gives React projects styled controls they can copy into their own code.

Visit coss ui

Where does a copied control live?

A copied dialog becomes a file in your React project. coss ui uses Base UI for underlying controls and Tailwind CSS v4 for styling. You can add the files with the documented command-line tool or copy them manually. For manual setup, bring across the listed packages and shared style values such as colors.

Who updates the control after you copy it?

The project is MIT-licensed. Keep the license notices with the code you reuse. Your edits live in your project. Compare the upstream version before bringing in a fix, and keep the installed packages the copied control imports on your update list.

Can someone close a fictional booking dialog without a mouse?

Draw a booking page with an Edit time button and a dialog that has a title and a Cancel button.

  1. Trace the keyboard route
    Mark where focus goes when the dialog opens, how Escape closes it and where focus returns.
  2. Separate behavior from styling
    Write down one style change and one interaction that should keep working after that change.