Window
A draggable, resizable window inside a container.
Drag by the header. Resize from any side or corner.
Windows stay within the container.
You can have multiple windows.
Badge
A clean set of badge components with an edible look.
Button
A button component that *feels* good to use.
Code Block
A code block with syntax highlighting and quick copying.
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
Markdown
A markdown component with a clean look and no-frills parsing.
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 |
Select
A lightly skinned select component.
Input
A simple input component with a tactile feel.
Textarea
An input that can increase in height to accommodate more text.
Card
A variety of clean cards, from minimal to flashy.
Description List
Quickly display a json object in an aesthetically pleasing way.
- 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
Page Header
A clean page header so your pages look consistent.
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
Chat Input
A chat input component for a nice chatbot experience. Ready for useChat().
Chat Message
A chat message component compatible with the Vercel AI SDK including markdown support, copying, etc.
I'm good, thank you!
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.
JSX Preview
A preview of a JSX component rendered from a string. Useful for LLM-generated UIs.
Hello, world!
This is a paragraph that would go in the middle of the page.
Pointer
A controllable on-screen pointer that moves to coordinates and shows thoughts.
Reveal
A simple wrapper that reveals content when it scrolls into view.
This text
will be revealed
when it comes into view.
Motion Blur Text
A cool motion blur text effect.