Photonix UI - React Components, Templates & Figma Design System

v1.1.8

Documentation

Everything you need to know about Photonix. From installation to advanced customization.

Getting Started

Quick installation guide and basic setup for your project.

Components

Browse our library of 60+ beautifully crafted components.

Theming

Customize colors, typography, and design tokens.

API Reference

Detailed documentation for every component prop.

License Setup

If you purchased Photonix Pro or Ultimate, run this command first to activate your license and configure private registry access. This creates a .npmrc file in your project with your install token.

Terminal

# Run this in your project directory
curl -fsSL https://photonix.dev/install.sh | bash

You can also manage your tokens at license.photonix.dev

Installation

Install Photonix using your preferred package manager.

Terminal

# Using pnpm (recommended)
pnpm add @photonix/ultimate

# Using npm
npm install @photonix/ultimate

# Using yarn
yarn add @photonix/ultimate

Basic Usage

Import components and styles to get started.

App.tsx

import { Button, Card, Flex } from '@photonix/ultimate';
import '@photonix/ultimate/styles';

export default function App() {
  return (
    <Card variant="outlined">
      <Flex direction="column" gap="md" p="lg">
        <Text variant="body-md">Hello Photonix!</Text>
        <Button variant="primary">Get Started</Button>
      </Flex>
    </Card>
  );
}

Ready to explore?

Browse all available components in our showcase.