Code snippet components
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:
CLI
Manual
npx untitledui 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)
import { CheckCircle, DownloadCloud01, Mail01 } from "@untitledui/icons";
import { HTMLAttributes } from "react";
import { cx } from "@/components/utils";
import { Input } from "@/components/base/input/input";
import { Button } from "@/components/button";
export const InlineCTAImage = () => {
return (
<div className="flex w-full max-w-3xl flex-col overflow-hidden rounded-xl bg-white shadow-sm sm:flex-row">
<div className="relative h-50 w-full sm:h-auto sm:w-60">
<img src="https://www.untitledui.com/images/portraits/person-06" className="absolute inset-0 size-full object-cover" />
</div>
<div className="flex-1 rounded-r-xl border border-t-0 border-gray-200 px-4 py-5 sm:border-l-0 sm:border-t sm:p-6">
<div className="flex flex-col">
<h3 className="text-lg font-semibold text-primary">We've just released a new update!</h3>
<p className="text-sm mt-1 text-gray-600">Check out the all new dashboard view. Pages and now load faster.</p>
<div className="mt-5 flex flex-col gap-3 sm:flex-row">
<Button color="secondary" size="md">
Dismiss
</Button>
<Button size="md">Changelog</Button>
</div>
</div>
</div>
</div>
);
};