Getting Started

Build modern responsive UIs with atomic design principles and developer-first tooling.

1. Installation

CDN


                        <link href="https://cdn.styles.css/v2/styles.css" 
                              rel="stylesheet">

Use our production-ready CDN for fast, global delivery.

npm


                        npm install --save styles.css

Install via package manager for build-time tooling integration.

GitHub


                        git clone https://github.com/StylesCSS/atomic.git

Clone the repository for full source control and customization.

Custom Build?

Use our customization tool to select only the components you need.

Customize Build

2. Usage

Buttons


                        <button class="px-4 py-2 bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-lg">
                          Primary Action
                        </button>

Responsive Grid

Column 1

Column 2

Column 3


                        <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
                          Column elements
                        </div>

Explore More Examples

Browse our full component library with code examples for every possible variation.

View All Components

3. Advanced

Theming

Create custom themes with our built-in config file system. Override colors, fonts, and spacing values globally.


                        [theme]
                        colors.brand = "#6366f1"
                        colors.accent = "#1abc9c"

Customization

Use the customization builder to only include components you need, reducing bundle size by up to 70%.


                        npx styles build --components=buttons,forms

Ready to Build?

Start your project with Styles.css today - thousands of developers are already building with it.

Start Building →