Blocks
UI blocks for AI applications, built with prompt-kit components. Copy and paste these blocks into your project to quickly build chat interfaces, conversations, and AI interactions.
Prompt Input Blocks
Prompt Input with Actions
A prompt input with multiple action buttons for search, voice input, and more.
Prompt Input with Suggestions
A prompt input with categorized suggestions that expand on click.
Prompt Input with Autocomplete
A prompt input with autocomplete suggestions that filter as you type.
Conversation Blocks
Basic Full Conversation
A simple conversation layout with user and assistant messages.
Of course! I'd be happy to help with your coding question. What would you like to know?
Creating a responsive layout with CSS Grid is straightforward. Here's a basic example:
.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem;}This creates a grid where:
- Columns automatically fit as many as possible
- Each column is at least 250px wide
- Columns expand to fill available space
- There's a 1rem gap between items
Would you like me to explain more about how this works?
The capital of France is Paris.
Conversation with Avatars
A conversation with avatar images for each message.
Of course! I'd be happy to help with your coding question. What would you like to know?
Creating a responsive layout with CSS Grid is straightforward. Here's a basic example:
.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem;}This creates a grid where:
- Columns automatically fit as many as possible
- Each column is at least 250px wide
- Columns expand to fill available space
- There's a 1rem gap between items
Would you like me to explain more about how this works?
Conversation with Actions
A conversation with action buttons like copy, like, dislike, and regenerate.
Of course! I'd be happy to help with your coding question. What would you like to know?
Creating a responsive layout with CSS Grid is straightforward. Here's a basic example:
.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem;}This creates a grid where:
- Columns automatically fit as many as possible
- Each column is at least 250px wide
- Columns expand to fill available space
- There's a 1rem gap between items
Would you like me to explain more about how this works?
Conversation with Scroll to Bottom
A conversation with a scroll-to-bottom button for easy navigation.
Of course! I'd be happy to help with your coding question. What would you like to know?
Creating a responsive layout with CSS Grid is straightforward. Here's a basic example:
.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem;}This creates a grid where:
- Columns automatically fit as many as possible
- Each column is at least 250px wide
- Columns expand to fill available space
- There's a 1rem gap between items
Would you like me to explain more about how this works?
The capital of France is Paris.
Sure! CSS Grid is a powerful two-dimensional layout system designed for the browser. Unlike Flexbox which is primarily designed for either a row or a column, Grid can work with both rows and columns together.
Here are some key features of CSS Grid:
- Two-dimensional layout: Control both rows and columns simultaneously
- Grid lines: Position items by referencing grid lines
- Grid tracks: Rows and columns can be explicitly sized or can adjust automatically
- Grid cells: Intersections of rows and columns
- Grid areas: Named regions spanning multiple grid cells
Basic syntax example:
.container { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: auto 200px auto; gap: 20px;}​.item { grid-column: 1 / 3; /* Start at line 1, end at line 3 */ grid-row: 2 / 3; /* Start at line 2, end at line 3 */}This creates a layout with three columns (the middle one being twice as wide) and three rows (middle one fixed at 200px), with 20px gaps between all cells.
Flexbox vs. Grid: When to Use Each
Flexbox (one-dimensional):
- Best for arranging items in a single row or column
- Great for distributing space among items within a container
- Perfect for:
- Navigation menus
- Card layouts with variable content length
- Centering items vertically and horizontally
- Simple layouts that need to be flexible in one direction
Grid (two-dimensional):
- Best for complex layouts with both rows and columns
- Excellent for precisely positioning items in a grid system
- Perfect for:
- Full-page layouts
- Dashboard interfaces
- Image galleries with consistent spacing
- Any design that requires alignment across both rows and columns
When to use both: It's common to use Grid for the main page layout and Flexbox for individual components within that layout. They complement each other well!
You're welcome! CSS layout systems like Flexbox and Grid have revolutionized web design, making it much easier to create responsive and complex layouts without relying on hacks or workarounds.
If you ever have more questions about CSS or web development in general, feel free to ask. Happy coding! 😊
Conversation with Prompt Input
A complete chat interface with conversation history and prompt input.
Of course! I'd be happy to help with your coding question. What would you like to know?
Creating a responsive layout with CSS Grid is straightforward. Here's a basic example:
.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem;}This creates a grid where:
- Columns automatically fit as many as possible
- Each column is at least 250px wide
- Columns expand to fill available space
- There's a 1rem gap between items
Would you like me to explain more about how this works?
The capital of France is Paris.