Atelier UI®

Read the docsGithub
Docs 0.7.0
  • Browse Catalog
  • Installation
  • How to contribute
  • Code of conduct

Components (17)

  • Dither Flow
    pro
  • Glowing Fog
    pro
  • Halftone Glow
    pro
  • Fluid Distortion
    new
  • Image Trail
    new
  • Liquid Touch
    new
  • Magnetic Dot Grid
    new
  • Pixel Trail
    new
  • Pixelated Text
    new
  • Simple Scramble
    new
  • Text Bounce
    new
  • Text Roll
    new
  • Elastic Stick
    pro
  • Infinite Gallery
    new
  • Infinite Parallax
    new
  • Infinite Zoom
    new
  • Scattered Scroll
    new
Atelier UI 0.7.0 ©2026
Star on githubBuy me a coffee
  1. Docs
  2. /
  3. Getting Started
  4. /
  5. Installation

Installation

How to start using Atelier UI, not much.

Your license key

Needed to install pro component — see instructions below.

Sign in to view your license key.
1

Setup Tailwind CSS

This library uses Tailwind CSS v4. If your project doesn't have it, follow the Tailwind CSS installation guide to get started.

2

License usage (optional)

Purchasing a license creates an account with access to the source code of pro components and lets you install them via the CLI.

Simply create or update your .env file in your project root and add your license key:

.env.local
ATELIER_PRO_KEY=your-license-key
3

Installation

Find a component you like and choose whether to copy and paste the code directly into your project or install it via the CLI:

CLI example
npx atelier-ui add fluid-distortion
  • Setup Tailwind CSS
  • License usage (optional)
  • Installation
Star on githubBuy me a coffee