Getting Started
Get skeehn running in your project in under 2 minutes.
1
Install
The CLI is the fastest way to get started. It scaffolds config, imports your theme, and sets up CSS.
npx skeehn init2
Add Components
Pick the components you need. Each one is a standalone CSS file with optional React wrappers.
# Add individual components
npx skeehn add button chat-bubble card
# Add all AI components
npx skeehn add --preset ai-chat3
Import CSS
Import the engine foundation and component styles in your global stylesheet.
/* globals.css */
/* Engine foundation */
@import "@skeehn/core/reset.css";
@import "@skeehn/core/tokens.css";
@import "@skeehn/core/dither.css";
@import "@skeehn/core/animation.css";
/* Theme (pick one) */
@import "@skeehn/core/themes/default.css";
/* Components you're using */
@import "@skeehn/core/button.css";
@import "@skeehn/core/chat-bubble.css";
@import "@skeehn/core/card.css";4
Use Components
Import React wrappers or use the CSS classes directly. Every component works with or without JavaScript.
import { Button, ChatBubble, Card } from '@skeehn/react';
export function MyApp() {
return (
<div>
<Card>
<Card.Header>
<Card.Title>Hello skeehn</Card.Title>
</Card.Header>
<Card.Content>
<ChatBubble role="assistant">
Welcome to the ASCII-first component library.
</ChatBubble>
<Button>Get Started</Button>
</Card.Content>
</Card>
</div>
);
}5
Switch Themes
Swap the entire visual identity with a single CSS import or data attribute.
<!-- Static: import a theme CSS file -->
@import "@skeehn/core/themes/terminal.css";
<!-- Dynamic: set data attribute on root -->
<html data-theme="terminal">
<!-- Available themes -->
default | dark | terminal | brutal | print | grain | mardi-gras