Skip to content
Nakshora logoNakshoraDocs
v3.1
v1.0same pagev2.0same pagev3.0same pagev3.1you are here
GH
  • Nakshora 3.1 home
Getting Started 11
Getting Started
  • Installing Nakshora 3.1
  • Introduction to Nakshora 3.1
  • Quick start
  • The Nakshora Playground
  • Why Nakshora 3.1?
  • Your first Nakshora 3.1 project, start to finish
Installation
  • Install Nakshora 3.1 with bun
  • Install Nakshora 3.1 with npm
  • Install Nakshora 3.1 with pnpm
  • Install Nakshora 3.1 with yarn
  • Use Nakshora 3.1 via CDN
  • All 11 in Getting Started →
Core Concepts 9
Core Concepts
  • Anatomy of a class
  • CSS custom properties
  • Dark mode strategies
  • Design tokens
  • Full mode vs JIT mode
  • Mobile-first workflow
  • All 9 in Core Concepts →
Configuration 12
Configuration
  • Class prefixes
  • Configuring Nakshora 3.1
  • Content scanning
  • Core plugins list
  • CSS-first configuration
  • Extending vs overriding
  • All 12 in Configuration →
Utilities Reference 129
Utilities
  • Utilities reference
Utilities · Animations
  • Animations & keyframes utilities
  • Custom animations utilities
Utilities · Backgrounds
  • Background attachment utilities
  • Background clip utilities
  • Background color utilities
  • Background origin utilities
  • Background position utilities
  • Background repeat utilities
Utilities · Borders
  • Border color utilities
  • Border radius utilities
  • Border style utilities
  • Border width utilities
  • Divide (between children) utilities
  • Outline utilities
  • All 129 in Utilities Reference →
Colors 361
Colors
  • Background color
  • Border & divide color
  • Caret & accent
  • Color system
  • Gradient stops
  • Opacity modifiers
Colors · Palettes
  • Amber background colors
  • Amber border colors
  • Amber gradient colors
  • Amber palette
  • Amber text colors
  • Blue background colors
Colors · Shades
  • Amber 100
  • Amber 200
  • Amber 300
  • Amber 400
  • Amber 50
  • Amber 500
  • All 361 in Colors →
Variants 18
Variants
  • active:
  • Arbitrary variants
  • aria-* & data-*:
  • before: / after: / selection: / marker:
  • dark:
  • disabled: / checked: / required:
  • All 18 in Variants →
Responsive Design 15
Responsive
  • Breakpoint strategy
  • Container queries (@container)
  • Custom breakpoints
  • max-* variants
  • Responsive design
Responsive · Screens
  • The 2xl: screen (1536px)
  • The 3xl: screen (1920px)
  • The 4xl: screen (2560px)
  • The 5xl: screen (5000px)
  • The lg: screen (1024px)
  • The md: screen (768px)
  • All 15 in Responsive Design →
Design Components 7
Components
  • Brutalist (.brutalist-card, .brutalist-btn)
  • Design components
  • Glass (.glass, .glass-light, .glass-dark)
  • Helpers (.hover-lift, .gradient-*)
  • Minimalist (.minimalist-card, .minimalist-btn)
  • Neon (.neon-card, .neon-btn, .neon-glow, .neon-text)
  • All 7 in Design Components →
Themes 7
Themes
  • Brutalist theme
  • Creating a custom theme
  • Nature Inspired theme
  • Neon Cyber theme
  • Pastel Dream theme
  • Themes & presets
  • All 7 in Themes →
Recipes 93
Recipes
  • 404 page
  • Activity feed
  • Announcement bar
  • Author box
  • Avatar group
  • Badge set
  • All 93 in Recipes →
Layout Patterns 17
Layout patterns
  • Layout patterns
Layout Patterns
  • Container-Adaptive Widget pattern
  • Sticky Two-Column pattern
  • The App Shell pattern
  • The Bento Grid pattern
  • The Card Grid pattern
  • The Centered Hero pattern
  • All 17 in Layout Patterns →
Tutorials 21
Tutorials
  • Tutorials
Tutorials · Build a Blog
  • Article typography
  • Post cards & listing
Tutorials · Build a SaaS Landing Page
  • FAQ, final CTA & footer
  • Features grid
  • Pricing table
  • The hero
  • The navbar
  • Wireframe in utilities
Tutorials · Build an Admin Dashboard
  • Forms & modals
  • Stat cards
  • The app shell
  • The data table
  • All 21 in Tutorials →
Cookbook 190
Cookbook
  • 16:9 video embeds
  • 404 page
  • Activity feed
  • Adaptive header logo
  • Anchorable headings
  • Animated counters slot
  • All 190 in Cookbook →
Integrations 25
Frameworks
  • Alpine.js + Nakshora 3.1
  • Angular + Nakshora 3.1
  • HTMX + Nakshora 3.1
  • Preact + Nakshora 3.1
  • React + Nakshora 3.1
  • SolidJS + Nakshora 3.1
Integrations
  • Astro + Nakshora 3.1
  • CDN + Nakshora 3.1
  • CLI (no bundler) + Nakshora 3.1
  • esbuild + Nakshora 3.1
  • Integrations
  • Laravel + Nakshora 3.1
  • All 25 in Integrations →
Editors 7
Editors
  • Editor integrations
  • Helix + Nakshora 3.1
  • JetBrains IDEs + Nakshora 3.1
  • Neovim + Nakshora 3.1
  • Sublime Text + Nakshora 3.1
  • VS Code + Nakshora 3.1
  • All 7 in Editors →
