Quick Start

Install Winnie CSS and start styling your next application in minutes.

Winnie CSS is a collection of CSS primitives designed to help style applications in any framework. Whether you use plain old CSS, Tailwind, or any variety of CSS-in-JS, Winnie CSS provides the primitive styles you need to build the best experience for your users.

Installation

Install Winnie CSS

The simplest way to get up and running with Winnie CSS in any app is to start by installing Winnie CSS with the package manager of your choice. We will use npm, but yarn and pnpm also work as well.

npm install @winnie-ui/css

Import the Style Sheet

Once you have Winnie CSS installed, you can then import the stylesheet in the root of your application.

@import "@winnie-ui/css";

If you want to reduce your css bundle size, you can import just the css you need and nothing more. We recommend you at least import the layers and then go from there. Each specific variable page outlines what needs to be imported in order to have access to the variables.

@import "@winnie-ui/css/layer";

Configure your Theme

Now, with Winnie CSS installed and imported, it’s time to configure your theme. Winnie CSS allows you to choose the accent color, scale and border radius of your app.

export default function Root() {
  return (
    <html>
      <head>...</head>
      <body
        class="winnie-ui"
        data-accent-color="purple"
        data-scale="100%"
        data-radius="md"
        data-theme="light"
      >
        <App />
      </body>
    </html>
  );
}

To see how these different attributes affect the look and feel of an application, play around with the theme selector located in the top left. Everything in this documentation is built 100% with Winnie CSS.

Acknowledgements

Winnie wouldn’t be where it is today without the work done by other projects in the community including Radix Themes, Open Props and Tailwind CSS

Whats Next

Congrats! You are now ready to start working with Winnie CSS in your project. If you are a lover of Tailwind CSS, we got you. Head over to Working with Tailwind, to learn more about how you can use Winnie CSS with Tailwind v4.

Accent Color

Precision crafted colors that personalize your application.

Layers

Control the cascade of Winnie CSS with layers.

Radius

Adjust the feeling of your application is by changing the radius of corners.

Scaling

Change the density of your application.