Layer UI 🍰

A modern, comprehensive, and free component library built with Radix UI and Tailwind CSS.

Layer UI provides 220+ components ranging from basic UI primitives to complex blocks like dashboards, marketing sections, and e-commerce grids. It features a unique "Ocean Blue" theme and includes special glassmorphism (Crystal) and neon (Modern) styles.

Features

• 🚀 220+ Components: Everything you need to build a modern web app.
• 🎨 Unique Design System: Fresh "Ocean Blue" theme with rounded aesthetics.
• 💎 Crystal & Modern Styles: Glassmorphism and Neon effects included.
• 🧱 Ready-to-use Blocks: Hero sections, Navbars, Dashboards, Blogs, and more.
• ♿ Accessible: Built on top of Radix UI primitives.
• 🌙 Dark Mode: Fully supported out of the box.
• 📄 TypeScript: Written in TypeScript for type safety.

Installation

You can install Layer UI via npm, yarn, or pnpm.

npm install layer-ui-kit tailwindcss-animate
# or
yarn add layer-ui-kit tailwindcss-animate
# or
pnpm add layer-ui-kit tailwindcss-animate

Setup (Important!)

1. Import Styles

Import the CSS in your root file (e.g., main.tsx, App.tsx, or layout.tsx):

import 'layer-ui-kit/dist/index.css'

2. Configure Tailwind

Add the library to your tailwind.config.js content array and the animation plugin:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{ts,tsx}", // Your project files
    "./node_modules/layer-ui-kit/dist/**/*.{js,mjs}" // Add this line!
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require("tailwindcss-animate") // Add this line!
  ],
}

Usage

Now you can import and use components:

import { Button, CrystalCard, HeroWithImage } from 'layer-ui-kit'

export default function App() {
  return (
    <div>
      <HeroWithImage />
      
      <div className="p-10 flex gap-4">
        <Button>Standard Button</Button>
        <CrystalCard>
          <h3 className="text-white font-bold">Glassmorphism Card</h3>
        </CrystalCard>
      </div>
    </div>
  )
}

Categories

Layer UI is organized into several categories:

1. UI Primitives: Button, Input, Dialog, Select, Switch, etc.
2. Extended: LoadingButton, PasswordInput, TagsInput, RatingInput.
3. Crystal: Glassmorphism components (CrystalCard, CrystalNavbar).
4. Modern: Neon and 3D effects (NeonButton, GradientText).
5. Blocks:
   • Hero Sections
   • Navigation & Footers
   • Forms (Login, Register, Settings)
   • Dashboard Elements (Stats, Sidebar)
   • Marketing (Pricing, Testimonials)
   • E-commerce (Product Grid, Cart)
   • Blog & Content

Customization

Layer UI uses CSS variables for theming. You can override them in your own CSS to change the brand colors:

:root {
  --primary: 262 83% 58%; /* Change to Purple */
  --radius: 0.5rem; /* Change border radius */
}

License

MIT