Skip to main content
Grauity Logo

​
Welcome to Grauity

Grauity (pronounced “gravity”) is a React-based UI component library designed to harmonize simplicity and functionality. Inspired by the natural laws that guide the cosmos, Grauity provides developers and designers with the tools to create intuitive and aesthetically pleasing user interfaces.

​
What is Grauity?

Grauity is the official design system for Newton School, offering a comprehensive collection of reusable React components built with TypeScript and styled-components. Like the gravitational force itself, the principles of great design are universal, omnipresent, yet often unobserved.
Package name: @newtonschool/grauityCurrent version: 3.3.10License: MIT

​
Key features

TypeScript first

Fully typed components with comprehensive TypeScript definitions for better developer experience and type safety.

Theme support

Built-in light and dark themes with the powerful GrauityThemeProvider and NSThemeScope for flexible theming.

Styled components

Leverages styled-components for dynamic styling and theme integration with CSS-in-JS.

Rich component library

Over 40+ production-ready components including buttons, forms, modals, tables, calendars, and more.

Icon system

Custom icon font with hundreds of icons optimized from SVG using the iconland submodule.

Accessible

Components built with accessibility in mind, including proper ARIA attributes and keyboard navigation.

​
Component naming convention

All Grauity components follow a consistent naming pattern with the NS prefix (Newton School): 
import { NSButton, NSTextField, NSModal, NSTable } from '@newtonschool/grauity';
The NS prefix helps distinguish Grauity components from other libraries and makes it clear which components belong to the Newton School design system.

​
Component categories

Grauity provides components across multiple categories:

​
Form elements

  • NSTextField - Text input with adornments and validation
  • NSTextArea - Multi-line text input
  • NSCheckbox / NSCheckboxGroup - Single and grouped checkboxes
  • NSRadioButton / NSRadioButtonGroup - Radio button controls
  • NSDropdown - Select dropdown with search
  • NSCombobox - Autocomplete input
  • NSOtpInput - OTP/PIN input field
  • useNSForm - Powerful form management hook

​
Buttons and actions

  • NSButton - Primary button component with variants
  • NSIconButton - Icon-only button
  • NSFloatingActionButton - FAB for primary actions

​
Data display

  • NSTable - Feature-rich data table
  • NSTypography - Text component with variants
  • NSTag / NSPill / NSChip - Label components
  • NSAccordion - Collapsible content
  • NSTabs / NSTabList / NSTab - Tab navigation

​
Overlays

  • NSModal - Modal dialog
  • NSConfirmationDialog - Confirmation modal
  • NSMultiStepModal - Multi-step wizard
  • NSDrawer - Side drawer panel
  • NSBottomSheet - Bottom sheet for mobile
  • NSPopOver - Popover component
  • NSTooltip - Tooltip component
  • NSDropdownMenu - Dropdown menu

​
Feedback

  • NSAlert - Alert messages
  • NSAlertBanner - Banner alerts
  • NSPlaceholder - Loading placeholder

​
Calendar

  • NSCalendar - Unified calendar component
  • NSMonthlyCalendar - Month view calendar
  • NSWeeklyCalendar - Week view calendar

​
Other

  • NSIcon - Icon component
  • NSCarousel - Carousel/slider
  • NSPagination - Pagination controls
  • NSRangeInput - Range slider
  • NSOverlay - Backdrop overlay

​
Get started

Installation

Install Grauity and configure your project

Quickstart

Build your first component in minutes

Components

Explore the full component library

​
Philosophy

Like the gravitational force itself, the principles of great design are universal, omnipresent, yet often unobserved. With Grauity, we aim to tap into these fundamental elements to craft UI components that not only look stunning but feel inherently right.

​
Community and support

Grauity is also affectionately known as grauity, graUIty, or simply gravity.

Build docs developers (and LLMs) love

Get started for freeTalk to us