Develop ultra fast with Prismane 🎉
Grid Mesh BackgroundMesh Gradient Background
New
Prismane v1.6 is out now!

Build exceptional React apps with blazing speed.

Everything you need to start building your future ventures.

$ npm i
0React components
0React hooks
0Vibrant colors
Unleash the powerExplore what we offer
Mesh Gradient Background28+Form ValidatorsEasily validate inputs with Prismane's prebuilt form validators.
Github LogoOpen SourceOur library is completely open source and we encourage everybody to contribute.
  • Martin committed yesterday

  • Brian forked the repository

  • Christian created a pull request

  • Martin approved a pull request

  • John created a new branch

Mesh Gradient BackgroundMesh Gradient Background111+

Components

Create your apps with speed and ease by using Prismane's huge collection of components.

Vibrant Color PaletteOur library includes a versatile color palette comprising over 210 colors, providing extensive customization options.
Form Builder HookOur library comes with a prebuilt hook that helps you easily build forms, register inputs, handle validation and much more.
Mesh Gradient BackgroundMesh Gradient Background26+

React Hooks

Our library comes with all of the React hooks that you need to develop anything from a simple website to a complex application.

Efficiency meets excellenceFocus on customers while Prismane takes care of your UI code.
import { Fire, Tag } from "@phosphor-icons/react";
import { Card, Image, Text, Chip, Button, Flex, fr } from "@prismane/core";

export default function App() {
  return (
    <Card w={360} h={540} gap={fr(2)}>
      <Image 
        src="https://i.pinimg.com/originals/c0/1f/4c/c01f4c611c6ecaa688d25ddf1259b4aa.jpg" 
        br="base" 
        fit="cover"
        mb={fr(2)}
      />
      <Flex gap={fr(2)}>
        <Chip icon={<Fire />}>On Sale</Chip>
        <Chip icon={<Tag />} color="teal">New</Chip>
      </Flex>
      <Flex direction="column">
        <Text fs="2xl" fw="bold" cl={["base", 900]}>Modern Sofa</Text>
        <Text cl={["base", 700]}>
          Experience the ultimate comfort and style with our luxurious sofa, 
          designed to elevate your living space.
        </Text>
      </Flex>
      <Text fw="bold" fs="2xl" cl="primary">$500</Text>
      <Flex gap={fr(4)} mt="auto">
        <Button>Buy Now</Button>
        <Button variant="tertiary" color="base">Add To Cart</Button>
      </Flex>
    </Card>
  );
}
Effortlessly beautiful componentsProduction-ready right out of the box
Button
Text Field
Hot
Chip
Success
Alert
4
Badge
Want to see more?
Logo White
Get started with PrismaneStart building faster than ever.