Introduction

Hip UI is a design system for building modern web applications. It provides a set of components and tokens that help you build your application quickly and efficiently with a consistent design system.

Hip UI itself is not a library that you install, rather it is a ready made design system that you copy directly into your project (like shadcn/ui). This gives you as much or as little control as you need to build your application. You can use the components and tokens as is, or you can customize them to your liking.

The main difference between Hip UI and shadcn/ui is that Hip UI is built on two different technologies:

Beyond that we've taken extra care to include all the component you might need to render full applications. Whether thats navbars, footer, or page layouts, Hip UI has you covered.

To get started with hip you can either install all the components at once:

pnpm dlx hip-ui install --all

Or add a few core building blocks one by one. In this situation it makes sense to install hip-ui as a dev dependency so as you install components they come from the same version of the library.

pnpm dlx hip-ui install theme
pnpm dlx hip-ui install flex
pnpm dlx hip-ui install typography
pnpm dlx hip-ui install button

The docs are organized into the following categories:

• Foundations - The tokens that are use to build the design system and style your UI
• Components - All the available components in Hip UI, organized by category

Here is a list of some site that use Hip UI:

• Hip UI Website - The docs you're reading right now!
• kich.io - A tool managing your kitchen.