Proper UI

Code snippet components

Powerful and customizable React code snippet components built for modern applications and websites. These code snippet components are built using React Aria and styled with Tailwind CSS.

Code snippet example

BoltStackBlitzv0
// Importsimport mongoose, { Schema } from 'mongoose'// Collection nameexport const collection = 'Design'// Schemaconst schema = new Schema({  name: {    type: String,    required: true  },  description: {    type: String  }}, {timestamps: true})// Modelexport default mongoose.model(collection, schema, collection)

Installation

npx properui@latest add code-snippets

Code snippet examples

With line number

BoltStackBlitzv0
// Importsimport mongoose, { Schema } from 'mongoose'// Collection nameexport const collection = 'Design'// Schemaconst schema = new Schema({  name: {    type: String,    required: true  },  description: {    type: String  }}, {timestamps: true})// Modelexport default mongoose.model(collection, schema, collection)

Without line number

BoltStackBlitzv0
// Importsimport mongoose, { Schema } from 'mongoose'// Collection nameexport const collection = 'Design'// Schemaconst schema = new Schema({  name: {    type: String,    required: true  },  description: {    type: String  }}, {timestamps: true})// Modelexport default mongoose.model(collection, schema, collection)

Show more

BoltStackBlitzv0
export const colors = {  current: "currentColor",  transparent: "transparent",  white: "rgb(var(--colors-white) / <alpha-value>)",  black: "rgb(var(--colors-black) / <alpha-value>)",  // These will be inverted in dark mode.  "alpha-white": "rgb(var(--colors-alpha-white) / <alpha-value>)",  "alpha-black": "rgb(var(--colors-alpha-black) / <alpha-value>)",  brand: {    25: "rgb(var(--colors-brand-25) / <alpha-value>)",    50: "rgb(var(--colors-brand-50) / <alpha-value>)",    100: "rgb(var(--colors-brand-100) / <alpha-value>)",    200: "rgb(var(--colors-brand-200) / <alpha-value>)",    300: "rgb(var(--colors-brand-300) / <alpha-value>)",    400: "rgb(var(--colors-brand-400) / <alpha-value>)",    500: "rgb(var(--colors-brand-500) / <alpha-value>)",    600: "rgb(var(--colors-brand-600) / <alpha-value>)",    700: "rgb(var(--colors-brand-700) / <alpha-value>)",    800: "rgb(var(--colors-brand-800) / <alpha-value>)",    900: "rgb(var(--colors-brand-900) / <alpha-value>)",    950: "rgb(var(--colors-brand-950) / <alpha-value>)",  },  neutral: {    25: "rgb(var(--colors-neutral-25) / <alpha-value>)",    50: "rgb(var(--colors-neutral-50) / <alpha-value>)",    100: "rgb(var(--colors-neutral-100) / <alpha-value>)",    200: "rgb(var(--colors-neutral-200) / <alpha-value>)",    300: "rgb(var(--colors-neutral-300) / <alpha-value>)",    400: "rgb(var(--colors-neutral-400) / <alpha-value>)",    500: "rgb(var(--colors-neutral-500) / <alpha-value>)",    600: "rgb(var(--colors-neutral-600) / <alpha-value>)",    700: "rgb(var(--colors-neutral-700) / <alpha-value>)",    800: "rgb(var(--colors-neutral-800) / <alpha-value>)",    900: "rgb(var(--colors-neutral-900) / <alpha-value>)",    950: "rgb(var(--colors-neutral-950) / <alpha-value>)",  },};

With tabs

BoltStackBlitzv0
npm install @properui/components