Primitives
Notes
Drag by the header. Resize from any side or corner.
Preview
Windows stay within the container.
You can have multiple windows.
Window
PrimaryAvailableDisabledWarningReadyUpgradedPaused
PrimaryAvailableDisabledWarningReadyUpgradedPaused
PrimaryAvailableDisabledWarningReadyUpgradedPaused
Badge
Button
Long press any button to confirm the action.
Long Press Button
llms.py
def llm_call(prompt: str, system: str, model: str = "openai/gpt-4o-mini") -> str:
"""
Make a LLM call
"""
messages = [
{"role": "system", "content": system},
{"role": "user", "content": prompt},
]
messages = [msg for msg in messages if msg is not None]
kwargs: dict[str, Any] = {
"model": model,
"messages": messages,
"temperature": 0.7,
"max_tokens": 1000,
}
response = client.chat.completions.create(**kwargs)
if not response.choices or not response.choices[0].message.content:
raise ValueError("No valid response content received from the API")
return response.choices[0].message.content
Code Block
Hello, world!
This is a paragraph. You may use it for LLM generations, easy CMS, or something else. It's based on <ReactMarkdown /> and inspired by .
It has some pretty sweet components like:
- This unordered list
- This ordered list
- This code block
This is a heading 2
This is a heading 3
This is a heading 4
This is a heading 5
This is a heading 6
We can also use ordered lists.
- Item 1
- Item 2
- Item 3
This is a quote.
It supports code blocks
const a = 1;
const b = 2;And images
San Francisco
It also supports tables:
| Name | Age |
|---|---|
| John | 25 |
| Jane | 30 |
Markdown
Select
Input
Number Input
⌘ + K
Command Prompt
Looks like text, edits like input
Try styling via className. It's fully unstyled.
Invisible Input
Textarea
Default
This is a card with some informative text and space to add more useful stuff.
Raised
This is a card with some informative text and space to add more useful stuff.
Flat
This is a card with some informative text and space to add more useful stuff.
Outline
This is a card with some informative text and space to add more useful stuff.
Fancy Light
This is a card with some informative text and space to add more useful stuff.
Double
This is a card with some informative text and space to add more useful stuff.
Card
- name
- John Doe
- age
- 30
- john.doe@example.com
- address
- 123 Main St, Anytown, USA
- phone
- +1234567890
- Name
- John Doe
- Age
- 30
- john.doe@example.com
- Address
- 123 Main St, Anytown, USA
- Phone
- +1234567890
Description List
Page Header
This is a page header that'll fit nicely at the top of your page and be consistent
Page Header
Page Header
This is a page header
Page Header
Loader
Format:
oklch(0.6847 0.1479 237.32)Color Picker
AI
Chat
Chat Input
Hello, how are you?
I'm good, thank you!
Tell me about design systems
Design Systems
A design system is a collection of components that are used to build a design system. It is a collection of components that are used to build a design system.
Chat Message
The user is asking for the sum of the first six positive even numbers.
The calculator tool returned the answer 42. Let me return the answer to the user.
Reasoning
Tool Call
Hello, world!
This is a paragraph that would go in the middle of the page.