Prose
Tabs
The Tabs component from the Prose collection allows you to create tabbed interfaces in your content.
Variants
Separate
PostgreSQL Column Types
import { integer, pgTable } from "drizzle-orm/pg-core";
export const table = pgTable("table", {
int: integer("int"),
});
Card
Setting Up Express API
First, initialize your project and install the required dependencies:
mkdir my-express-api && cd my-express-api
npm init -y
# Install core dependencies
npm install express cors helmet morgan
# Install development dependencies
npm install -D nodemon @types/node typescript ts-node
Create your basic project structure:
mkdir src routes middleware controllers
touch src/app.ts src/server.ts
Update your package.json scripts:
package.json
{
"scripts": {
"dev": "nodemon src/server.ts",
"build": "tsc",
"start": "node dist/server.js",
"test": "jest"
}
}
Line Style
about:blank
Combobox
PostgreSQL Column Types
import { integer, pgTable } from "drizzle-orm/pg-core";
export const table = pgTable("table", {
int: integer("int"),
});
Synced Tabs
Prose Tabs API
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
variant | "separate" | "card" | "line" | "combobox" | "separate" | No | The variant of the tabs |
searchPlaceholder | string | "Search Tab..." | No | Placeholder text for the search input |
searchEmpty | string | "No tab found." | No | Text to display when no tab is found |
sync | string | — | No | A scope to sync the active tab state with other tab groups |
padded | boolean | true | No | Whether to add padding around the tabs |
inStack | boolean | false | No | Whether the tabs are in a stack (e.g. accordion) |
disableSearch | boolean | false | No | Disable the search functionality |
comboBoxFullWidth | boolean | — | No | Whether the combobox should take the full width of the container |