Engineering
How we ship 10x faster than the agency averageHow we ship 10x faster than the agency average
We moved from quarterly releases to daily deploys. Here's what we changed — and what we kept.
Ada Pranata
6 min readContent blocks
Long-form reading components — prose, callouts, quotes, code, blog cards, comparisons.
Prose
Styled wrapper for markdown-rendered content.
Pragmatic products, shipped fast
We build MVPs, internal tools, and SaaS for founders who need production-grade software in weeks, not quarters.
What you get
- Full product design
- Frontend + backend engineering
- CI/CD + observability wired from day one
"Engineers who design. Designers who ship. Rare in our industry."
Read more in the full services brief.
Callout
Admonition for documentation. note / info / tip / warning / danger / success / important.
Note
You can override any token at the semantic layer.
Good to know
Brand configs live in a single file.
Tip
Use
bunx @idinstudio/create-component to scaffold a new component.Caution
Renaming a Tier 2 token requires a codemod.
Destructive
This operation is irreversible.
Saved. Your changes are live.
Important
WCAG AA is non-negotiable.
QuoteBlock
Standalone blockquote with attribution.
Idin Studio shipped our first paying product in four weeks. Rare in our industry.
Adi PranataFounder, Inviboo
We had a four-month backlog on our ops dashboard. They rebuilt the whole thing cleaner in three weeks.
Sri WulandariCOO, Efisiensi
Engineers who design. Designers who ship. Honest feedback, honest timelines.
CodeBlock
Pre-formatted code with optional filename header and copy button.
import { Button } from "@idinstudio/ui";
export function Save({ onSave }: { onSave: () => void }) {
return <Button severity="primary" onClick={onSave}>Save</Button>;
}TableOfContents
Sticky anchor navigation for docs pages.
BlogPostCard
Index card for a blog post.
Case study
Rebuilding Efisiensi's ops dashboard in three weeksRebuilding Efisiensi's ops dashboard in three weeks
From a four-month backlog to a shippable product.
Sri Wulandari
9 min readComparisonTable
Full pricing comparison grid.
| Feature | Free$0 | PopularPro$29/mo | Team$99/mo |
|---|---|---|---|
| Core | |||
| Projects | 3 | Unlimited | Unlimited |
| Team members | 1 | 10 | Unlimited |
| Community support | Yes | Yes | Yes |
| Advanced | |||
| SSO + SCIM | No | No | Yes |
| Custom SLA | No | No | Yes |
| Dedicated CSM | No | No | Yes |
FeatureComparison
Lean us-vs-them matrix.
| Feature | Idin Studio | Agency Alt 1 | Offshore Shop |
|---|---|---|---|
| Fixed-scope first sprint | Yes | No | No |
| Repo ownership on day 1 | Yes | No | Yes |
| Senior-only engineers | Yes | No | No |
| NDA within 1 hour | Yes | Yes | No |
| Full design + code | Yes | No | No |
ChangelogEntry
Single version release block.
v1.0.0
Production-ready release
Added
- All primitive components promoted to stable.
- Full Figma Code Connect coverage.
Changed
- Default theme mode flipped from dark to light.
Fixed
- Focus restoration when closing a Sheet from within a Dialog.
FAQDetail
Native <details>-based disclosure for FAQ pages.
How do I install @idinstudio/ui?
Run bun add @idinstudio/ui @idinstudio/tokens and import the styles at your root.
Is it tree-shakeable?
Yes. Each component has its own entry point, e.g. @idinstudio/ui/primitives/button.
What's the licence?
MIT. You own everything we ship.