CLI 9
CLI
  • nakshora build
  • nakshora dev
  • nakshora doctor
  • nakshora export:ai
  • nakshora init
  • nakshora inspect
  • All 9 in CLI →
JavaScript API 2
JavaScript API
  • JavaScript API
  • Theme resolution order
  • All 2 in JavaScript API →
Performance 1
Performance
  • Performance
  • All 1 in Performance →
Accessibility 13
Accessibility
  • Accessibility
  • Accessibility audit checklist
  • Accessible forms
  • Accessible images
  • Accessible tables
  • Color contrast
  • All 13 in Accessibility →
Design Guides 19
Design guides
  • Design guides
Design Guides
  • Accessibility-driven design
  • Brand systems for developers
  • Brutalist design
  • Color theory for interfaces
  • Content-first design
  • Design tokens in practice
  • All 19 in Design Guides →
Blueprints 12
Blueprints
  • Agency landing page blueprint
  • Creative portfolio landing page blueprint
  • E-commerce landing page blueprint
  • Education / course landing page blueprint
  • Healthcare landing page blueprint
  • Non-profit landing page blueprint
Industry blueprints
  • Industry blueprints
  • All 12 in Blueprints →
FAQ 89
FAQ
  • Are class names stable across versions?
  • Can designers use Nakshora?
  • Can I contribute?
  • Can I customize the theme?
  • Can I disable parts of the framework?
  • Can I extend the spacing scale?
  • All 89 in FAQ →
Troubleshooting 26
Troubleshooting
  • Fix: @apply throws on a variant class
  • Fix: Arbitrary value with spaces breaks
  • Fix: Build is slow
  • Fix: Colors look wrong after upgrade
  • Fix: Container queries have no effect
  • Fix: CSS is huge in production
  • All 26 in Troubleshooting →
Comparisons 31
Comparisons
  • aspect-ratio vs padding-top hack
  • CDN vs compiled CSS
  • Class vs media dark mode
  • Comparisons
  • Component classes vs pure utilities
  • Design tokens vs hard-coded values
  • All 31 in Comparisons →
Class Spotlight 206
Class spotlight
  • Class spotlight
Class Spotlight
  • -translate-y-1
  • absolute
  • accent-blue-600
  • active:scale-95
  • animate-pulse
  • animate-spin
Era Spotlight
  • container in Nakshora 3.1
  • flex in Nakshora 3.1
  • gap-4 in Nakshora 3.1
  • grid in Nakshora 3.1
  • h-screen in Nakshora 3.1
  • hidden in Nakshora 3.1
  • All 206 in Class Spotlight →
Glossary 701
Glossary
  • 301
  • 302
  • 308
  • A11y
  • Above the fold
  • Above-the-fold CTA
  • All 701 in Glossary →
Teams & Ops 7
Teams & Operations
  • Design system governance
  • Onboarding developers to utility-first
  • Performance budgets
  • Reviewing utility markup
  • Support & escalation
  • Versioning policy for teams
  • All 7 in Teams & Ops →
Deployment 5
Deployment
  • Cloudflare Pages
  • GitHub Pages
  • Netlify
  • S3 + CloudFront
  • Vercel
  • All 5 in Deployment →
AI & LLMs 1
AI & LLMs
  • Nakshora for AI & LLMs
  • All 1 in AI & LLMs →
Releases & Migration 6
Migration
  • Migrating from Nakshora 3.0 to 3.1
  • Migrating from Nakshora v1 to v3
  • Migrating from Nakshora v2 to v3
  • Migrating from Tailwind CSS to Nakshora
Releases
  • License & attribution
  • What's new in Nakshora 3.1
  • All 6 in Releases & Migration →
Docs/ Nakshora 3.1/ Cookbook/ Cookbook — Nakshora 3.1

Cookbook — Nakshora 3.1

CookbookNakshora 3.1Updated 2026-09-151 tags

Cookbook for Nakshora 3.1: one problem, one solution.

Cookbook — Nakshora 3.1 — Nakshora Docs
Cookbook · Nakshora Docs editorial library

Cookbook — One problem, one solution. Browse the collection below.

Popular entries#

center divsticky footerglass cardresponsive tablegradient textskeleton loading
💡
Tip. Everything here is version-aware: examples use the classes available in the docs version you are reading.
#cookbook
← PreviousContextual banner — Nakshora 3.1 CookbookNext →Cookie banner — Nakshora 3.1 Cookbook

Related pages

  • Feature matrix with icons — Nakshora 3.1 Cookbook
  • Widget dashboard grid — Nakshora 3.1 Cookbook
  • Settings toggles list — Nakshora 3.1 Cookbook
  • Mobile TOC dropdown — Nakshora 3.1 Cookbook
  • Auto-fit card grid — Nakshora 3.1 Cookbook
  • Responsive text columns — Nakshora 3.1 Cookbook
On this page
  • Popular entries

Versions

Nakshora Nakshora 3.1 — latestNakshora Nakshora 3.0Nakshora Nakshora 2.0Nakshora Nakshora 1.0 All versions

Platform

Features About Nakshora llms.txt humans.txt Sitemap

Framework

nakshora.bsdc.info.bd Playground npm · @nakshora/core GitHub repository

RRC Development

Rizwan Rahim Chowdhury RRC Development rrc.bsdc.info.bd License · MIT
© 2024–2026 Rizwan Rahim Chowdhury · RRC Development · নক্ষত্র Nakshora Docs — 9,399 articles · zero-runtime · MIT