Getting started

1. 1

   Set up coss ui

   devl builds on coss ui (Base UI and Tailwind CSS v4). Add it to your project once:

   npx shadcn@latest init @coss/style

2. 2

   Add a piece

   Every item page has its install command. It copies one file into your components folder, with the coss ui parts it needs:

   npx shadcn@latest add https://devl.dev/r/liquid-slider.json

3. 3

   Use it

   Import the named export and render it. Every prop has a typed default, so it works straight away; pass your own data when you're ready.

   app/page.tsx

   import { LiquidSlider } from "@/components/liquid-slider";
   
   export default function Page() {
     return <LiquidSlider />;
   }

Shorter installs with a namespace

Add devl to the registries in your components.json and you can install by name, search with npx shadcn search @devl, and browse devl from shadcn's own MCP server.

{
  "registries": {
    "@devl": "https://devl.dev/r/{name}.json"
  }
}

npx shadcn@latest add @devl/liquid-slider

With your AI editor

Connect the devl MCP server so your agent can search devl and read any piece's source, and install the agent skill so it knows how to use what it finds. Every item page also has a Copy prompt button, and llms.txt lists the whole catalogue in one file.

Without shadcn

Every piece's source is at https://devl.dev/raw/<slug>.tsx. Save it as components/<slug>.tsx, install the npm packages its page lists, and add the coss ui components it imports from coss.com/ui.