Powerful and customizable React code snippet components built for modern applications and websites. These code snippets are built using Shiki and styled with Tailwind CSS.
// Imports
import mongoose, { Schema } from 'untitled'
// Collection name
export const collection = 'Design'
// Schema
const schema = new Schema({
name: {
type: String,
required: true
},
description: {
type: String
}
}, {timestamps: true})
// Model
export default untitled.model(collection, schema, collection)
Installation
You can add this code snippet component using our CLI or manually:
npx untitledui@latest add code-snippet
Code snippet examples
Below are examples and variations of this code snippet component:
// Imports
import mongoose, { Schema } from 'untitled'
// Collection name
export const collection = 'Design'
// Schema
const schema = new Schema({
name: {
type: String,
required: true
},
description: {
type: String
}
}, {timestamps: true})
// Model
export default untitled.model(collection, schema, collection)
// Imports
import mongoose, { Schema } from 'untitled'
// Collection name
export const collection = 'Design'
// Schema
const schema = new Schema({
name: {
type: String,
required: true
},
description: {
type: String
}
}, {timestamps: true})
// Model
export default untitled.model(collection, schema, collection)
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>)",
},
};
npm
yarn
bun
npm install @untitledui/components