Every component demo is linked to its markdown documentation.

Grid System

A robust, flexbox-based 12-column grid system for responsive layouts.

Resize the window to see columns stack or shift.

<div class="pure-container">
  <div class="pure-row">
    <div class="pure-col-12 pure-col-md-6">Half width on desktop</div>
    <div class="pure-col-12 pure-col-md-6">Half width on desktop</div>
  </div>
</div>

Buttons

Variants, sizes, shapes, loading states, and groups.

<button class="pure-btn pure-btn-primary">Primary</button>
<button class="pure-btn pure-btn-outline-primary">Outline</button>

Typography & Display

Consistent typography system for headings and body text.

<h1 class="pure-display-1">Display 1</h1>
<h1 class="pure-h1">Heading 1</h1>
<p class="pure-lead">Lead paragraph text.</p>

This is a lead paragraph (pure-lead). It stands out from regular text with larger size and lighter weight.

This is a standard paragraph. It uses the default body font size and line height for optimal readability. Pure UI provides a clean and modern typography system inspired by Material Design.

Forms

Inputs, select, textarea, checkbox, radio, switch, range.

<div class="pure-form-group">
  <label class="pure-form-label">Label</label>
  <input type="text" class="pure-input" placeholder="...">
</div>

Multi-select

Tagged selection component for multiple choices.

<div class="pure-multi-select">
  <div class="pure-multi-select-input">...</div>
  <div class="pure-multi-select-dropdown">...</div>
</div>

Currency & Number Inputs

Prefix symbol wrapper, formatted displays, number stepper.

Cards & Containers

Content panels, hover cards, and accent colors.

Charts

CSS bar and donut charts for lightweight dashboard visuals.

Stats Tiles

Responsive KPI cards with trend indicators and compact density options.

Empty State

Reusable blanks for no-data pages, filtered results, and onboarding states.

Badges & Chips

Small status indicators and removable tags.

Alerts & Toast

Contextual feedback messages and notifications.

Data Tables

Responsive "Stack" mode for premium mobile viewing.

Tabs

Accordion

Smooth responsive expanding panels.

Breadcrumbs & Steppers

Mobile-Ready Dropdowns

No more bottom-sticking. Supports nested levels on touch.

Modal & Drawer

Add show class to open. Works with Angular's class binding.

Dropdown

Command Palette

Press Ctrl/Cmd + K for quick actions and keyboard navigation.

Typeahead

Search-as-you-type input with inline suggestions.

Navbar & Sidebar

Static previews of the navbar and sidebar components.

Drag & Drop

Draggable items and drop zones for intuitive interfaces.

<div class="pure-drop-container">
  <div class="pure-dropzone">
    <div class="pure-draggable" draggable="true">Item 1</div>
  </div>
</div>

Virtual Scroller

Efficiently render massive lists of data (demo uses 1,000 items).

Event Calendar

A full-width responsive calendar for displaying events and tasks.

Pagination

• Prev
• 1
• 2
• 3
• …
• 12
• Next

• Prev
• 4
• 5
• 6
• Next

Progress, Spinners & Skeletons

Calendar & Date Picker

Full inline calendar. For popup, wrap in .pure-datepicker. Add JS to toggle .open and apply .selected, .today, .in-range classes.

Advanced Components

Heavily functional components for complex forms and logic.

Miscellaneous

• Payment received 2 mins ago

  ₹12,500 from Priya Mehta.
• KYC pending 1 hour ago

  Documents awaiting verification.
• Account created Yesterday

Tooltip & Popover

Contextual information on hover or click.