React Purity

React Purity#

Purity UI Dashboard is a free, open-source admin dashboard template built with React and Chakra UI, developed by Creative-Tim. It offers a clean, minimal design with a focus on simplicity and ease of use. The free version provides essential components and features to create functional admin interfaces with a modern aesthetic.

👉 New to App-Generator? Sign IN with GitHub or Generate Web Apps in no time (free service).

Purity UI Dashboard is a free, open-source admin dashboard template built with React and Chakra UI, developed by Creative-Tim

Key Features#

  • React & Chakra UI: Built with React and Chakra UI components for rapid development

  • Minimal Design: Clean, modern interface with soft colors and ample whitespace

  • Responsive Layout: Fully adaptive across all device sizes

  • Light/Dark Mode: Built-in theme switching capability

  • Authentication Pages: Sign-in and sign-up page templates

  • Dashboard Example: Sample dashboard with widgets and statistics

  • Basic Components: Cards, tables, notifications, and form elements

  • Data Visualization: Simple charts and progress indicators

  • Customizable: Easily extendable using Chakra UI theming system

Technical Stack#

  • React.js (Core framework)

  • Chakra UI (Component library)

  • React Router (Navigation)

  • React Icons (Icon library)

  • React Table (Basic tables)

  • ApexCharts (Basic data visualization)

  • Framer Motion (Basic animations)

Getting Started#

# Clone repository
git clone https://github.com/creativetimofficial/purity-ui-dashboard.git

# Navigate to project directory
cd purity-ui-dashboard

# Install dependencies
npm install

# Start development server
npm start

# Build for production
npm run build

Project Structure#

/src
    /assets        # Static files (images, fonts, icons)
    /components    # Reusable UI components
        /Card        # Card components
        /Charts      # Chart components
        /Configurator # Theme configurator
        /Footer      # Footer components
        /Icons       # Custom icons
        /Layout      # Layout components
        /Menu        # Menu components
        /Navbars     # Navigation components
        /Tables      # Table components
    /theme         # Chakra UI theme customization
    /variables     # Global variables
    /views         # Page components
        /Dashboard   # Dashboard pages
        /Auth        # Authentication pages
        /Tables      # Table pages
        /Profile     # Profile pages
    App.js         # Main application component
    index.js       # Application entry point
    routes.js      # Application routes

Key Advantages#

  • Chakra UI integration for rapid development

  • Clean and minimal design language

  • Highly customizable with Chakra UI theme system

  • Lightweight and performance-focused

  • Well-structured codebase for easy extension

  • Active community and regular updates

Note: This document provides an overview for implementing the free version of Purity UI Dashboard React. Actual implementation details may vary based on specific project requirements.