DocumentationDocumentationBlogBlogShowcaseShowcase
GitHubGitHub (opens in a new tab)DiscordDiscord (opens in a new tab)
  • Introduction
  • Installation
  • Theming
  • Playground
  • Brands
  • Figma
  • Frameworks
    • Create React App
    • React Native
    • Next.js (App Router)
    • Next.js (Pages Router)
    • Gatsby
  • Components
    • React Avatar component
    • React Badge component
    • React Button component
    • React Checkbox component
    • React Collapse component
    • React Drawer component
    • React Dropdown component
    • React Entity component
    • React Error component
    • React Fieldset component
    • React Footer component
    • React Grid component
    • React Highlight component
    • React Icon component
    • React Image component
    • React Input component
    • React Link component
    • React Menu component
    • React Modal component
    • React Note component
    • React Progress component
    • React Scroller component
    • React Select component
    • React Skeleton component
    • React Snippet component
    • React Spacer component
    • React Spinner component
    • React Switch component
    • React Tabs component
    • React Text component
    • React Textarea component
    • React Toast component
    • React Toggle component
    • React Tooltip component
  • Hooks
    • Accessing and managing themes in React and Kitchn
    • Controlling modal visibility in React
    • Copying text to clipboard in React with error handling
    • Creating and managing portals in React
    • Detecting outside clicks in React components
    • Detecting server vs. browser environments in React
    • Handling global clicks in React components
    • Handling keyboard events with custom key bindings in React
    • Handling viewport breakpoints in React for responsive design
    • Handling window resize events in React
    • Logging warnings with traceability in React
    • Managing checkbox state in React
    • Managing combobox state and visibility in React
    • Managing DOM element position and dimensions in React
    • Managing toast notifications in React
    • Media queries in React for responsive design
    • Observing DOM element changes in React
    • State management with mutable refs in React
    • Tracking previous state or prop values in React
  • API Reference (opens in a new tab)
  • Roadmap (opens in a new tab)
  • Contributing
  • Acknowledgements

On This Page

  • Rows
  • Columns
  • Flexboxes
  • Mix
  • Alignments
  • Responsive
  • Gaps
Question? Give us feedback → (opens in a new tab)Edit this page on GitHub
Documentation
Components
React Grid component

Grid

Grid system used to create complex layouts.

Rows

Columns

Flexboxes

Mix

Alignments

Responsive

Gaps

React Footer componentReact Highlight component
  • Ticketing
  • Order Kiosk
  • Agency
  • Social
  • Jobs
  • Artists
  • Promoters
  • Suppliers
  • Venues
  • Developers
  • Help Center
  • Community
  • Design
  • Status
  • Comparison
  • About
  • News
  • Careers
  • Contact Us
  • onRuntime Studio
  • Open Source
  • Partners
  • Privacy
  • Terms
  • Company Details
© 2023 Tonight Pass. All rights reserved.